Skip to content

Commit

Permalink
[#2059] Made mail templates responsive, added placeholders
Browse files Browse the repository at this point in the history
  • Loading branch information
@jiromaykin
jiromaykin committed Feb 13, 2024
1 parent 6a4a08e commit 87a4be7
Show file tree
Hide file tree
Showing 5 changed files with 56 additions and 44 deletions.
16 changes: 8 additions & 8 deletions src/open_inwoner/conf/parts/case_status_notification.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@
<h1>Nieuw:</h1>
</td>
</tr>
<tr>
<td class="td-mail td-mail__bg-info td__padding-all" colspan="3">
<tr class="tr--responsive">
<td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
<p><span class="text-color__small-gray-900">Aanvraag: </span></p>
<h2 class="heading-font">{{ type_description }}</h2>
</td>
<td class="td-mail td-mail__bg-info td__padding-all" colspan="3">
<td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
<p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
</td>
</tr>
Expand All @@ -32,7 +32,7 @@ <h2 class="heading-font">{{ type_description }}</h2>
<img src="/static/img/mail/info_info-blue.jpg" alt="">
</td>
<td class="td__padding-top td__padding-right td__padding-bottom">
<p class="text-color__info">De status is gewijzigd naar <span class="status_current"><strong><a href="{{ case_link }}" class="color--primary">{{ case_status }}</a></strong></span>.</p>
<p class="text-color__info">De status is gewijzigd naar <span class="status_current"><strong><a href="{{ case_link }}" class="text-color__info">{{ type_description }}</a></strong></span>.</p>
</td>
</tr>
</table>
Expand All @@ -44,7 +44,7 @@ <h2 class="heading-font">{{ type_description }}</h2>
<tr>
<td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
<p>U hoeft niets te doen. Zodra er weer een update beschikbaar is ontvangt u hier een melding over. U kunt wel inloggen om uw aanvraag te bekijken.</p>
<p><strong><a href="https://example.com/accounts/login/" class="color--primary">Log in</a><span class="color--primary"> &rarr;</span></strong></p>
<p><strong><a href="{{ login_page }}" class="color--primary">Log in</a><span class="color--primary"> &rarr;</span></strong></p>
</td>
</tr>
<tr>
Expand All @@ -67,9 +67,9 @@ <h2 class="heading-font">{{ type_description }}</h2>
</td>
</tr>
<tr>
<td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="https://example.com/contactformulier/" class="color--secondary">Ga naar onze contactpagina</a>
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="{{ contactpage }}" class="color--secondary">Ga naar onze contactpagina</a>
</td>
<td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="tel:+14050" class="color--secondary">Bel 14050</a></td>
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="tel:+14050" class="color--secondary">Bel 14050</a></td>
</tr>
<tr class="tr-mail border-top">
<td class="td-mail border-top td__padding-zero" colspan="6">
Expand All @@ -78,7 +78,7 @@ <h2 class="heading-font">{{ type_description }}</h2>
</tr>
<tr>
<td class="td-mail td__padding-all" colspan="6">
<p>Pas hier uw <a href="https://example.com/mijn-profiel/notificaties/" class="color--secondary">voorkeuren</a> aan voor de notificaties. </p>
<p>Pas hier uw <a href="{{ profile_notifications }}" class="color--secondary">voorkeuren</a> aan voor de notificaties. </p>
</td>
</tr>
</tbody>
Expand Down
16 changes: 8 additions & 8 deletions src/open_inwoner/conf/parts/case_status_notification_action_required.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@
<h1>Nieuw:</h1>
</td>
</tr>
<tr>
<td class="td-mail td-mail__bg-danger td__padding-all" colspan="3">
<tr class="tr--responsive">
<td class="td--responsive td-mail td-mail__bg-danger td__padding-all" colspan="3">
<p><span class="text-color__small-gray-900">Aanvraag: </span></p>
<h2 class="heading-font">{{ type_description }}</h2>
<h2 class="td--responsive heading-font">{{ type_description }}</h2>
</td>
<td class="td-mail td-mail__bg-danger td__padding-all" colspan="3">
<td class="td--responsive td-mail td-mail__bg-danger td__padding-all" colspan="3">
<p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
</td>
</tr>
Expand Down Expand Up @@ -68,10 +68,10 @@ <h2 class="heading-font">{{ type_description }}</h2>
<p><strong>Contact opnemen</strong></p>
</td>
</tr>
<tr>
<td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="https://example.com/contactformulier/" class="color--secondary">Ga naar onze contactpagina</a>
<tr class="tr--responsive">
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="{{ contactpage }}" class="color--secondary">Ga naar onze contactpagina</a>
</td>
<td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="tel:+14050" class="color--secondary">Bel 14050</a></td>
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="tel:+14050" class="color--secondary">Bel 14050</a></td>
</tr>
<tr class="tr-mail border-top">
<td class="td-mail border-top td__padding-zero" colspan="6">
Expand All @@ -80,7 +80,7 @@ <h2 class="heading-font">{{ type_description }}</h2>
</tr>
<tr>
<td class="td-mail td__padding-all" colspan="6">
<p>U ontvangt deze e-mail notificatie zodat wij u op de hoogte kunnen houden van lorem ipsum dolor sit amet consectetur...</p>
<p>U ontvangt deze e-mail notificatie zodat wij u op de hoogte kunnen houden.</p>
</td>
</tr>
</tbody>
Expand Down
38 changes: 18 additions & 20 deletions src/open_inwoner/conf/parts/maileditor.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,10 +220,6 @@ def _readfile(name):
"name": "case_link",
"description": _("The link to the case details."),
},
# {
# "name": "start_date",
# "description": _("The start date of the case"),
# },
{
"name": "end_date",
"description": _("The planned final date of the case"),
Expand All @@ -232,14 +228,28 @@ def _readfile(name):
"name": "case_link",
"description": _("The link to the case details."),
},
{
"name": "case_status",
"description": _("The current status of the case."),
},
{
"name": "site_name",
"description": _("Name of the site"),
},
{
"name": "contactpage",
"description": _("The link to an existing contactpage"),
},
{
"name": "profile_notifications",
"description": _(
"The link to the notifications and unsubscribe settings"
),
},
{
"name": "profile_page",
"description": _("The link to the user's profile page"),
},
{
"name": "login_page",
"description": _("The link to the login page"),
},
],
},
"case_document_notification": {
Expand Down Expand Up @@ -309,22 +319,10 @@ def _readfile(name):
"name": "end_date",
"description": _("The planned final date of the case"),
},
{
"name": "case_link",
"description": _("The link to the case details."),
},
{
"name": "case_status",
"description": _("The current status of the case."),
},
{
"name": "site_name",
"description": _("Name of the site"),
},
{
"name": "site_logo",
"description": _("URL of the site logo."),
},
],
},
"contactform_registration": {
Expand Down
4 changes: 2 additions & 2 deletions src/open_inwoner/static/mailcss/email.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ table, .table-mail {
line-height: 24px;
}

td, .td-mail {
td, .td-mail {
/* --color-gray-dark */
color: #4B4B4B;
font-family: Lato, Helvetica, Arial, sans-serif;
Expand All @@ -47,7 +47,7 @@ td, .td-mail {
.logo-mail {
text-align: center;
width: auto;
max-height: 53px;
max-height: 55px;
max-width: 600px;
}

Expand Down
26 changes: 20 additions & 6 deletions src/open_inwoner/templates/mail/_base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
</head>

<style data-css-inline="keep">
/* Font-styles for mail-clients that support custom fonts */
/* cyrillic-ext */
@font-face {
font-family: Ubuntu;
Expand Down Expand Up @@ -89,6 +90,19 @@
}
</style>

<style data-css-inline="keep">
/* Responsiveness mail-clients that support media-queries */
@media only screen and (max-width: 610px) {
.tr--responsive {
display: block;
width: 100%;
}
.td--responsive {
display: block;
}
}
</style>

<style>
/* Use <style data-css-inline="extra_css"> for additional styling */
a {
Expand Down Expand Up @@ -139,29 +153,29 @@
<body>

<center>
<table border="0" cellspacing="0" width="100%" class="table-mail">
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
<tbody>
<tr>
<!-- Do not remove empty TD's !!! -->
<td>&nbsp;</td>
<td></td>
<td width="600">
<table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
<tr>
<td class="td-mail--accent td-mail__bg-accent" colspan="6" style="background-color: {{ theming.accent_color }};">&nbsp;</td>
</tr>
<tr>
<td class="td-mail logo-mail td__padding-top" colspan="6">
<img height="50" src="{{ logo.url }}" alt="" class="logo-mail">
<img height="55" src="{{ logo.url }}" alt="" class="logo-mail">
</td>
</tr>
<tr>
<td class="td-mail td__padding-all" valign="top" colspan="6">
<td class="td-mail" valign="top" colspan="6">
{{ content }}
</td>
</tr>
</table>
</td>
<td>&nbsp;</td>
<td></td>
</tr>
</tbody>
</table>
Expand Down

0 comments on commit 87a4be7

Please sign in to comment.