-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add HTML email support to alert emails.
- Loading branch information
Showing
7 changed files
with
238 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
162 changes: 162 additions & 0 deletions
162
www/includes/easyparliament/templates/emails/alert_mailout.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>Your TheyWorkForYou email alert</title> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <style type="text/css"> | ||
| /* CLIENT-SPECIFIC STYLES */ | ||
| body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } | ||
| table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; } | ||
| img { -ms-interpolation-mode: bicubic; } | ||
|
|
||
| /* RESET STYLES */ | ||
| img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; } | ||
| table { border-collapse: collapse !important; } | ||
| body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } | ||
|
|
||
| /* iOS BLUE LINKS */ | ||
| a[x-apple-data-detectors] { | ||
| color: inherit !important; | ||
| text-decoration: none !important; | ||
| font-size: inherit !important; | ||
| font-family: inherit !important; | ||
| font-weight: inherit !important; | ||
| line-height: inherit !important; | ||
| } | ||
|
|
||
| /* GMAIL BLUE LINKS */ | ||
| u + #body a { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| font-size: inherit; | ||
| font-family: inherit; | ||
| font-weight: inherit; | ||
| line-height: inherit; | ||
| } | ||
|
|
||
| /* SAMSUNG MAIL BLUE LINKS */ | ||
| #MessageViewBody a { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| font-size: inherit; | ||
| font-family: inherit; | ||
| font-weight: inherit; | ||
| line-height: inherit; | ||
| } | ||
|
|
||
| /* These rules set the link and hover states, making it clear that links are, in fact, links. */ | ||
| /* Embrace established conventions like underlines on links to keep emails accessible. */ | ||
| a { color: #4faded; font-weight: 900; text-decoration: underline; } | ||
| a:hover { color: #38a2eb !important; text-decoration: none !important; } | ||
| a.button:hover { color: #ffffff !important; background-color: #38a2eb !important; } | ||
|
|
||
| /* These rules adjust styles for desktop devices, keeping the email responsive for users. */ | ||
| /* Some email clients don't properly apply media query-based styles, which is why we go mobile-first. */ | ||
| @media screen and (min-width:600px) { | ||
| h1 { font-size: 36px !important; line-height: 1.2 !important; margin: 0 0 28px 0;} | ||
| .intro { font-size: 24px !important; line-height: 36px !important; } | ||
|
|
||
| h2 { font-size: 25px !important; line-height: 1.2 !important; margin: 0; } | ||
|
|
||
| p { font-size: 18px !important;} | ||
|
|
||
| } | ||
|
|
||
| @font-face { | ||
| font-family: 'Source Sans Pro'; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| font-display: swap; | ||
| src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2) format('woff2'); | ||
| unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: 'Source Sans Pro'; | ||
| font-style: italic; | ||
| font-weight: 900; | ||
| font-display: swap; | ||
| src: url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZklyds18S0xR41.woff2) format('woff2'); | ||
| unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; | ||
| } | ||
|
|
||
| u + .body .glist { margin-left: 0 !important; } | ||
| ul li { margin-bottom: 20px; color: #ffffff; } | ||
|
|
||
| @media only screen and (max-width: 600px) { | ||
| u + .body .glist { margin-left: 25px !important; } | ||
| } | ||
| </style> | ||
|
|
||
| </head> | ||
| <body style="margin: 0 !important; padding: 0 !important; background-color: #f7f6f5;" class="body"> | ||
|
|
||
| <!--[if (gte mso 9)|(IE)]> | ||
| <table cellspacing="0" cellpadding="0" border="0" width="600" align="center" role="presentation"><tr><td> | ||
| <![endif]--> | ||
|
|
||
| <div role="article" aria-label="An email from TheyWorkForYou" lang="en" style="background-color: white; color: #2b2b2b; font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; font-weight: 400; line-height: 28px; margin: 0 auto; max-width: 600px; padding: 40px 20px 40px 20px;"> | ||
|
|
||
| <header> | ||
| <a href="https://www.theyworkforyou.com"> | ||
| <img src="images/theyworkforyou-logo.png" alt="" width="170"> | ||
| </a> | ||
| <h1 style="color: #333333; font-size: 21px; font-weight: 400; line-height: 21px; font-family: 'Source Sans Pro'; margin-top: 30px;">Email alerts</h1> | ||
| </header> | ||
|
|
||
| <main> | ||
|
|
||
| {_HTML_} | ||
|
|
||
| <hr style="height:2px;border-width:0; background-color: #f7f6f5; margin: 30px 0;"> | ||
|
|
||
| <p style="font-size: 16px; margin-top: 30px;">Best wishes,<br>TheyWorkForYou</p> | ||
|
|
||
| <p style="font-size: 16px; margin-top: 30px;"> | ||
| mySociety,<br> | ||
| 483 Green Lanes,<br> | ||
| London,<br> | ||
| N13 4BS,<br> | ||
| United Kingdom | ||
| </p> | ||
|
|
||
| <div class="list-box" style="background-color: #f7f6f5; padding: 20px; border-radius: 5px; margin-top: 30px;"> | ||
| <h3 style="line-height: 1.2; color: #333333;">Help keep TheyWorkForYou running</h3> | ||
| <p>Please consider donating to mySociety to help us continue and expand:</p> | ||
|
|
||
| <div style="margin: 0;"><!--[if mso]> | ||
| <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.mysociety.org/twfy-donate/" style="height:60px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#0BA7D1"> | ||
| <w:anchorlock/> | ||
| <center> | ||
| <![endif]--> | ||
| <a class="button" href="https://www.mysociety.org/twfy-donate/" | ||
| style="background-color:#4faded;border-radius:4px;color:#ffffff;display:inline-block;font-size:18px;font-weight:900;line-height:60px;text-align:center;text-decoration:none;padding: 0 20px;-webkit-text-size-adjust:none;">Donate</a> | ||
| <!--[if mso]> | ||
| </center> | ||
| </v:roundrect> | ||
| <![endif]--></div> | ||
| </div> | ||
|
|
||
| <hr style="height:2px;border-width:0; background-color: #f7f6f5; margin: 30px 0;"> | ||
|
|
||
| </main> | ||
|
|
||
| <footer style="margin-top: 30px;"> | ||
| <a href="https://www.mysociety.org"> | ||
| <img src="images/mySociety-logo.png" alt="" width="151" height="auto"> | ||
| </a> | ||
|
|
||
| <hr style="height:2px;border-width:0; background-color: #f7f6f5; margin: 30px 0;"> | ||
|
|
||
| <p><a href="{MANAGE}">Unsubscribe, manage or add to your alerts</a>.</p> | ||
|
|
||
| </footer> | ||
|
|
||
| </div> | ||
| <!--[if (gte mso 9)|(IE)]> | ||
| </td></tr></table> | ||
| <![endif]--> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
www/includes/easyparliament/templates/emails/images/logo-mysociety.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+8.19 KB
www/includes/easyparliament/templates/emails/images/theyworkforyou-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.