[#2059] Simplified and improved padding of mail templates

maykinmedia · Feb 13, 2024 · 68f026f · 68f026f
1 parent de23c88
commit 68f026f
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 14 deletions.
diff --git a/src/open_inwoner/conf/parts/case_status_notification.html b/src/open_inwoner/conf/parts/case_status_notification.html
@@ -1,4 +1,4 @@
-<table border="0" width="100%" class="table-mail">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
     <tbody>
     <tr>
         <td class="td-mail td__padding-all" colspan="6">
@@ -31,10 +31,10 @@ <h2>{{ type_description }}</h2>
         <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
             <div class="td-mail__bg-white">
                 <p>
-                <table border="0" width="100%">
+                <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" alt="">
+                            <img src="/static/img/mail/info_info-blue.jpg" width="20" height="20" alt="" class="mail__icon">
                         </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="text-color__info">{{ type_description }}</a></strong></span>.</p>

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
@@ -1,4 +1,4 @@
-<table border="0" width="100%" class="table-mail">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
     <tbody>
     <tr>
         <td class="td-mail td__padding-all" colspan="6">
@@ -29,10 +29,10 @@ <h2>{{ type_description }}</h2>
         <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
             <div class="td-mail__bg-white">
                 <p>
-                <table border="0" width="100%">
+                <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" alt="">
+                            <img src="/static/img/mail/alarm_danger-orange.jpg" width="20" height="18" alt="" class="mail__icon">
                         </td>
                         <td class="td__padding-top td__padding-right td__padding-bottom">
                             <p class="text-color__danger"><strong>Wij hebben documenten van u nodig</strong><br>

diff --git a/src/open_inwoner/static/img/mail/alarm_danger-orange.svg b/src/open_inwoner/static/img/mail/alarm_danger-orange.svg
diff --git a/src/open_inwoner/static/img/mail/info_info-blue.svg b/src/open_inwoner/static/img/mail/info_info-blue.svg
diff --git a/src/open_inwoner/static/mailcss/email.css b/src/open_inwoner/static/mailcss/email.css
@@ -63,6 +63,10 @@ td, .td-mail {
     max-width: 600px;
 }
 
+.mail__icon {
+    border-right: 5px solid #FFFFFF;
+}
+
 .td-mail h1 {
     font-size: 20px;
 }

diff --git a/src/open_inwoner/templates/mail/_base.html b/src/open_inwoner/templates/mail/_base.html
@@ -153,13 +153,13 @@
 <body>
 
 <center>
-    <table border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
+    <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
         <tbody>
         <tr>
             <!-- Do not remove empty TD's !!! -->
             <td></td>
             <td width="600">
-                <table border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
+                <table role="presentation" 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>