[#2059] Improved mail templates, undid mac-dev requirement

maykinmedia · Feb 12, 2024 · 1dd613e · 1dd613e
1 parent 0204f19
commit 1dd613e
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 57 deletions.
diff --git a/requirements/dev.txt b/requirements/dev.txt
@@ -1153,7 +1153,7 @@ xlwt==1.3.0
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt
     #   tablib
-# xmlsec==1.3.12
+xmlsec==1.3.12
     # via
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt

diff --git a/src/open_inwoner/conf/parts/case_document_notification.html b/src/open_inwoner/conf/parts/case_document_notification.html
@@ -16,7 +16,7 @@
     </tr>
 </table>
 
-<p><a href="{{ case_link }}">Ga naar uw zaak</a></p>
+<p><a href="{{ case_link }}">Ga naar uw zaak</a><span class="color--secondary"> &rarr;</span></p>
 <p>Met vriendelijke groet,
     {{ site_name }}
 </p>
diff --git a/src/open_inwoner/conf/parts/case_status_notification.html b/src/open_inwoner/conf/parts/case_status_notification.html
@@ -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 {{ case_status }}.</p>
+                            <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>
                         </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 &rarr;</a></strong></p>
+            <p><strong><a href="https://example.com/accounts/login/" class="color--primary">Log in</a><span class="color--primary"> &rarr;</span></strong></p>
         </td>
     </tr>
     <tr>

diff --git a/src/open_inwoner/conf/parts/contact_approval.html b/src/open_inwoner/conf/parts/contact_approval.html
@@ -1,7 +1,7 @@
 <p>Beste</p>
 <p>Gebruiker {{ sender_name }} wil u toevoegen als contactpersoon op {{ site_name }}.
     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></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>
diff --git a/src/open_inwoner/conf/parts/contactform_registration.html b/src/open_inwoner/conf/parts/contactform_registration.html
@@ -1,34 +1,29 @@
+<p>Beste</p>
+
 <table>
     <tr>
-        <td><p>Beste</p>
-
-            <table>
-                <tr>
-                    <th>Onderwerp:</th>
-                    <td>{{ subject }}</td>
-                </tr>
-                <tr>
-                    <th>Naam:</th>
-                    <td>{{ name }}</td>
-                </tr>
-                <tr>
-                    <th>Email:</th>
-                    <td>{{ email }}</td>
-                </tr>
-                <tr>
-                    <th>Telefoonnummer:</th>
-                    <td>{{ phonenumber }}</td>
-                </tr>
-                <tr>
-                    <th colspan="2">Vraag:</th>
-                </tr>
-                <tr>
-                    <td colspan="2">{{ question }}</td>
-                </tr>
-            </table>
-
-            <p>Met vriendelijke groet,
-                {{ site_name }} </p>
-        </td>
+        <th>Onderwerp:</th>
+        <td>{{ subject }}</td>
+    </tr>
+    <tr>
+        <th>Naam:</th>
+        <td>{{ name }}</td>
+    </tr>
+    <tr>
+        <th>Email:</th>
+        <td>{{ email }}</td>
+    </tr>
+    <tr>
+        <th>Telefoonnummer:</th>
+        <td>{{ phonenumber }}</td>
+    </tr>
+    <tr>
+        <th colspan="2">Vraag:</th>
+    </tr>
+    <tr>
+        <td colspan="2">{{ question }}</td>
     </tr>
 </table>
+
+<p>Met vriendelijke groet,
+    {{ site_name }} </p>
diff --git a/src/open_inwoner/conf/parts/expiring_action.html b/src/open_inwoner/conf/parts/expiring_action.html
@@ -1,7 +1,7 @@
 <p>Dear</p>
 <p>You are receiving this email because you have some actions that are expiring.</p>
 
-<table>
+<table width="600">
     <tr>
         <td>Action name</td>
         <td>End date</td>

diff --git a/src/open_inwoner/conf/parts/expiring_plan.html b/src/open_inwoner/conf/parts/expiring_plan.html
@@ -1,7 +1,7 @@
 <p>Dear</p>
 <p>You are receiving this email because you have some plans that are expiring.</p>
 
-<table>
+<table width="600">
     <tr>
         <td>Plan name</td>
         <td>Goal</td>

diff --git a/src/open_inwoner/conf/parts/invite.html b/src/open_inwoner/conf/parts/invite.html
@@ -1,7 +1,7 @@
 <p>Beste</p>
 <p>Je bent door {{ inviter_name }} uitgenodigd om in te loggen op {{ site_name }}.
     Gebruik onderstaande link om je aan te melden </p>
-<p><a href="{{ invite_link }}">aanmelden</a></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>
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></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>
diff --git a/src/open_inwoner/static/mailcss/email.css b/src/open_inwoner/static/mailcss/email.css
@@ -8,6 +8,8 @@ table, th, td, img {
 
 th {
     font-weight: bold;
+    padding: 18px 20px 18px 20px;
+    text-align: left;
 }
 
 p {
@@ -27,15 +29,16 @@ table, .table-mail {
     /* --color-gray-dark */
     background-color: #ffffff;
     border-spacing: 0;
+    border-collapse: collapse;
     color: #4B4B4B;
-    font-family: "Lato", "Helvetica", sans-serif;
+    font-family: Lato, Helvetica, sans-serif;
     line-height: 24px;
 }
 
 td, .td-mail  {
     /* --color-gray-dark */
     color: #4B4B4B;
-    font-family: "Lato", "Helvetica", Arial, sans-serif;
+    font-family: Lato, Helvetica, Arial, sans-serif;
     line-height: 24px;
 }
 
@@ -83,7 +86,7 @@ td.align-center {
     border-radius: 6px;
     color: #704000;
     display: inline-block;
-    font-family: 'Lato', 'Helvetica', Arial, sans-serif;
+    font-family: Lato, Helvetica, Arial, sans-serif;
     font-size: 16px;
     line-height: 24px;
     text-decoration: none;

diff --git a/src/open_inwoner/templates/mail/_base.html b/src/open_inwoner/templates/mail/_base.html
@@ -90,7 +90,7 @@
 </style>
 
 <style>
-    {#    <style data-css-inline="extra_css"> #}
+    /* Use <style data-css-inline="extra_css"> for additional styling */
     a {
         color: {{ theming.secondary_color }};
     }
@@ -131,32 +131,37 @@
     }
 
     .td-mail__bg-accent {
-        background-color: var(--color-accent);
+        background-color: {{ theming.accent_color }};
     }
 
 </style>
 
 <body>
-<img height="123" src="{{ logo.url }}" />
-
-<h1 style="color:{{ theming.primary_color }};">test</h1>
 
 <center>
     <table border="0" cellspacing="0" width="100%" class="table-mail">
         <tbody>
         <tr>
             <!-- Do not remove empty TD's !!! -->
-            <td></td>
+            <td>&nbsp;</td>
             <td width="600">
-        <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 src="{{ logo.url }}" alt="" class="logo-mail"></td>
-        </tr>
-        {{ content }}
-        </td>
-        <td></td>
+                <table>
+                    <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">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="td-mail td__padding-all" valign="top" colspan="6">
+                            {{ content }}
+                        </td>
+                    </tr>
+                </table>
+            </td>
+            <td>&nbsp;</td>
         </tr>
         </tbody>
     </table>