Tweak HTML markup in alert emails for Gmail

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 />
 

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">
-                            <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>
                     </td>
                 </tr>
             </table>

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 == "new" %}
-                        {% if check.get_status == "grace" %}
+                        <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>
-                            LATE
+                    {% elif check.get_status == "paused" %}
-                        {% else %}
+                        <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>
-                            {{ check.get_status|upper }}
+                    {% elif check.get_status == "grace" %}
-                        {% endif %}
+                        <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>
-                    </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 %}