Tweak HTML and CSS in alert emails.

README.md

@@ -42,7 +42,7 @@ in development environment.
 * prepare virtual environment
   (with virtualenv you get pip, we'll use it soon to install requirements):
 
-        $ virtualenv --python=python3 hc-venv
+        $ python3 -m venv hc-venv
         $ source hc-venv/bin/activate
 
 * check out project code:

hc/front/templatetags/hc_extras.py

@@ -20,11 +20,6 @@ def site_name():
     return settings.SITE_NAME
 
 
-@register.simple_tag
-def escaped_site_name():
-    return mark_safe(settings.SITE_NAME.replace(".", "<span>.</span>"))
-
-
 @register.filter
 def mangle_link(s):
     return mark_safe(escape(s).replace(".", "<span>.</span>"))

templates/emails/alert-body-html.html

@@ -16,7 +16,7 @@ Here is a summary of your checks:
 {% include "emails/summary-html.html" %}
 
 Thanks,<br>
-The {% escaped_site_name %} Team
+The {% site_name %} Team
 
 {% endblock %}
 

templates/emails/alert-subject.html

@@ -1,2 +1,2 @@
-{{ check.name_then_code }} is {{ check.status }}
+{{ check.status|upper }} | {{ check.name_then_code }}
 

templates/emails/base.html

@@ -89,6 +89,51 @@
 
     }
 
+    .new, .paused {
+        background: #AAA;
+        font-family: Helvetica, Arial, sans-serif;
+        font-weight: bold;
+        font-size: 10px;
+        line-height: 10px;
+        color: white;
+        padding: 6px;
+        margin: 0;
+        border-radius: 3px;
+    }
+
+    .grace {
+        background: #f0ad4e;
+        font-family: Helvetica, Arial, sans-serif;
+        font-weight: bold;
+        font-size: 10px;
+        line-height: 10px;
+        color: white;
+        padding: 6px;
+        border-radius: 3px;
+    }
+
+    .up {
+        background: #5cb85c;
+        font-family: Helvetica, Arial, sans-serif;
+        font-weight: bold;
+        font-size: 10px;
+        line-height: 10px;
+        color: white;
+        padding: 6px;
+        border-radius: 3px;
+    }
+
+    .down {
+        background: #d9534f;
+        font-family: Helvetica, Arial, sans-serif;
+        font-weight: bold;
+        font-size: 10px;
+        line-height: 10px;
+        color: white;
+        padding: 6px;
+        border-radius: 3px;
+    }
+
     /* ANDROID CENTER FIX */
     div[style*="margin: 16px 0;"] { margin: 0 !important; }
 </style>
@@ -191,7 +236,7 @@
             <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="max-width: 600px;" class="responsive-table">
                 <tr>
                     <td align="center" style="font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;">
-                        © 2018 {% escaped_site_name %}. All rights reserved.
+                        © 2018 {% site_name %}. All rights reserved.
                         {% block unsub %}{% endblock %}
                     </td>
                 </tr>

templates/emails/change-email-body-html.html

@@ -9,5 +9,5 @@ the button below:</p>
 
 {% block content_more %}
 Regards,<br />
-The {% escaped_site_name %} Team
+The {% site_name %} Team
 {% endblock %}

templates/emails/invoice-body-html.html

@@ -11,5 +11,5 @@ Here's your invoice from {% site_name %} for
 
 {% block content_more %}
 Thanks,<br />
-The {% escaped_site_name %} Team
+The {% site_name %} Team
 {% endblock %}

templates/emails/login-body-html.html

@@ -7,7 +7,7 @@ Hello,
 
 {% if inviting_profile %}
     <strong>{{ inviting_profile }}</strong> invites you to their
-    <a href="{% site_root %}">{% escaped_site_name %}</a> account.
+    <a href="{% site_root %}">{% site_name %}</a> account.
     <br /><br />
 
     You will be able to manage their
@@ -17,14 +17,14 @@ Hello,
     <br /><br />
 {% endif %}
 
-To log into <a href="{% site_root %}">{% escaped_site_name %}</a>,
+To log into <a href="{% site_root %}">{% site_name %}</a>,
 please press the button below:
 {% endblock %}
 
 
 {% block content_more %}
 Thanks,<br>
-The {% escaped_site_name %} Team
+The {% site_name %} Team
 <br /><br />
 
 <strong>P.S.</strong> Need help getting started? Check out our

templates/emails/report-body-html.html

@@ -35,7 +35,7 @@ Get the ball rolling by adding one more!
 <br /><br />
 
 Cheers,<br>
-The {% escaped_site_name %} Team
+The {% site_name %} Team
 {% endblock %}
 
 

templates/emails/set-password-body-html.html

@@ -9,5 +9,5 @@ button below:</p>
 
 {% block content_more %}
 Regards,<br />
-The {% escaped_site_name %} Team
+The {% site_name %} Team
 {% endblock %}

templates/emails/summary-html.html

@@ -13,17 +13,13 @@
         <td style="border-top: 1px solid #EDEFF2; padding: 16px 8px;">
             <table cellpadding="0" cellspacing="0">
                 <tr>
-                {% if check.get_status == "new" %}
-                    <td style="background: #AAA; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 10px; line-height: 10px; color: white; padding: 6px; margin: 0; border-radius: 3px;">NEW</td>
-                {% elif check.get_status == "paused" %}
-                    <td style="background: #AAA; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 10px; line-height: 10px; color: white; padding: 6px; border-radius: 3px;">PAUSED</td>
-                {% elif check.get_status == "grace" %}
-                    <td style="background: #f0ad4e; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 10px; line-height: 10px; color: white; padding: 6px; border-radius: 3px;">LATE</td>
-                {% elif check.get_status == "up" %}
-                    <td style="background: #5cb85c; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 10px; line-height: 10px; color: white; padding: 6px; border-radius: 3px;">UP</td>
-                {% elif check.get_status == "down" %}
-                    <td style="background: #d9534f; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 10px; line-height: 10px; color: white; padding: 6px; border-radius: 3px;">DOWN</td>
-                {% endif %}
+                    <td class="{{ check.get_status }}">
+                        {% if check.get_status == "grace" %}
+                            LATE
+                        {% else %}
+                            {{ check.get_status|upper }}
+                        {% endif %}
+                    </td>
                 </tr>
             </table>
         </td>
@@ -62,6 +58,8 @@
             {% else %}
                 Never
             {% endif %}
+            <br />
+            <a class="view-log" href="{{ check.details_url }}">Details…</a>
         </td>
     </tr>
     {% endfor %}