Nicer html report

hc/lib/emails.py

@@ -1,26 +1,28 @@
+from django.conf import settings
 from djmail.template_mail import InlineCSSTemplateMail
 
 
-def login(to, ctx):
+def send(name, to, ctx):
-    o = InlineCSSTemplateMail("login")
+    o = InlineCSSTemplateMail(name)
+    ctx["SITE_ROOT"] = settings.SITE_ROOT
     o.send(to, ctx)
 
 
+def login(to, ctx):
+    send("login", to, ctx)
+
+
 def set_password(to, ctx):
-    o = InlineCSSTemplateMail("set-password")
+    send("set-password", to, ctx)
-    o.send(to, ctx)
 
 
 def alert(to, ctx):
-    o = InlineCSSTemplateMail("alert")
+    send("alert", to, ctx)
-    o.send(to, ctx)
 
 
 def verify_email(to, ctx):
-    o = InlineCSSTemplateMail("verify-email")
+    send("verify-email", to, ctx)
-    o.send(to, ctx)
 
 
 def report(to, ctx):
-    o = InlineCSSTemplateMail("report")
+    send("report", to, ctx)
-    o.send(to, ctx)

templates/emails/base.html

@@ -79,7 +79,10 @@
       text-align: center;
     }
     .email-footer p {
-      color: #AEAEAE;
+      color: #74787E;
+    }
+    .email-footer a {
+      color: #74787E;
     }
     .body-action {
       width: 100%;
@@ -181,7 +184,7 @@
           <!-- Logo -->
           <tr>
             <td class="email-masthead">
-              <a class="email-masthead_name">Healthchecks</a>
+              <img src="{{ SITE_ROOT }}/img/logo-full.png" alt="" />
             </td>
           </tr>
           <!-- Email Body -->
@@ -202,7 +205,9 @@
               <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
                 <tr>
                   <td class="content-cell">
-                    <p class="sub center">&copy; 2016 healthchecks<span>.</span>io. All rights reserved.</p>
+                    <p class="sub center">&copy; 2016 healthchecks<span>.</span>io. All rights reserved.
+                    {% block unsub %}{% endblock %}
+                    </p>
                   </td>
                 </tr>
               </table>

templates/emails/report-body-html.html

@@ -1,13 +1,23 @@
+{% extends "emails/base.html" %}
+
 {% load humanize hc_extras %}
 
+{% block content %}
 <style>
-    th {
+    .checks {
-        text-align: left;
+        margin: 30px 0;
-        padding: 8px;
+        width: 100%;
+        font-size: 16px;
     }
 
-    td {
+    .checks th {
-        border-top: 1px solid #ddd;
+        text-align: left;
+        padding: 8px;
+        font-size: 12px;
+    }
+
+    .checks td {
+        border-top: 1px solid #EDEFF2;
         padding: 8px;
     }
 
@@ -25,16 +35,20 @@
 
 
     .unnamed {
-        color: #888;
+        color: #74787E;
         font-style: italic;
     }
 
+    .view-log {
+        font-size: 13px;
+    }
+
 </style>
 
-<p>Hello,</p>
+<h1>Hello,</h1>
 <p>This is a monthly report sent by <a href="https://healthchecks.io">healthchecks.io</a>.</p>
 
-<table>
+<table class="checks" cellpadding="0" cellspacing="0">
     <tr>
         <th></th>
         <th>Name</th>
@@ -76,7 +90,7 @@
             {% endif %}
         </td>
         <td>
-            <a href="{{ check.log_url }}">View Log</a>
+            <a class="view-log" href="{{ check.log_url }}">View Log</a>
         </td>
     </tr>
     {% endfor %}
@@ -87,12 +101,11 @@ Do you have more cron jobs,
 not yet on this list, that would benefit from monitoring?
 Get the ball rolling by adding one more!</p>
 
-<p>
+<p>Cheers,<br>The Healthchecks<span>.</span>io</a> Team</p>
-    --<br />
-    Regards,<br />
-    healthchecks.io
-</p>
 
-<p>
+{% endblock %}
-    <a href="{{ unsub_link }}">Unsubscribe from future monthly reports</a>
+
-</p>
+{% block unsub %}
+<br />
+<a href="{{ unsub_link }}">Unsubscribe from future monthly reports</a>
+{% endblock %}