Skip to content

Commit a0afa39

Browse files
alextremealextreme
authored
Merge pull request #1072 from maykinmedia/fix/2169-mailtemplate-stylings
[#2169] Improve mail-template styling
2 parents 6ff0881 + ced91f7 commit a0afa39

19 files changed

+118
-53
lines changed

‎src/open_inwoner/conf/parts/case_document_notification.html

+8-11
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@
1212
</td>
1313
</tr>
1414
<tr>
15-
<td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
15+
<td class="td-mail td-mail__bg-info td__padding-top td__padding-right td__padding-left" colspan="6">
1616
<h1>Nieuw:</h1>
1717
</td>
1818
</tr>
1919
<tr class="tr--responsive">
20-
<td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
20+
<td class="td--responsive td-mail td-mail__bg-info td__padding-all td__leftcell" colspan="3">
2121
<p><span class="text-color__small-gray-900">Aanvraag: </span></p>
2222
<h2>{{ type_description }}</h2>
2323
</td>
24-
<td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
24+
<td class="td--responsive td-mail td-mail__bg-info td__padding-all td__rightcell td__alignright" colspan="3">
2525
<p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
2626
</td>
2727
</tr>
@@ -30,13 +30,12 @@ <h2>{{ type_description }}</h2>
3030
<tr>
3131
<td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
3232
<div class="td-mail__bg-white">
33-
<p>
3433
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
3534
<tr>
3635
<td width="35" class="td-mail td__padding-left align-center">
37-
<img src="/static/img/mail/info_info-blue.jpg" width="20" height="20" alt="" class="mail__icon">
36+
<img src="/static/img/mail/info_info-blue.png" width="20" height="20" alt="" class="mail__icon">
3837
</td>
39-
<td class="td__padding-top td__padding-right td__padding-bottom">
38+
<td class="td__padding-top td__padding-right td__padding-bottom align-center">
4039
<p class="text-color__info">Een of meer documenten zijn aan uw aanvraag toegevoegd.</p>
4140
</td>
4241
</tr>
@@ -66,7 +65,7 @@ <h2>{{ type_description }}</h2>
6665
</tr>
6766
<tr class="tr-mail">
6867
<td class="td-mail spacer-bottom td__padding-zero" colspan="6">
69-
<!-- <hr> styling --> &nbsp;
68+
<!-- <hr> styling -->
7069
</td>
7170
</tr>
7271
<tr>
@@ -77,11 +76,9 @@ <h2>{{ type_description }}</h2>
7776
</td>
7877
</tr>
7978
<tr>
80-
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
79+
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__leftcell" colspan="2"><p><a href="{{ contact_page }}#">Ga naar onze contactpagina</a></p>
8180
</td>
82-
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p>
83-
<a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</a>
84-
</p></td>
81+
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__rightcell td__nowrap" colspan="4"><p><a href="tel:{{ contact_phonenumber }}" data-rel="external">Bel {{ contact_phonenumber }}</a></p></td>
8582
</tr>
8683
<tr class="tr-mail border-top">
8784
<td class="td-mail border-top td__padding-zero" colspan="6">

‎src/open_inwoner/conf/parts/case_status_notification.html

+8-11
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@
1212
</td>
1313
</tr>
1414
<tr>
15-
<td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
15+
<td class="td-mail td-mail__bg-info td__padding-top td__padding-right td__padding-left" colspan="6">
1616
<h1>Nieuw:</h1>
1717
</td>
1818
</tr>
1919
<tr class="tr--responsive">
20-
<td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
20+
<td class="td--responsive td-mail td-mail__bg-info td__padding-all td__leftcell" colspan="3">
2121
<p><span class="text-color__small-gray-900">Aanvraag: </span></p>
2222
<h2>{{ type_description }}</h2>
2323
</td>
24-
<td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
24+
<td class="td--responsive td-mail td-mail__bg-info td__padding-all td__rightcell td__alignright" colspan="3">
2525
<p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
2626
</td>
2727
</tr>
@@ -30,13 +30,12 @@ <h2>{{ type_description }}</h2>
3030
<tr>
3131
<td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
3232
<div class="td-mail__bg-white">
33-
<p>
3433
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
3534
<tr>
3635
<td width="35" class="td-mail td__padding-left align-center">
37-
<img src="/static/img/mail/info_info-blue.jpg" width="20" height="20" alt="" class="mail__icon">
36+
<img src="/static/img/mail/info_info-blue.png" width="20" height="20" alt="" class="mail__icon">
3837
</td>
39-
<td class="td__padding-top td__padding-right td__padding-bottom">
38+
<td class="td__padding-top td__padding-right td__padding-bottom align-center">
4039
<p class="text-color__info">De status is gewijzigd naar <span class="status_current"><strong><a href="{{ case_link }}" class="text-color__info">{{ status_description }}</a></strong></span>.</p>
4140
</td>
4241
</tr>
@@ -66,7 +65,7 @@ <h2>{{ type_description }}</h2>
6665
</tr>
6766
<tr class="tr-mail">
6867
<td class="td-mail spacer-bottom td__padding-zero" colspan="6">
69-
<!-- <hr> styling --> &nbsp;
68+
<!-- <hr> styling -->
7069
</td>
7170
</tr>
7271
<tr>
@@ -77,11 +76,9 @@ <h2>{{ type_description }}</h2>
7776
</td>
7877
</tr>
7978
<tr>
80-
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
79+
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__leftcell" colspan="2"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
8180
</td>
82-
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p>
83-
<a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</a>
84-
</p></td>
81+
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__rightcell td__nowrap" colspan="4"><p><a href="tel:{{ contact_phonenumber }}" data-rel="external">Bel {{ contact_phonenumber }}</a></p></td>
8582
</tr>
8683
<tr class="tr-mail border-top">
8784
<td class="td-mail border-top td__padding-zero" colspan="6">

‎src/open_inwoner/conf/parts/case_status_notification_action_required.html

+8-11
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,28 @@
1212
</td>
1313
</tr>
1414
<tr>
15-
<td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
15+
<td class="td-mail td-mail__bg-danger td__padding-top td__padding-right td__padding-left" colspan="6">
1616
<h1>Nieuw:</h1>
1717
</td>
1818
</tr>
1919
<tr class="tr--responsive">
20-
<td class="td--responsive td-mail td-mail__bg-danger td__padding-all" colspan="3">
20+
<td class="td--responsive td-mail td-mail__bg-danger td__padding-all td__leftcell" colspan="3">
2121
<p><span class="text-color__small-gray-900">Aanvraag: </span></p>
2222
<h2>{{ type_description }}</h2>
2323
</td>
24-
<td class="td--responsive td-mail td-mail__bg-danger td__padding-all" colspan="3">
24+
<td class="td--responsive td-mail td-mail__bg-danger td__padding-all td__rightcell td__alignright" colspan="3">
2525
<p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
2626
</td>
2727
</tr>
2828
<tr>
2929
<td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
3030
<div class="td-mail__bg-white">
31-
<p>
3231
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
3332
<tr>
3433
<td width="35" class="td-mail td__padding-left align-center">
35-
<img src="/static/img/mail/alarm_danger-orange.jpg" width="20" height="18" alt="" class="mail__icon">
34+
<img src="/static/img/mail/alarm_danger-orange.png" width="20" height="18" alt="" class="mail__icon">
3635
</td>
37-
<td class="td__padding-top td__padding-right td__padding-bottom">
36+
<td class="td__padding-top td__padding-right td__padding-bottom align-center">
3837
<p class="text-color__danger"><strong>Wij hebben documenten van u nodig</strong><br>
3938
Upload de documenten tot {{ end_date }}</p>
4039
</td>
@@ -63,7 +62,7 @@ <h2>{{ type_description }}</h2>
6362
</tr>
6463
<tr class="tr-mail">
6564
<td class="td-mail spacer-bottom td__padding-zero" colspan="6">
66-
<!-- <hr> styling --> &nbsp;
65+
<!-- <hr> styling -->
6766
</td>
6867
</tr>
6968
<tr>
@@ -74,11 +73,9 @@ <h2>{{ type_description }}</h2>
7473
</td>
7574
</tr>
7675
<tr class="tr--responsive">
77-
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
76+
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__leftcell" colspan="2"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
7877
</td>
79-
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p>
80-
<a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</a>
81-
</p></td>
78+
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__rightcell td__nowrap" colspan="4"><p><a href="tel:{{ contact_phonenumber }}" data-rel="external">Bel {{ contact_phonenumber }}</a></p></td>
8279
</tr>
8380
<tr class="tr-mail border-top">
8481
<td class="td-mail border-top td__padding-zero" colspan="6">

‎src/open_inwoner/conf/parts/contact_approval.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
Volg onderstaande link waarop u uw goedkeuring kan geven of kan aangeven {{ sender_name }} niet als contactpersoon te willen. </p>
44
<p><a href="{{ contacts_link }}">Mijn Contacten</a><span class="color--secondary"> &rarr;</span></p>
55
<p>U kunt ook op een later moment toestemming geven, het verzoek van {{ sender_name }} blijft open staat totdat u een keuze heeft gemaakt.</p>
6-
<p>Met vriendelijke groet,
7-
{{ site_name }} </p>
6+
<p>Met vriendelijke groet,</p>
7+
<p>{{ site_name }}</p>

‎src/open_inwoner/conf/parts/contactform_registration.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,5 @@
2525
</tr>
2626
</table>
2727

28-
<p>Met vriendelijke groet,
29-
{{ site_name }} </p>
28+
<p>Met vriendelijke groet,</p>
29+
<p>{{ site_name }}</p>

‎src/open_inwoner/conf/parts/daily_email_digest.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,5 @@
1818
{% endfor %}
1919
</table>
2020

21-
<p>Met vriendelijke groet,
22-
{{ site_name }} </p>
21+
<p>Met vriendelijke groet,</p>
22+
<p>{{ site_name }}</p>

‎src/open_inwoner/conf/parts/expiring_action.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,5 @@
1515
</table>
1616

1717
<p><a href="{{ actions_link }}">Go to your actions</a></p>
18-
<p>Met vriendelijke groet,
19-
{{ site_name }} </p>
18+
<p>Met vriendelijke groet,</p>
19+
<p>{{ site_name }}</p>

‎src/open_inwoner/conf/parts/expiring_plan.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,5 @@
1717
</table>
1818

1919
<p><a href="{{ plan_list_link }}">Go to your plans</a></p>
20-
<p>Met vriendelijke groet,
21-
{{ site_name }} </p>
20+
<p>Met vriendelijke groet,</p>
21+
<p>{{ site_name }}</p>

‎src/open_inwoner/conf/parts/invite.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
Gebruik onderstaande link om je aan te melden </p>
44
<p><a href="{{ invite_link }}">aanmelden</a><span class="color--secondary"> &rarr;</span></p>
55
<p>Mocht je geen behoefte hieraan hebben dan staat het je vrij om dit bericht te negeren </p>
6-
<p>Met vriendelijke groet,
7-
{{ site_name }} </p>
6+
<p>Met vriendelijke groet,</p>
7+
<p>{{ site_name }}</p>

‎src/open_inwoner/conf/parts/maileditor.py

+37
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import os
2+
from datetime import date
23

34
from django.utils.translation import gettext_lazy as _
45

@@ -211,18 +212,22 @@ def _readfile(name):
211212
{
212213
"name": "identification",
213214
"description": _("The identification of the case"),
215+
"example": "ZAAK-1234",
214216
},
215217
{
216218
"name": "type_description",
217219
"description": _("The description of the type of the case"),
220+
"example": _("Casetype placeholder"),
218221
},
219222
{
220223
"name": "status_description",
221224
"description": _("The description of the status of the case"),
225+
"example": _("status placeholder"),
222226
},
223227
{
224228
"name": "end_date",
225229
"description": _("The planned final date of the case"),
230+
"example": date(2024, 5, 1),
226231
},
227232
{
228233
"name": "case_link",
@@ -236,6 +241,10 @@ def _readfile(name):
236241
"name": "contact_page",
237242
"description": _("The link to an existing contactpage"),
238243
},
244+
{
245+
"name": "contact_phonenumber",
246+
"description": _("The callable link to the configured phonenumber"),
247+
},
239248
{
240249
"name": "profile_notifications",
241250
"description": _(
@@ -269,14 +278,17 @@ def _readfile(name):
269278
{
270279
"name": "identification",
271280
"description": _("The identification of the case"),
281+
"example": "ZAAK-1234",
272282
},
273283
{
274284
"name": "type_description",
275285
"description": _("The description of the type of the case"),
286+
"example": _("Casetype placeholder"),
276287
},
277288
{
278289
"name": "start_date",
279290
"description": _("The start date of the case"),
291+
"example": date(2024, 5, 1),
280292
},
281293
{
282294
"name": "case_link",
@@ -286,6 +298,14 @@ def _readfile(name):
286298
"name": "site_name",
287299
"description": _("Name of the site"),
288300
},
301+
{
302+
"name": "contact_page",
303+
"description": _("The link to an existing contactpage"),
304+
},
305+
{
306+
"name": "contact_phonenumber",
307+
"description": _("The callable link to the configured phonenumber"),
308+
},
289309
{
290310
"name": "profile_notifications",
291311
"description": _(
@@ -312,14 +332,22 @@ def _readfile(name):
312332
{
313333
"name": "identification",
314334
"description": _("The identification of the case"),
335+
"example": "ZAAK-1234",
315336
},
316337
{
317338
"name": "type_description",
318339
"description": _("The description of the type of the case"),
340+
"example": _("Casetype placeholder"),
341+
},
342+
{
343+
"name": "status_description",
344+
"description": _("The description of the status of the case"),
345+
"example": _("status placeholder"),
319346
},
320347
{
321348
"name": "status_description",
322349
"description": _("The description of the status of the case"),
350+
"example": _("status placeholder"),
323351
},
324352
{
325353
"name": "case_link",
@@ -328,11 +356,20 @@ def _readfile(name):
328356
{
329357
"name": "end_date",
330358
"description": _("The planned final date of the case"),
359+
"example": date(2024, 5, 1),
331360
},
332361
{
333362
"name": "site_name",
334363
"description": _("Name of the site"),
335364
},
365+
{
366+
"name": "contact_page",
367+
"description": _("The link to an existing contactpage"),
368+
},
369+
{
370+
"name": "contact_phonenumber",
371+
"description": _("The callable link to the configured phonenumber"),
372+
},
336373
{
337374
"name": "profile_notifications",
338375
"description": _(

‎src/open_inwoner/conf/parts/new_messages.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<p>Dear</p>
22
<p>You've received {{ total_messages }} new messages from {{ total_senders }} users</p>
33
<p><a href="{{ inbox_link }}">Go to the inbox</a><span class="color--secondary"> &rarr;</span></p>
4-
<p>Met vriendelijke groet,
5-
{{ site_name }} </p>
4+
<p>Met vriendelijke groet,</p>
5+
<p>{{ site_name }}</p>

‎src/open_inwoner/conf/parts/plan_action_update.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,5 @@
2020
</tr>
2121
</table>
2222

23-
<p>Met vriendelijke groet,
24-
{{ site_name }} </p>
23+
<p>Met vriendelijke groet,</p>
24+
<p>{{ site_name }}</p>

‎src/open_inwoner/static/img/mail/alarm_danger-orange.jpg

-1.89 KB
Binary file not shown.

‎src/open_inwoner/static/img/mail/alarm_danger-orange.png

2.53 KB
Loading

‎src/open_inwoner/static/img/mail/check_success-green.png

5.25 KB
Loading

‎src/open_inwoner/static/img/mail/info_info-blue.jpg

-2.19 KB
Binary file not shown.

‎src/open_inwoner/static/img/mail/info_info-blue.png

4.63 KB
Loading

0 commit comments

Comments
 (0)