email template from Litmus. CSS already inlined, so dropping premailer dependency.

This commit is contained in:
Pēteris Caune 2017-01-15 13:10:08 +02:00
parent b8aabd711c
commit 8d956b3365
12 changed files with 312 additions and 358 deletions

View File

@ -35,7 +35,8 @@ class Profile(models.Model):
path = reverse("hc-check-token", args=[self.user.username, token]) path = reverse("hc-check-token", args=[self.user.username, token])
ctx = { ctx = {
"login_link": settings.SITE_ROOT + path, "button_text": "Log In",
"button_url": settings.SITE_ROOT + path,
"inviting_profile": inviting_profile "inviting_profile": inviting_profile
} }
emails.login(self.user.email, ctx) emails.login(self.user.email, ctx)
@ -46,7 +47,10 @@ class Profile(models.Model):
self.save() self.save()
path = reverse("hc-set-password", args=[token]) path = reverse("hc-set-password", args=[token])
ctx = {"set_password_link": settings.SITE_ROOT + path} ctx = {
"button_text": "Set Password",
"button_url": settings.SITE_ROOT + path
}
emails.set_password(self.user.email, ctx) emails.set_password(self.user.email, ctx)
def set_api_key(self): def set_api_key(self):

View File

@ -1,5 +1,6 @@
from django import template from django import template
from django.conf import settings from django.conf import settings
from django.utils.safestring import mark_safe
from hc.lib.date import format_duration from hc.lib.date import format_duration
@ -21,6 +22,11 @@ def site_name():
return settings.SITE_NAME return settings.SITE_NAME
@register.simple_tag
def escaped_site_name():
return mark_safe(settings.SITE_NAME.replace(".", "<span>.</span>"))
@register.simple_tag @register.simple_tag
def site_root(): def site_root():
return settings.SITE_ROOT return settings.SITE_ROOT

View File

@ -1,9 +1,9 @@
from django.conf import settings from django.conf import settings
from djmail.template_mail import InlineCSSTemplateMail from djmail.template_mail import TemplateMail
def send(name, to, ctx): def send(name, to, ctx):
o = InlineCSSTemplateMail(name) o = TemplateMail(name)
ctx["SITE_ROOT"] = settings.SITE_ROOT ctx["SITE_ROOT"] = settings.SITE_ROOT
o.send(to, ctx) o.send(to, ctx)

View File

@ -4,7 +4,6 @@ django-ses-backend==0.1.1
Django==1.10.1 Django==1.10.1
django_compressor==2.1 django_compressor==2.1
djmail==0.11.0 djmail==0.11.0
premailer==2.9.6
psycopg2==2.6.1 psycopg2==2.6.1
pytz==2016.7 pytz==2016.7
requests==2.9.1 requests==2.9.1

View File

@ -2,24 +2,26 @@
{% load hc_extras %} {% load hc_extras %}
{% block content %} {% block content %}
<h1>Hello,</h1> Hello,<br />
<p>
This is a notification sent by <a href="{% site_root %}">{% site_name %}</a>.
<br />
The check <strong>{{ check.name_then_code }}</strong>
has gone <strong>{{ check.status|upper }}</strong>.
</p>
<p>Here is a summary of all your checks:</p> This is a notification sent by <a href="{% site_root %}">{% site_name %}</a>.
<br />
The check <strong>{{ check.name_then_code }}</strong>
has gone <strong>{{ check.status|upper }}</strong>.
<br /><br />
Here is a summary of all your checks:
<br />
{% include "emails/summary-html.html" %} {% include "emails/summary-html.html" %}
{% if show_upgrade_note %} {% if show_upgrade_note %}
<p><strong>P.S.</strong> <strong>P.S.</strong>
Find this service useful? Support it by upgrading to Find this service useful? Support it by upgrading to
a <a href="https://healthchecks.io/pricing/">premium account</a>! a <a href="https://healthchecks.io/pricing/">premium account</a>!
</p> <br /><br />
{% endif %} {% endif %}
<p>Thanks,<br>The Healthchecks<span>.</span>io Team</p> Thanks,<br>
The {% escaped_site_name %} Team
{% endblock %} {% endblock %}

View File

@ -1,222 +1,208 @@
{% load hc_extras %} <!DOCTYPE html>{% load humanize hc_extras %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>{% block title %}{% endblock %}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta charset="utf-8">
<title>{% block title %}{% endblock %}</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" rel="stylesheet" media="all"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
/* Base ------------------------------ */ <style type="text/css">
*:not(br):not(tr):not(html) { /* CLIENT-SPECIFIC STYLES */
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
-webkit-box-sizing: border-box; table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} /* Remove spacing between tables in Outlook 2007 and up */
box-sizing: border-box; img{-ms-interpolation-mode: bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
}
body { /* RESET STYLES */
width: 100% !important; img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
height: 100%; table{border-collapse: collapse !important;}
margin: 0; body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}
line-height: 1.4;
background-color: #F2F4F6; /* iOS BLUE LINKS */
color: #74787E; a[x-apple-data-detectors] {
-webkit-text-size-adjust: none; color: inherit !important;
} text-decoration: none !important;
a { font-size: inherit !important;
color: #3869D4; font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
} }
a.neutral { /* MOBILE STYLES */
color: #74787E; @media screen and (max-width: 525px) {
/* ALLOWS FOR FLUID TABLES */
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
/* ADJUSTS LAYOUT OF LOGO IMAGE */
.logo img {
margin: 0 auto !important;
}
/* 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;
}
} }
/* Layout ------------------------------ */ /* ANDROID CENTER FIX */
.email-wrapper { div[style*="margin: 16px 0;"] { margin: 0 !important; }
width: 100%; </style>
margin: 0;
padding: 0;
background-color: #F2F4F6;
}
.email-content {
width: 100%;
margin: 0;
padding: 0;
}
/* 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;
}
/* 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;
}
/* 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;
}
/* 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;
}
/*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>
</head> </head>
<body> <body style="margin: 0 !important; padding: 0 !important;">
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0"> <table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr> <tr>
<td align="center"> <td bgcolor="#F2F4F6" align="center">
<table class="email-content" width="100%" cellpadding="0" cellspacing="0"> <!--[if (gte mso 9)|(IE)]>
<!-- Logo --> <table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr> <tr>
<td class="email-masthead"> <td align="center" valign="top" width="500">
<img src="{% site_root %}/static/img/logo-full.png" alt="" /> <![endif]-->
</td> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 500px;" class="wrapper">
</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> <tr>
<td class="content-cell"> <td align="center" valign="top" style="padding: 15px 0;" class="logo">
{% block content %}{% endblock %} <a href="https://healthchecks.io" target="_blank">
</td> <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> </tr>
</table> </table>
<!--[if (gte mso 9)|(IE)]>
</td> </td>
</tr> </tr>
<tr> </table>
<td> <![endif]-->
<table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0"> </td>
<tr>
<td class="content-cell">
<p class="sub center">&copy; 2017 healthchecks<span>.</span>io. All rights reserved.
{% block unsub %}{% endblock %}
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr> </tr>
</table> <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>
<!-- 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>
<!--[if (gte mso 9)|(IE)]>
</td>
</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 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>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body> </body>
</html> </html>

View File

@ -2,50 +2,32 @@
{% load hc_extras %} {% load hc_extras %}
{% block content %} {% block content %}
<h1>Hello,</h1> Hello,
<br />
{% if inviting_profile %} {% if inviting_profile %}
<p><strong>{{ inviting_profile }}</strong> invites you to their <strong>{{ inviting_profile }}</strong> invites you to their
<a href="{% site_root %}">{% site_name %}</a> account.</p> <a href="{% site_root %}">{% escaped_site_name %}</a> account.
<br /><br />
<p>You will be able to manage their You will be able to manage their
existing monitoring checks and set up new ones. If you already have your existing monitoring checks and set up new ones. If you already have your
own account on healthchecks<span>.</span>io, you will be able to switch own account on {% site_name %}, you will be able to switch
between the two between the two accounts.
accounts.</p> <br /><br />
{% endif %} {% endif %}
<p>To log into <a href="{% site_root %}">{% site_name %}</a>, please press the button below:</p> To log into <a href="{% site_root %}">{% escaped_site_name %}</a>,
please press the button below:
<!-- Action --> {% endblock %}
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center"> {% block content_more %}
<div> Thanks,<br>
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ login_link }}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t"> The {% escaped_site_name %} Team
<v:fill type="tile" color="#22BC66" /> <br /><br />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:15px;">Confirm your account</center> <strong>P.S.</strong> Need help getting started? Check out our
</v:roundrect><![endif]--> <a href="{% site_root %}/docs/">help documentation</a>.
<a href="{{ login_link }}" class="button button--green">Log In</a> Or, just reply to this email with any questions or issues you have.
</div>
</td>
</tr>
</table>
<p>Thanks,<br>The Healthchecks<span>.</span>io</a> Team</p>
<p>
<strong>P.S.</strong> Need help getting started? Check out our
<a href="{% site_root %}/docs/">help documentation</a>.
Or, just reply to this email with any questions or issues you have.
</p>
<!-- Sub copy -->
<table class="body-sub">
<tr>
<td>
<p class="sub">If youre having trouble clicking the log in button, copy and paste the URL below into your web browser.
</p>
<p class="sub"><a href="{{ login_link }}">{{ login_link }}</a></p>
</td>
</tr>
</table>
{% endblock %} {% endblock %}

View File

@ -8,7 +8,7 @@ ones. If you already have your own account on {% site_name %}, you will
be able to switch between the two accounts.{% endif %} be able to switch between the two accounts.{% endif %}
To log into {% site_name %}, please open the link below: To log into {% site_name %}, please open the link below:
{{ login_link }} {{ button_url }}
Thanks, Thanks,
The {% site_name %} Team The {% site_name %} Team

View File

@ -2,22 +2,26 @@
{% load humanize hc_extras %} {% load humanize hc_extras %}
{% block content %} {% block content %}
Hello,<br />
This is a monthly report sent by <a href="{% site_root %}">{% site_name %}</a>.
<h1>Hello,</h1> <br />
<p>This is a monthly report sent by <a href="{% site_root %}">{% site_name %}</a>.</p>
{% include "emails/summary-html.html" %} {% include "emails/summary-html.html" %}
<p><strong>Just one more thing to check:</strong> <strong>Just one more thing to check:</strong>
Do you have more cron jobs, Do you have more cron jobs,
not yet on this list, that would benefit from monitoring? not yet on this list, that would benefit from monitoring?
Get the ball rolling by adding one more!</p> Get the ball rolling by adding one more!
<br /><br />
<p>Cheers,<br>The Healthchecks<span>.</span>io Team</p> Cheers,<br>
The {% escaped_site_name %} Team
{% endblock %} {% endblock %}
{% block unsub %} {% block unsub %}
<br /> <br>
<a href="{{ unsub_link }}">Unsubscribe from future monthly reports</a> <a href="{{ unsub_link }}" target="_blank" style="color: #666666; text-decoration: underline;">
Unsubscribe from Monthly Reports
</a>
{% endblock %} {% endblock %}

View File

@ -1,11 +1,13 @@
{% extends "emails/base.html" %}
{% load hc_extras %} {% load hc_extras %}
<p>Hello,</p>
<p>Here's a link to set a password for your account on {% site_name %}:</p> {% block content %}
<p><a href="{{ set_password_link }}">{{ set_password_link }}</a></p> Hello,<br />
To set up a password for your account on {% site_name %}, please press the
button below:</p>
{% endblock %}
<p> {% block content_more %}
--<br /> Regards,<br />
Regards,<br /> The {% escaped_site_name %} Team
{% site_name %} {% endblock %}
</p>

View File

@ -3,7 +3,7 @@ Hello,
Here's a link to set a password for your account on {% site_name %}: Here's a link to set a password for your account on {% site_name %}:
{{ set_password_link }} {{ button_url }}
-- --

View File

@ -1,73 +1,31 @@
{% load humanize hc_extras %} {% load humanize hc_extras %}
<br />
<style> <table style="margin: 0; width: 100%; font-size: 16px;" cellpadding="0" cellspacing="0">
.checks {
margin: 30px 0;
width: 100%;
font-size: 16px;
}
.checks th {
text-align: left;
padding: 8px;
font-size: 12px;
color: #9BA2AB;
}
.checks td {
border-top: 1px solid #EDEFF2;
padding: 16px 8px;
}
.badge {
font-size: 10px;
color: white;
padding: 4px;
font-family: sans;
}
.new { background: #AAA; }
.up { background: #5cb85c; }
.grace { background: #f0ad4e; }
.down { background: #d9534f; }
.unnamed {
color: #74787E;
font-style: italic;
}
.tag {
font-size: 12px;
background-color: #eee;
padding: 2px 4px;
color: #555;
}
</style>
<table class="checks" cellpadding="0" cellspacing="0">
<tr> <tr>
<th></th> <td style="padding: 8px; margin: 0; font-size: 12px; color: #9BA2AB; font-family: Helvetica, Arial, sans-serif;"></td>
<th>Name</th> <td style="padding: 8px; margin: 0; font-size: 12px; color: #9BA2AB; font-family: Helvetica, Arial, sans-serif;">Name</td>
<th>Last Ping</th> <td class="mobile-hide" style="padding: 8px; margin: 0; font-size: 12px; color: #9BA2AB; font-family: Helvetica, Arial, sans-serif;">Last Ping</td>
</tr> </tr>
{% for check in checks %} {% for check in checks %}
<tr> <tr>
<td> <td style="border-top: 1px solid #EDEFF2; padding: 16px 8px;">
{% if check.get_status == "new" %} <table cellpadding="0" cellspacing="0">
<span class="badge new">NEW</span> <tr>
{% elif check.get_status == "paused" %} {% if check.get_status == "new" %}
<span class="badge new">PAUSED</span> <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.in_grace_period %} {% elif check.get_status == "paused" %}
<span class="badge grace">LATE</span> <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 == "up" %} {% elif check.in_grace_period %}
<span class="badge up">UP</span> <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 == "down" %} {% elif check.get_status == "up" %}
<span class="badge down">DOWN</span> <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>
{% endif %} {% 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>
<td> <td style="border-top: 1px solid #EDEFF2; padding: 16px 8px; font-family: Helvetica, Arial, sans-serif;">
{% if check.name %} {% if check.name %}
{% if check.name|length > 20 %} {% if check.name|length > 20 %}
<small>{{ check.name }}</small> <small>{{ check.name }}</small>
@ -75,26 +33,37 @@
{{ check.name }} {{ check.name }}
{% endif %} {% endif %}
{% else %} {% else %}
<span class="unnamed">unnamed</span> <span style="color: #74787E; font-style: italic;">unnamed</span>
{% endif %} {% endif %}
{% if check.tags %} {% if check.tags %}
<br /> <br />
{% for tag in check.tags_list %} <table cellpadding="0" cellspacing="0">
<span class="tag">{{ tag }}</span> <tr>
{% endfor %} {% for tag in check.tags_list %}
<td style="padding-right: 4px">
<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 }}
</td>
</tr>
</table>
</td>
{% endfor %}
</tr>
</table>
{% endif %} {% endif %}
</td> </td>
<td> <td class="mobile-hide" style="border-top: 1px solid #EDEFF2; padding: 16px 8px; font-family: Helvetica, Arial, sans-serif;">
{% if check.last_ping %} {% if check.last_ping %}
{{ check.last_ping|naturaltime }} {{ check.last_ping|naturaltime }}
<br />
<a class="view-log" href="{{ check.log_url }}">Show Log…</a>
{% else %} {% else %}
Never Never
{% endif %} {% endif %}
</td>
<td>
<a class="view-log" href="{{ check.log_url }}">Log</a>
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
</table> </table>
<br />