Browse Source
email template from Litmus. CSS already inlined, so dropping premailer dependency.
pull/114/head
Pēteris Caune
8 years ago
12 changed files with 302 additions and 348 deletions
Split View
Diff Options
-
+6 -2hc/accounts/models.py
-
+6 -0hc/front/templatetags/hc_extras.py
-
+2 -2hc/lib/emails.py
-
+0 -1requirements.txt
-
+13 -11templates/emails/alert-body-html.html
-
+187 -201templates/emails/base.html
-
+21 -39templates/emails/login-body-html.html
-
+1 -1templates/emails/login-body-text.html
-
+12 -8templates/emails/report-body-html.html
-
+10 -8templates/emails/set-password-body-html.html
-
+1 -1templates/emails/set-password-body-text.html
-
+43 -74templates/emails/summary-html.html
+ 6
- 2
hc/accounts/models.py
View File
+ 6
- 0
hc/front/templatetags/hc_extras.py
View File
+ 2
- 2
hc/lib/emails.py
View File
+ 0
- 1
requirements.txt
View File
+ 13
- 11
templates/emails/alert-body-html.html
View File
+ 187
- 201
templates/emails/base.html
View File
| @ -1,222 +1,208 @@ | |||
| {% load hc_extras %} | |||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |||
| <html xmlns="http://www.w3.org/1999/xhtml"> | |||
| <!DOCTYPE html>{% load humanize hc_extras %} | |||
| <html> | |||
| <head> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |||
| <title>{% block title %}{% endblock %}</title> | |||
| <style type="text/css" rel="stylesheet" media="all"> | |||
| /* Base ------------------------------ */ | |||
| *:not(br):not(tr):not(html) { | |||
| font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; | |||
| -webkit-box-sizing: border-box; | |||
| box-sizing: border-box; | |||
| } | |||
| body { | |||
| width: 100% !important; | |||
| height: 100%; | |||
| margin: 0; | |||
| line-height: 1.4; | |||
| background-color: #F2F4F6; | |||
| color: #74787E; | |||
| -webkit-text-size-adjust: none; | |||
| } | |||
| a { | |||
| color: #3869D4; | |||
| } | |||
| <title>{% block title %}{% endblock %}</title> | |||
| <meta 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%;} /* Prevent WebKit and Windows mobile changing default text sizes */ | |||
| table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} /* Remove spacing between tables in Outlook 2007 and up */ | |||
| img{-ms-interpolation-mode: bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */ | |||
| a.neutral { | |||
| color: #74787E; | |||
| } | |||
| /* 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;} | |||
| /* Layout ------------------------------ */ | |||
| .email-wrapper { | |||
| width: 100%; | |||
| margin: 0; | |||
| padding: 0; | |||
| background-color: #F2F4F6; | |||
| } | |||
| .email-content { | |||
| width: 100%; | |||
| margin: 0; | |||
| padding: 0; | |||
| /* 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; | |||
| } | |||
| /* Masthead ----------------------- */ | |||
| .email-masthead { | |||
| padding: 25px 0; | |||
| text-align: center; | |||
| } | |||
| .email-masthead_logo { | |||
| max-width: 400px; | |||
| border: 0; | |||
| } | |||
| .email-masthead_name { | |||
| font-size: 16px; | |||
| font-weight: bold; | |||
| color: #bbbfc3; | |||
| text-decoration: none; | |||
| text-shadow: 0 1px 0 white; | |||
| } | |||
| /* MOBILE STYLES */ | |||
| @media screen and (max-width: 525px) { | |||
| /* Body ------------------------------ */ | |||
| .email-body { | |||
| width: 100%; | |||
| margin: 0; | |||
| padding: 0; | |||
| border-top: 1px solid #EDEFF2; | |||
| border-bottom: 1px solid #EDEFF2; | |||
| background-color: #FFF; | |||
| } | |||
| .email-body_inner { | |||
| width: 570px; | |||
| margin: 0 auto; | |||
| padding: 0; | |||
| } | |||
| .email-footer { | |||
| width: 570px; | |||
| margin: 0 auto; | |||
| padding: 0; | |||
| text-align: center; | |||
| } | |||
| .email-footer p { | |||
| color: #74787E; | |||
| } | |||
| .email-footer a { | |||
| color: #74787E; | |||
| } | |||
| .body-action { | |||
| width: 100%; | |||
| margin: 30px auto; | |||
| padding: 0; | |||
| text-align: center; | |||
| } | |||
| .body-sub { | |||
| margin-top: 25px; | |||
| padding-top: 25px; | |||
| border-top: 1px solid #EDEFF2; | |||
| } | |||
| .content-cell { | |||
| padding: 35px; | |||
| } | |||
| .align-right { | |||
| text-align: right; | |||
| } | |||
| /* ALLOWS FOR FLUID TABLES */ | |||
| .wrapper { | |||
| width: 100% !important; | |||
| max-width: 100% !important; | |||
| } | |||
| /* Type ------------------------------ */ | |||
| h1 { | |||
| margin-top: 0; | |||
| color: #2F3133; | |||
| font-size: 19px; | |||
| font-weight: bold; | |||
| text-align: left; | |||
| } | |||
| h2 { | |||
| margin-top: 0; | |||
| color: #2F3133; | |||
| font-size: 16px; | |||
| font-weight: bold; | |||
| text-align: left; | |||
| } | |||
| h3 { | |||
| margin-top: 0; | |||
| color: #2F3133; | |||
| font-size: 14px; | |||
| font-weight: bold; | |||
| text-align: left; | |||
| } | |||
| p { | |||
| margin-top: 0; | |||
| color: #74787E; | |||
| font-size: 16px; | |||
| line-height: 1.5em; | |||
| text-align: left; | |||
| } | |||
| p.sub { | |||
| font-size: 12px; | |||
| } | |||
| p.center { | |||
| text-align: center; | |||
| } | |||
| /* ADJUSTS LAYOUT OF LOGO IMAGE */ | |||
| .logo img { | |||
| margin: 0 auto !important; | |||
| } | |||
| /* Buttons ------------------------------ */ | |||
| .button { | |||
| display: inline-block; | |||
| width: 200px; | |||
| background-color: #3869D4; | |||
| border-radius: 3px; | |||
| color: #ffffff; | |||
| font-size: 15px; | |||
| line-height: 45px; | |||
| text-align: center; | |||
| text-decoration: none; | |||
| -webkit-text-size-adjust: none; | |||
| mso-hide: all; | |||
| } | |||
| .button--green { | |||
| background-color: #22BC66; | |||
| } | |||
| .button--red { | |||
| background-color: #dc4d2f; | |||
| } | |||
| .button--blue { | |||
| background-color: #3869D4; | |||
| } | |||
| /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */ | |||
| .mobile-hide { | |||
| display: none !important; | |||
| } | |||
| .img-max { | |||
| max-width: 100% !important; | |||
| width: 100% !important; | |||
| height: auto !important; | |||
| } | |||
| /* FULL-WIDTH TABLES */ | |||
| .responsive-table { | |||
| width: 100% !important; | |||
| } | |||
| /* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */ | |||
| .padding { | |||
| padding: 10px 5% 15px 5% !important; | |||
| } | |||
| .padding-meta { | |||
| padding: 30px 5% 0px 5% !important; | |||
| text-align: center; | |||
| } | |||
| .no-padding { | |||
| padding: 0 !important; | |||
| } | |||
| .section-padding { | |||
| padding: 50px 15px 50px 15px !important; | |||
| } | |||
| /* ADJUST BUTTONS ON MOBILE */ | |||
| .mobile-button-container { | |||
| margin: 0 auto; | |||
| width: 100% !important; | |||
| } | |||
| .mobile-button { | |||
| padding: 15px !important; | |||
| border: 0 !important; | |||
| font-size: 16px !important; | |||
| display: block !important; | |||
| } | |||
| /*Media Queries ------------------------------ */ | |||
| @media only screen and (max-width: 600px) { | |||
| .email-body_inner, | |||
| .email-footer { | |||
| width: 100% !important; | |||
| } | |||
| } | |||
| @media only screen and (max-width: 500px) { | |||
| .button { | |||
| width: 100% !important; | |||
| } | |||
| } | |||
| </style> | |||
| /* ANDROID CENTER FIX */ | |||
| div[style*="margin: 16px 0;"] { margin: 0 !important; } | |||
| </style> | |||
| </head> | |||
| <body> | |||
| <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0"> | |||
| <body style="margin: 0 !important; padding: 0 !important;"> | |||
| <table border="0" cellpadding="0" cellspacing="0" width="100%"> | |||
| <tr> | |||
| <td align="center"> | |||
| <table class="email-content" width="100%" cellpadding="0" cellspacing="0"> | |||
| <!-- Logo --> | |||
| <tr> | |||
| <td class="email-masthead"> | |||
| <img src="{% site_root %}/static/img/logo-full.png" alt="" /> | |||
| <td bgcolor="#F2F4F6" align="center"> | |||
| <!--[if (gte mso 9)|(IE)]> | |||
| <table align="center" border="0" cellspacing="0" cellpadding="0" width="500"> | |||
| <tr> | |||
| <td align="center" valign="top" width="500"> | |||
| <![endif]--> | |||
| <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 500px;" class="wrapper"> | |||
| <tr> | |||
| <td align="center" valign="top" style="padding: 15px 0;" class="logo"> | |||
| <a href="https://healthchecks.io" target="_blank"> | |||
| <img alt="Logo" src="{% site_root %}/static/img/[email protected]" width="200" height="50" style="display: block; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-size: 16px;" border="0"> | |||
| </a> | |||
| </td> | |||
| </tr> | |||
| </table> | |||
| <!--[if (gte mso 9)|(IE)]> | |||
| </td> | |||
| </tr> | |||
| <!-- Email Body --> | |||
| <tr> | |||
| <td class="email-body" width="100%"> | |||
| <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0"> | |||
| <!-- Body content --> | |||
| </tr> | |||
| </table> | |||
| <![endif]--> | |||
| </td> | |||
| </tr> | |||
| <tr> | |||
| <td bgcolor="#ffffff" align="center" style="padding: 50px 15px 70px 15px;" class="section-padding"> | |||
| <!--[if (gte mso 9)|(IE)]> | |||
| <table align="center" border="0" cellspacing="0" cellpadding="0" width="500"> | |||
| <tr> | |||
| <td align="center" valign="top" width="500"> | |||
| <![endif]--> | |||
| <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 500px;" class="responsive-table"> | |||
| <tr> | |||
| <td class="content-cell"> | |||
| {% block content %}{% endblock %} | |||
| </td> | |||
| <td> | |||
| <!-- HERO IMAGE --> | |||
| <table width="100%" border="0" cellspacing="0" cellpadding="0"> | |||
| <tr> | |||
| <td> | |||
| <table width="100%" border="0" cellspacing="0" cellpadding="0"> | |||
| <tr> | |||
| <td style="padding: 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding"> | |||
| {% block content %}{% endblock %} | |||
| </td> | |||
| </tr> | |||
| </table> | |||
| </td> | |||
| </tr> | |||
| {% if button_text %} | |||
| <tr> | |||
| <td align="center"> | |||
| <table width="100%" border="0" cellspacing="0" cellpadding="0"> | |||
| <tr> | |||
| <td align="center" style="padding-top: 25px; padding-bottom: 15px;" class="padding"> | |||
| <table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container"> | |||
| <tr> | |||
| <td align="center" style="border-radius: 3px;" bgcolor="#22BC66"><a href="{{ button_url }}" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; border-radius: 3px; padding: 15px 25px; border: 1px solid #22BC66; display: inline-block;" class="mobile-button">{{ button_text }}</a></td> | |||
| </tr> | |||
| </table> | |||
| </td> | |||
| </tr> | |||
| </table> | |||
| </td> | |||
| </tr> | |||
| {% endif %} | |||
| <tr> | |||
| <td> | |||
| <table width="100%" border="0" cellspacing="0" cellpadding="0"> | |||
| <tr> | |||
| <td style="padding: 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding"> | |||
| {% block content_more %}{% endblock %} | |||
| </td> | |||
| </tr> | |||
| </table> | |||
| </td> | |||
| </tr> | |||
| </table> | |||
| </td> | |||
| </tr> | |||
| </table> | |||
| </table> | |||
| <!--[if (gte mso 9)|(IE)]> | |||
| </td> | |||
| </tr> | |||
| <tr> | |||
| <td> | |||
| <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0"> | |||
| </tr> | |||
| </table> | |||
| <![endif]--> | |||
| </td> | |||
| </tr> | |||
| <tr> | |||
| <td bgcolor="#ffffff" align="center" style="padding: 20px 0px;"> | |||
| <!--[if (gte mso 9)|(IE)]> | |||
| <table align="center" border="0" cellspacing="0" cellpadding="0" width="500"> | |||
| <tr> | |||
| <td align="center" valign="top" width="500"> | |||
| <![endif]--> | |||
| <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="max-width: 500px;" class="responsive-table"> | |||
| <tr> | |||
| <td class="content-cell"> | |||
| <p class="sub center">© 2017 healthchecks<span>.</span>io. All rights reserved. | |||
| {% block unsub %}{% endblock %} | |||
| </p> | |||
| </td> | |||
| <td align="center" style="font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;"> | |||
| © 2017 {% escaped_site_name %}. All rights reserved. | |||
| {% block unsub %}{% endblock %} | |||
| </td> | |||
| </tr> | |||
| </table> | |||
| </table> | |||
| <!--[if (gte mso 9)|(IE)]> | |||
| </td> | |||
| </tr> | |||
| </table> | |||
| </td> | |||
| </tr> | |||
| </table> | |||
| <![endif]--> | |||
| </td> | |||
| </tr> | |||
| </table> | |||
| </table> | |||
| </body> | |||
| </html> | |||
| </html> | |||
+ 21
- 39
templates/emails/login-body-html.html
View File
+ 1
- 1
templates/emails/login-body-text.html
View File
+ 12
- 8
templates/emails/report-body-html.html
View File
+ 10
- 8
templates/emails/set-password-body-html.html
View File
| @ -1,11 +1,13 @@ | |||
| {% extends "emails/base.html" %} | |||
| {% load hc_extras %} | |||
| <p>Hello,</p> | |||
| <p>Here's a link to set a password for your account on {% site_name %}:</p> | |||
| <p><a href="{{ set_password_link }}">{{ set_password_link }}</a></p> | |||
| {% block content %} | |||
| Hello,<br /> | |||
| To set up a password for your account on {% site_name %}, please press the | |||
| button below:</p> | |||
| {% endblock %} | |||
| <p> | |||
| --<br /> | |||
| Regards,<br /> | |||
| {% site_name %} | |||
| </p> | |||
| {% block content_more %} | |||
| Regards,<br /> | |||
| The {% escaped_site_name %} Team | |||
| {% endblock %} | |||