Skip to content

Commit

Permalink
[#2059] Simplified and improved padding of mail templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@jiromaykin
jiromaykin committed Feb 13, 2024
1 parent 87a4be7 commit de23c88
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 19 deletions.
22 changes: 16 additions & 6 deletions src/open_inwoner/conf/parts/case_status_notification.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@
<p>Er is iets veranderd in &eacute;&eacute;n van uw aanvragen.</p>
</td>
</tr>
<tr>
<td class="spacing__extra" colspan="6">
&nbsp;
</td>
</tr>
<tr>
<td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
<h1>Nieuw:</h1>
Expand All @@ -14,7 +19,7 @@ <h1>Nieuw:</h1>
<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>
<h2>{{ type_description }}</h2>
</td>
<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>
Expand Down Expand Up @@ -42,9 +47,14 @@ <h2 class="heading-font">{{ type_description }}</h2>
<!-- end of Table with differing column-widths -->

<tr>
<td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
<td class="td-mail td-mail__bg-info td__padding-all td__info-link" 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="{{ login_page }}" class="color--primary">Log in</a><span class="color--primary"> &rarr;</span></strong></p>
<p><strong><a href="{{ case_link }}" class="color--primary">Log in</a><span class="color--primary"> &rarr;</span></strong></p>
</td>
</tr>
<tr>
<td class="spacing__extra" colspan="6">
&nbsp;
</td>
</tr>
<tr>
Expand All @@ -67,9 +77,9 @@ <h2 class="heading-font">{{ type_description }}</h2>
</td>
</tr>
<tr>
<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 class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="https://example.com">Ga naar onze contactpagina</a></p>
</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>
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="tel:+14050" data-rel="external">Bel 14050</a></p></td>
</tr>
<tr class="tr-mail border-top">
<td class="td-mail border-top td__padding-zero" colspan="6">
Expand All @@ -78,7 +88,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="{{ profile_notifications }}" class="color--secondary">voorkeuren</a> aan voor de notificaties. </p>
<p>Pas hier uw <a href="https://example.com">voorkeuren</a> aan voor de notificaties. </p>
</td>
</tr>
</tbody>
Expand Down
19 changes: 12 additions & 7 deletions src/open_inwoner/conf/parts/case_status_notification_action_required.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@
<p>Er is iets veranderd in &eacute;&eacute;n van uw aanvragen.</p>
</td>
</tr>
<tr>
<td class="spacing__extra" colspan="6">
&nbsp;
</td>
</tr>
<tr>
<td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
<h1>Nieuw:</h1>
Expand All @@ -14,7 +19,7 @@ <h1>Nieuw:</h1>
<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="td--responsive heading-font">{{ type_description }}</h2>
<h2>{{ type_description }}</h2>
</td>
<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>
Expand All @@ -40,13 +45,13 @@ <h2 class="td--responsive heading-font">{{ type_description }}</h2>
</tr>
<tr>
<td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
<a href="{{ case_link }}" class="button--primary">Upload documenten</a>
<p>Log in om de documenten te uploaden.</p>
<a href="{{ case_link }}" class="button--primary">Log in</a>
</td>
</tr>
<tr>
<td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
<p>U hoeft niets te doen. Zodra er weer een update beschikbaar is ontvangt u hier een melding over.</p>
<p><strong><a href="{{ case_link }}" class="color--primary">Bekijk aanvraag &rarr;</a></strong></p>
<td class="spacing__extra" colspan="6">
&nbsp;
</td>
</tr>
<tr>
Expand All @@ -69,9 +74,9 @@ <h2 class="td--responsive heading-font">{{ 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"><a href="{{ contactpage }}" 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"><p><a href="https://example.com">Ga naar onze contactpagina</a></p>
</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>
<td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="tel:+14050" data-rel="external">Bel 14050</a></p></td>
</tr>
<tr class="tr-mail border-top">
<td class="td-mail border-top td__padding-zero" colspan="6">
Expand Down
30 changes: 27 additions & 3 deletions src/open_inwoner/static/mailcss/email.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ p {
margin: 0;
}

.heading-font, h1 {
.heading-font, h1, h2, h3, h4 {
color: #000000;
font-family: Ubuntu, Helvetica, Arial, sans-serif;
font-weight: bold;
Expand All @@ -44,13 +44,33 @@ td, .td-mail {

/* Class styles for differing elements */

.logo-mail {
.td-mail__bg-danger .td-mail__bg-white a {
color: #704000;
}

.td-mail__bg-info .td-mail__bg-white a, .td-mail__bg-info a, .td__info-link a {
color: #2566A7;
}

.td__logo-mail {
text-align: center;
padding-top: 16px;
}

.img__logo-mail {
width: auto;
max-height: 55px;
max-width: 600px;
}

.td-mail h1 {
font-size: 20px;
}

.td-mail h2 {
font-size: 18px;
}

.td-mail.align-top {
vertical-align: top;
}
Expand All @@ -65,7 +85,7 @@ td.align-center {

.td-mail.spacer-bottom {
border-bottom: 1px solid #d2d2d2;
padding-top: 80px;
padding-top: 60px;
}

.td-mail--accent {
Expand Down Expand Up @@ -118,6 +138,10 @@ td.align-center {
padding: 0;
}

.spacing__extra {
height: 20px;
}

/* Theme-colors and other mail-template colors */

.text-color__info {
Expand Down
6 changes: 3 additions & 3 deletions src/open_inwoner/templates/mail/_base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,9 +163,9 @@
<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="55" src="{{ logo.url }}" alt="" class="logo-mail">
<tr align="center">
<td class="td-mail td__logo-mail" colspan="6" align="center" >
<img height="55" src="{{ logo.url }}" alt="" class="img__logo-mail">
</td>
</tr>
<tr>
Expand Down

0 comments on commit de23c88

Please sign in to comment.