[#2169] Improved mail-template styling and placeholders

maykinmedia · Mar 11, 2024 · 3960c19 · 3960c19
1 parent 6ff0881
commit 3960c19
Show file tree

Hide file tree

Showing 19 changed files with 98 additions and 53 deletions.
diff --git a/src/open_inwoner/conf/parts/case_document_notification.html b/src/open_inwoner/conf/parts/case_document_notification.html
@@ -12,16 +12,16 @@
         </td>
     </tr>
     <tr>
-        <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
+        <td class="td-mail td-mail__bg-info td__padding-top td__padding-right td__padding-left" colspan="6">
             <h1>Nieuw:</h1>
         </td>
     </tr>
     <tr class="tr--responsive">
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__leftcell" colspan="3">
             <p><span class="text-color__small-gray-900">Aanvraag: </span></p>
             <h2>{{ type_description }}</h2>
         </td>
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__rightcell td__alignright" colspan="3">
             <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
         </td>
     </tr>
@@ -30,13 +30,12 @@ <h2>{{ type_description }}</h2>
     <tr>
         <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
             <div class="td-mail__bg-white">
-                <p>
                 <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
                     <tr>
                         <td width="35" class="td-mail td__padding-left align-center">
-                            <img src="/static/img/mail/info_info-blue.jpg" width="20" height="20" alt="" class="mail__icon">
+                            <img src="/static/img/mail/info_info-blue.png" width="20" height="20" alt="" class="mail__icon">
                         </td>
-                        <td class="td__padding-top td__padding-right td__padding-bottom">
+                        <td class="td__padding-top td__padding-right td__padding-bottom align-center">
                             <p class="text-color__info">Een of meer documenten zijn aan uw aanvraag toegevoegd.</p>
                         </td>
                     </tr>
@@ -66,7 +65,7 @@ <h2>{{ type_description }}</h2>
     </tr>
     <tr class="tr-mail">
         <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
-            <!-- <hr> styling --> &nbsp;
+            <!-- <hr> styling -->
         </td>
     </tr>
     <tr>
@@ -77,11 +76,9 @@ <h2>{{ type_description }}</h2>
         </td>
     </tr>
     <tr>
-        <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>
+        <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>
         </td>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p>
-            <a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</a>
-        </p></td>
+        <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">{{contact_phonenumber}}</a></p></td>
     </tr>
     <tr class="tr-mail border-top">
         <td class="td-mail border-top td__padding-zero" colspan="6">

diff --git a/src/open_inwoner/conf/parts/case_status_notification.html b/src/open_inwoner/conf/parts/case_status_notification.html
@@ -12,16 +12,16 @@
         </td>
     </tr>
     <tr>
-        <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
+        <td class="td-mail td-mail__bg-info td__padding-top td__padding-right td__padding-left" colspan="6">
             <h1>Nieuw:</h1>
         </td>
     </tr>
     <tr class="tr--responsive">
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__leftcell" colspan="3">
             <p><span class="text-color__small-gray-900">Aanvraag: </span></p>
             <h2>{{ type_description }}</h2>
         </td>
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__rightcell td__alignright" colspan="3">
             <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
         </td>
     </tr>
@@ -30,13 +30,12 @@ <h2>{{ type_description }}</h2>
     <tr>
         <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
             <div class="td-mail__bg-white">
-                <p>
                 <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
                     <tr>
                         <td width="35" class="td-mail td__padding-left align-center">
-                            <img src="/static/img/mail/info_info-blue.jpg" width="20" height="20" alt="" class="mail__icon">
+                            <img src="/static/img/mail/info_info-blue.png" width="20" height="20" alt="" class="mail__icon">
                         </td>
-                        <td class="td__padding-top td__padding-right td__padding-bottom">
+                        <td class="td__padding-top td__padding-right td__padding-bottom align-center">
                             <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>
                         </td>
                     </tr>
@@ -66,7 +65,7 @@ <h2>{{ type_description }}</h2>
     </tr>
     <tr class="tr-mail">
         <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
-            <!-- <hr> styling --> &nbsp;
+            <!-- <hr> styling -->
         </td>
     </tr>
     <tr>
@@ -77,11 +76,9 @@ <h2>{{ type_description }}</h2>
         </td>
     </tr>
     <tr>
-        <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>
+        <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>
         </td>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p>
-            <a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</a>
-        </p></td>
+        <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">{{ contact_phonenumber }}</a></p></td>
     </tr>
     <tr class="tr-mail border-top">
         <td class="td-mail border-top td__padding-zero" colspan="6">

diff --git a/src/open_inwoner/conf/parts/case_status_notification_action_required.html b/src/open_inwoner/conf/parts/case_status_notification_action_required.html
@@ -12,29 +12,28 @@
         </td>
     </tr>
     <tr>
-        <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
+        <td class="td-mail td-mail__bg-danger td__padding-top td__padding-right td__padding-left" colspan="6">
             <h1>Nieuw:</h1>
         </td>
     </tr>
     <tr class="tr--responsive">
-        <td class="td--responsive td-mail td-mail__bg-danger td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-danger td__padding-all td__leftcell" colspan="3">
             <p><span class="text-color__small-gray-900">Aanvraag: </span></p>
             <h2>{{ type_description }}</h2>
         </td>
-        <td class="td--responsive td-mail td-mail__bg-danger td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-danger td__padding-all td__rightcell td__alignright" colspan="3">
             <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
         </td>
     </tr>
     <tr>
         <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
             <div class="td-mail__bg-white">
-                <p>
                 <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
                     <tr>
                         <td width="35" class="td-mail td__padding-left align-center">
-                            <img src="/static/img/mail/alarm_danger-orange.jpg" width="20" height="18" alt="" class="mail__icon">
+                            <img src="/static/img/mail/alarm_danger-orange.png" width="20" height="18" alt="" class="mail__icon">
                         </td>
-                        <td class="td__padding-top td__padding-right td__padding-bottom">
+                        <td class="td__padding-top td__padding-right td__padding-bottom align-center">
                             <p class="text-color__danger"><strong>Wij hebben documenten van u nodig</strong><br>
                                 Upload de documenten tot {{ end_date }}</p>
                         </td>
@@ -63,7 +62,7 @@ <h2>{{ type_description }}</h2>
     </tr>
     <tr class="tr-mail">
         <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
-            <!-- <hr> styling --> &nbsp;
+            <!-- <hr> styling -->
         </td>
     </tr>
     <tr>
@@ -74,11 +73,9 @@ <h2>{{ type_description }}</h2>
         </td>
     </tr>
     <tr class="tr--responsive">
-        <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>
+        <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>
         </td>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p>
-            <a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</a>
-        </p></td>
+        <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">{{ contact_phonenumber }}</a></p></td>
     </tr>
     <tr class="tr-mail border-top">
         <td class="td-mail border-top td__padding-zero" colspan="6">

diff --git a/src/open_inwoner/conf/parts/contact_approval.html b/src/open_inwoner/conf/parts/contact_approval.html
@@ -3,5 +3,5 @@
     Volg onderstaande link waarop u uw goedkeuring kan geven of kan aangeven {{ sender_name }} niet als contactpersoon te willen. </p>
 <p><a href="{{ contacts_link }}">Mijn Contacten</a><span class="color--secondary"> &rarr;</span></p>
 <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>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/contactform_registration.html b/src/open_inwoner/conf/parts/contactform_registration.html
@@ -25,5 +25,5 @@
     </tr>
 </table>
 
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/daily_email_digest.html b/src/open_inwoner/conf/parts/daily_email_digest.html
@@ -18,5 +18,5 @@
     {% endfor %}
 </table>
 
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/expiring_action.html b/src/open_inwoner/conf/parts/expiring_action.html
@@ -15,5 +15,5 @@
 </table>
 
 <p><a href="{{ actions_link }}">Go to your actions</a></p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/expiring_plan.html b/src/open_inwoner/conf/parts/expiring_plan.html
@@ -17,5 +17,5 @@
 </table>
 
 <p><a href="{{ plan_list_link }}">Go to your plans</a></p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/invite.html b/src/open_inwoner/conf/parts/invite.html
@@ -3,5 +3,5 @@
     Gebruik onderstaande link om je aan te melden </p>
 <p><a href="{{ invite_link }}">aanmelden</a><span class="color--secondary"> &rarr;</span></p>
 <p>Mocht je geen behoefte hieraan hebben dan staat het je vrij om dit bericht te negeren </p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/maileditor.py b/src/open_inwoner/conf/parts/maileditor.py
@@ -1,4 +1,5 @@
 import os
+from datetime import date
 
 from django.utils.translation import gettext_lazy as _
 
@@ -211,18 +212,22 @@ def _readfile(name):
             {
                 "name": "identification",
                 "description": _("The identification of the case"),
+                "example": "ZAAK-1234",
             },
             {
                 "name": "type_description",
                 "description": _("The description of the type of the case"),
+                "example": _("Casetype placeholder"),
             },
             {
                 "name": "status_description",
                 "description": _("The description of the status of the case"),
+                "example": _("status placeholder"),
             },
             {
                 "name": "end_date",
                 "description": _("The planned final date of the case"),
+                "example": date(2024, 5, 1),
             },
             {
                 "name": "case_link",
@@ -269,14 +274,17 @@ def _readfile(name):
             {
                 "name": "identification",
                 "description": _("The identification of the case"),
+                "example": "ZAAK-1234",
             },
             {
                 "name": "type_description",
                 "description": _("The description of the type of the case"),
+                "example": _("Casetype placeholder"),
             },
             {
                 "name": "start_date",
                 "description": _("The start date of the case"),
+                "example": date(2024, 5, 1),
             },
             {
                 "name": "case_link",
@@ -312,14 +320,22 @@ def _readfile(name):
             {
                 "name": "identification",
                 "description": _("The identification of the case"),
+                "example": "ZAAK-1234",
             },
             {
                 "name": "type_description",
                 "description": _("The description of the type of the case"),
+                "example": _("Casetype placeholder"),
             },
             {
                 "name": "status_description",
                 "description": _("The description of the status of the case"),
+                "example": _("status placeholder"),
+            },
+            {
+                "name": "status_description",
+                "description": _("The description of the status of the case"),
+                "example": _("status placeholder"),
             },
             {
                 "name": "case_link",
@@ -328,6 +344,7 @@ def _readfile(name):
             {
                 "name": "end_date",
                 "description": _("The planned final date of the case"),
+                "example": date(2024, 5, 1),
             },
             {
                 "name": "site_name",

diff --git a/src/open_inwoner/conf/parts/new_messages.html b/src/open_inwoner/conf/parts/new_messages.html
@@ -1,5 +1,5 @@
 <p>Dear</p>
 <p>You've received {{ total_messages }} new messages from {{ total_senders }} users</p>
 <p><a href="{{ inbox_link }}">Go to the inbox</a><span class="color--secondary"> &rarr;</span></p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/plan_action_update.html b/src/open_inwoner/conf/parts/plan_action_update.html
@@ -20,5 +20,5 @@
     </tr>
 </table>
 
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/static/img/mail/alarm_danger-orange.jpg b/src/open_inwoner/static/img/mail/alarm_danger-orange.jpg
diff --git a/src/open_inwoner/static/img/mail/alarm_danger-orange.png b/src/open_inwoner/static/img/mail/alarm_danger-orange.png
diff --git a/src/open_inwoner/static/img/mail/check_success-green.png b/src/open_inwoner/static/img/mail/check_success-green.png
diff --git a/src/open_inwoner/static/img/mail/info_info-blue.jpg b/src/open_inwoner/static/img/mail/info_info-blue.jpg
diff --git a/src/open_inwoner/static/img/mail/info_info-blue.png b/src/open_inwoner/static/img/mail/info_info-blue.png
diff --git a/src/open_inwoner/static/mailcss/email.css b/src/open_inwoner/static/mailcss/email.css
@@ -64,7 +64,10 @@ td, .td-mail {
 }
 
 .mail__icon {
-    border-right: 5px solid #FFFFFF;
+    padding-right: 8px;
+    margin-right: 0;
+    width: 20px;
+    height: 20px;
 }
 
 .td-mail h1 {
@@ -97,7 +100,7 @@ td.align-center {
 }
 
 .td-mail__bg-info {
-    background-color: #B3D9EB;
+    background-color: #D5E6F6;
 }
 
 .td-mail__bg-danger {
@@ -142,12 +145,24 @@ td.align-center {
     padding: 0;
 }
 
+.td__nowrap {
+    white-space: nowrap;
+}
+
+.td__alignright {
+    text-align: right;
+}
+
+.td__rightcell.td__nowrap {
+    min-width: 300px;
+}
+
 .spacing__extra {
     height: 20px;
 }
 
 .button--primary {
-    border: 1px solid #0065BD;
+    border: 1px solid;
     border-radius: 6px;
     color: #ffffff;
     display: inline-block;
@@ -181,3 +196,18 @@ td.align-center {
     font-size: 14px;
 }
 
+strong .color--primary, strong .color--secondary {
+    line-height: 42px;
+    text-decoration: none;
+}
+
+/* CKEditor only */
+
+.cke_editable a {
+    color: #248641;
+}
+
+.cke_editable .button--primary {
+    background-color: #0065BD;
+    color: #FFFFFF;
+}