From 87a4be7f76d22f3d748b72ecaaa28dc619060935 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 13 Feb 2024 12:58:03 +0100
Subject: [PATCH] [#2059] Made mail templates responsive, added placeholders

---
 .../conf/parts/case_status_notification.html  | 16 ++++----
 ...e_status_notification_action_required.html | 16 ++++----
 src/open_inwoner/conf/parts/maileditor.py     | 38 +++++++++----------
 src/open_inwoner/static/mailcss/email.css     |  4 +-
 src/open_inwoner/templates/mail/_base.html    | 26 ++++++++++---
 5 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/src/open_inwoner/conf/parts/case_status_notification.html b/src/open_inwoner/conf/parts/case_status_notification.html
index 1f5991cd44..566c6d587a 100644
--- a/src/open_inwoner/conf/parts/case_status_notification.html
+++ b/src/open_inwoner/conf/parts/case_status_notification.html
@@ -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>
@@ -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>
@@ -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>
@@ -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">
@@ -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>
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
index fbf166b2c6..f77de79a33 100644
--- a/src/open_inwoner/conf/parts/case_status_notification_action_required.html
+++ b/src/open_inwoner/conf/parts/case_status_notification_action_required.html
@@ -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>
@@ -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">
@@ -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>
diff --git a/src/open_inwoner/conf/parts/maileditor.py b/src/open_inwoner/conf/parts/maileditor.py
index ed47bff4da..6f5c95aa53 100644
--- a/src/open_inwoner/conf/parts/maileditor.py
+++ b/src/open_inwoner/conf/parts/maileditor.py
@@ -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"),
@@ -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": {
@@ -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": {
diff --git a/src/open_inwoner/static/mailcss/email.css b/src/open_inwoner/static/mailcss/email.css
index dcb8f97bd6..6a9cd32416 100644
--- a/src/open_inwoner/static/mailcss/email.css
+++ b/src/open_inwoner/static/mailcss/email.css
@@ -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;
@@ -47,7 +47,7 @@ td, .td-mail  {
 .logo-mail {
     text-align: center;
     width: auto;
-    max-height: 53px;
+    max-height: 55px;
     max-width: 600px;
 }
 
diff --git a/src/open_inwoner/templates/mail/_base.html b/src/open_inwoner/templates/mail/_base.html
index ac99b93483..c64d9e248a 100644
--- a/src/open_inwoner/templates/mail/_base.html
+++ b/src/open_inwoner/templates/mail/_base.html
@@ -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;
@@ -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 {
@@ -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>