From eaba39d99bfdab25c2ca01fb8f998d5f4b2e6fdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Tue, 27 Nov 2018 18:37:53 +0200
Subject: [PATCH] Tweak HTML markup in alert emails for Gmail

---
 templates/emails/alert-body-html.html |  2 +-
 templates/emails/base.html            | 49 +--------------------------
 templates/emails/summary-html.html    | 30 +++++++++-------
 3 files changed, 19 insertions(+), 62 deletions(-)

diff --git a/templates/emails/alert-body-html.html b/templates/emails/alert-body-html.html
index ce5b0a51..1066880c 100644
--- a/templates/emails/alert-body-html.html
+++ b/templates/emails/alert-body-html.html
@@ -6,7 +6,7 @@ Hello,<br />
 
 This is a notification sent by <a href="{% site_root %}">{% site_name %}</a>.
 <br />
-The check <strong>{{ check.name_then_code }}</strong>
+The check <strong>{{ check.name_then_code|mangle_link }}</strong>
 has gone <strong>{{ check.status|upper }}</strong>.
 <br /><br />
 
diff --git a/templates/emails/base.html b/templates/emails/base.html
index 8d15e929..abe5f484 100644
--- a/templates/emails/base.html
+++ b/templates/emails/base.html
@@ -89,51 +89,6 @@
 
     }
 
-    .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>
@@ -150,9 +105,7 @@
             <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" class="wrapper">
                 <tr>
                     <td align="center" valign="top" style="padding: 15px 0;" class="logo">
-                        <a href="{% site_root %}" target="_blank">
-                            <img alt="Logo" src="{% site_root %}/static/img/logo-full@2x.png" width="200" height="50" style="display: block; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-size: 16px;" border="0">
-                        </a>
+                        <img alt="Logo" src="{% site_root %}/static/img/logo-full@2x.png" width="200" height="50" style="display: block; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-size: 16px;" border="0">
                     </td>
                 </tr>
             </table>
diff --git a/templates/emails/summary-html.html b/templates/emails/summary-html.html
index 36928703..205aade6 100644
--- a/templates/emails/summary-html.html
+++ b/templates/emails/summary-html.html
@@ -6,29 +6,33 @@
         <td colspan="2" style="font-weight: bold; padding: 32px 8px 8px 8px; color: #333;">
             {{ group.grouper.profile|mangle_link }}
         </td>
-        <td class="mobile-hide" style="padding: 32px 8px 8px 8px; margin: 0; font-size: 12px; color: #9BA2AB; font-family: Helvetica, Arial, sans-serif;">Last Ping</td>
+        <td style="padding: 32px 8px 8px 8px; margin: 0; font-size: 12px; color: #9BA2AB; font-family: Helvetica, Arial, sans-serif;">Last Ping</td>
     </tr>
     {% for check in group.list|sortchecks:sort %}
     <tr>
         <td style="border-top: 1px solid #EDEFF2; padding: 16px 8px;">
             <table cellpadding="0" cellspacing="0">
                 <tr>
-                    <td class="{{ check.get_status }}">
-                        {% if check.get_status == "grace" %}
-                            LATE
-                        {% else %}
-                            {{ check.get_status|upper }}
-                        {% endif %}
-                    </td>
+                    {% 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 %}
                 </tr>
             </table>
         </td>
         <td style="border-top: 1px solid #EDEFF2; padding: 16px 8px; font-family: Helvetica, Arial, sans-serif;">
             {% if check.name %}
                 {% if check.name|length > 20 %}
-                    <small>{{ check.name }}</small>
+                    <small>{{ check.name|mangle_link }}</small>
                 {% else %}
-                    {{ check.name }}
+                    {{ check.name|mangle_link }}
                 {% endif %}
             {% else %}
                 <span style="color: #74787E; font-style: italic;">unnamed</span>
@@ -42,7 +46,7 @@
                         <table cellpadding="0" cellspacing="0">
                             <tr>
                             <td style="background: #eee; font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 10px; color: #555; padding: 4px; margin: 0; border-radius: 2px;">
-                                {{ tag }}
+                                {{ tag|mangle_link }}
                             </td>
                             </tr>
                         </table>
@@ -52,14 +56,14 @@
                 </table>
             {% endif %}
         </td>
-        <td class="mobile-hide" style="border-top: 1px solid #EDEFF2; padding: 16px 8px; font-family: Helvetica, Arial, sans-serif;">
+        <td style="border-top: 1px solid #EDEFF2; padding: 16px 8px; font-family: Helvetica, Arial, sans-serif;">
             {% if check.last_ping %}
                 {{ check.last_ping|naturaltime }}
             {% else %}
                 Never
             {% endif %}
             <br />
-            <a class="view-log" href="{{ check.details_url }}">Details…</a>
+            <a href="{{ check.details_url }}" target="_blank">Details…</a>
         </td>
     </tr>
     {% endfor %}