Update email templates to avoid using bootstrap. Should improve speed, and also cross-email-client compatability

This commit is contained in:
David Taylor
2017-05-18 15:27:50 +01:00
parent 4b87b0a196
commit f3c020b613
5 changed files with 141 additions and 96 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1,35 +1,64 @@
@import "bootstrap-compass"; $button_color: #357ebf;
// Core variables and mixins
@import "bootstrap-variables";
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset and dependencies body{
@import "bootstrap/normalize"; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@import "bootstrap/print"; margin: 0px;
@import "bootstrap/glyphicons";
// Core CSS }
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
.main-table{
width: 100%;
border-collapse: collapse;
}
.client-header { .client-header {
background-image: url("https://www.nottinghamtec.co.uk/imgs/wof2014-1.jpg"); background-image: url("https://www.nottinghamtec.co.uk/imgs/wof2014-1.jpg");
background-color: #222; background-color: #222;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover;
width: 100%;
margin-bottom: 2em; margin-bottom: 28px;
.logos{
width: 100%;
max-width: 640px;
}
img { img {
height: 8em; height: 110px;
margin: 2em;
} }
} }
.content-container{
width: 100%;
.content {
width: 100%;
max-width: 600px;
padding: 10px;
text-align: left;
.button-container{
width: 100%;
.button {
padding: 6px 12px;
background-color: $button_color;
border-radius: 4px;
a {
color: #fff;
text-decoration: none;
}
}
}
}
}

View File

@@ -1,32 +1,41 @@
{% extends 'base_client_email.html' %} {% extends 'base_client_email.html' %}
{% block content %} {% block content %}
<div class="col-sm-12">
<p>Hi {{ to_name|default:"there" }},</p> <p>Hi {{ to_name|default:"there" }},</p>
<p>{{ request.user.get_full_name }} has requested that you authorise N{{ object.pk|stringformat:"05d" }} <p><b>{{ request.user.get_full_name }}</b> has requested that you authorise <b>N{{ object.pk|stringformat:"05d" }}
| {{ object.name }}{% if not to_name %} on behalf of {{ object.person.name }}{% endif %}.</p> | {{ object.name }}</b>{% if not to_name %} on behalf of <b>{{ object.person.name }}</b>{% endif %}.</p>
<p> <p>
Please find the link below to complete the event booking process. Please find the link below to complete the event booking process.
{% if object.event.organisation and object.event.organisation.union_account %}{# internal #} {% if object.event.organisation and object.event.organisation.union_account %}{# internal #}
Remember that only Presidents or Treasurers are allowed to sign off payments. You may need to forward Remember that only Presidents or Treasurers are allowed to sign off payments. You may need to forward
this this
email on. email on.
{% endif %} {% endif %}
</p> </p>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 text-center">
<a class="btn btn-primary"
href="{{ request.scheme }}://{{ request.get_host }}{% url 'event_authorise' object.pk hmac %}">
Complete Authorisation Form
</a>
</div>
</div>
<p>Please note you event will not be booked until you complete this form.</p> <table class="button-container" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" align="center">
<a href="{{ request.scheme }}://{{ request.get_host }}{% url 'event_authorise' object.pk hmac %}">
Complete Authorisation Form
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p>Your event will not be booked until you complete this form.</p>
<p>TEC PA &amp; Lighting<br/>
<p>TEC PA & Lighting</p>
</div>
{% endblock %} {% endblock %}

View File

@@ -1,23 +1,21 @@
{% extends 'base_client_email.html' %} {% extends 'base_client_email.html' %}
{% block content %} {% block content %}
<div class="col-sm-12"> <p>Hi {{ to_name|default:"there" }},</p>
<p>Hi {{ to_name|default:"there" }},</p>
<p> <p>
Your event N{{ object.event.pk|stringformat:"05d" }} has been successfully authorised Your event <b>N{{ object.event.pk|stringformat:"05d" }}</b> has been successfully authorised
for {{ object.amount }} for <b>{{ object.amount }}</b>
by {{ object.name }} as of {{ object.last_edited_at }}. by <b>{{ object.name }}</b> as of <b>{{ object.last_edited_at }}</b>.
</p> </p>
<p> <p>
{% if object.event.organisation and object.event.organisation.union_account %}{# internal #} {% if object.event.organisation and object.event.organisation.union_account %}{# internal #}
Your event is now fully booked and payment will be processed by the finance department automatically. Your event is now fully booked and payment will be processed by the finance department automatically.
{% else %}{# external #} {% else %}{# external #}
Your event is now fully booked and our finance department will be contact to arrange payment. Your event is now fully booked and our finance department will be contact to arrange payment.
{% endif %} {% endif %}
</p> </p>
<p>TEC PA & Lighting</p> <p>TEC PA &amp; Lighting</p>
</div>
{% endblock %} {% endblock %}

View File

@@ -2,48 +2,57 @@
{% load raven %} {% load raven %}
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}"
xml:lang="{% firstof LANGUAGE_CODE 'en' %}"
lang="{% firstof LANGUAGE_CODE 'en' %}">
<head>
<meta name="viewport" content="initial-scale=1">
{% block css %} <head>
{% endblock %} <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
</head>
<script src="https://code.jquery.com/jquery-1.8.3.min.js" <body>
integrity="sha256-YcbK69I5IXQftf/mYD8WY0/KmEDCv1asggHpJk1trM8=" crossorigin="anonymous"></script>
<script src="https://cdn.ravenjs.com/1.3.0/jquery,native/raven.min.js"></script>
<script>Raven.config('{% sentry_public_dsn %}').install()</script>
{% block preload_js %}
{% endblock %}
{% block extra-head %}{% endblock %} <table class="main-table">
</head> <tr class="client-header">
<td align="center">
<body> <!--[if mso]>
<div class="row client-header"> <center>
<table class="container"> <table><tr><td width="640">
<![endif]-->
<table class="logos" cellpadding=20>
<tr>
<td align="left">
<img src="https://www.nottinghamtec.co.uk/imgs/tec_logo_white.png"/>
</td>
<td align="right">
<img src="https://www.nottinghamtec.co.uk/imgs/UoNSU.png"/>
</td>
</tr>
</table>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
</td>
</tr>
<tr> <tr>
<td> <td align="center" class="content-container">
<img src="https://www.nottinghamtec.co.uk/imgs/tec_logo_white.png"/> <!--[if mso]>
</td> <center>
<td class="text-right"> <table><tr><td width="600">
<img src="https://www.nottinghamtec.co.uk/imgs/UoNSU.png"/> <![endif]-->
<div class="content">
{% block content %}{% endblock %}
</div>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
</td> </td>
</tr> </tr>
</table> </table>
</div>
<div class="container">
<div id="content" class="row">
{% block content %}{% endblock %}
</div>
</div>
{% block js %} </body>
{% endblock %}
</body>
</html> </html>