emails: Create wider marketing email base template.

For our marketing emails, we want a width that's more appropriate for
newsletter context, vs. the narrow emails we use for transactional
content.

I haven't figured out a cleaner way to do this than duplicating most
of email_base_default.source.html. But it's not a big deal to
duplicate, since we've been changing that base template only about
once a year.
This commit is contained in:
Tim Abbott 2021-08-01 21:11:36 -07:00
parent 65557c458d
commit d439a2a53e
4 changed files with 62 additions and 2 deletions

View File

@ -59,11 +59,12 @@ def inline_template(template_source_name: str) -> None:
# template, since we'll end up with 2 copipes of those tags. # template, since we'll end up with 2 copipes of those tags.
# Thus, we strip this stuff out if the template extends # Thus, we strip this stuff out if the template extends
# another template. # another template.
if template_name not in ["email_base_default", "macros"]: if template_name not in ["email_base_default", "email_base_marketing", "macros"]:
output = strip_unnecesary_tags(output) output = strip_unnecesary_tags(output)
if ( if (
"zerver/emails/compiled/email_base_default.html" in output "zerver/emails/compiled/email_base_default.html" in output
or "zerver/emails/compiled/email_base_marketing.html" in output
or "zerver/emails/email_base_messages.html" in output or "zerver/emails/email_base_messages.html" in output
): ):
assert output.count("<html>") == 0 assert output.count("<html>") == 0

View File

@ -1,4 +1,4 @@
{% extends "zerver/emails/compiled/email_base_default.html" %} {% extends "zerver/emails/compiled/email_base_marketing.html" %}
{% block illustration %} {% block illustration %}
<img src="{{ email_images_base_uri }}/email_logo.png" alt=""/> <img src="{{ email_images_base_uri }}/email_logo.png" alt=""/>

View File

@ -46,6 +46,10 @@ table td {
padding: 10px; padding: 10px;
} }
.container.wide-container {
max-width: 700px;
}
.content { .content {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
@ -54,6 +58,10 @@ table td {
padding: 10px; padding: 10px;
} }
.content.wide-content {
max-width: 780px;
}
.main { .main {
background-color: #fff; background-color: #fff;
border-radius: 3px; border-radius: 3px;

View File

@ -0,0 +1,51 @@
{% import 'zerver/emails/compiled/macros.html' as macros %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="UTF-8" />
<title>Zulip</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td>&nbsp;</td>
<td class="container wide-container">
<div class="content wide-content">
<a href="#" class="illustration">
{% block illustration %}{% endblock %}
</a>
<span class="preheader">
{% block preheader %}{% endblock %}
</span>
<table class="main">
<tr>
<td class="wrapper">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
{% block content %}{% endblock %}
</td>
</tr>
</table>
<img src="{{ email_images_base_uri }}/footer.png" alt="{{ _('Swimming fish') }}"/>
</td>
</tr>
</table>
<div class="footer">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
<span class="apple-link">{{physical_address}}</span>
{% block manage_preferences %}{% endblock %}
</td>
</tr>
</table>
</div>
</div>
</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>