diff options
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | templates/email/default/_email_bottom.html | 22 | ||||
| -rw-r--r-- | templates/email/default/_email_settings.html | 9 | ||||
| -rw-r--r-- | templates/email/default/_email_top.html | 23 | ||||
| -rw-r--r-- | templates/email/fixamingata/_email_bottom.html | 22 |
5 files changed, 46 insertions, 31 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index c6bced606..15da61f35 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Front end improvements: - Improve questionnaire process. #1939 #1998 - Increase size of "sub map links" (hide pins, permalink, etc) #2003 + - Edge-to-edge email layout on narrow screens #2010 - Bugfixes: - Stop asset layers obscuring marker layer. #1999 - Don't delete hidden field values when inspecting reports. #1999 diff --git a/templates/email/default/_email_bottom.html b/templates/email/default/_email_bottom.html index 76e381201..0b2c0b697 100644 --- a/templates/email/default/_email_bottom.html +++ b/templates/email/default/_email_bottom.html @@ -1,17 +1,21 @@ </tr> - <tr> - <th colspan="[% email_columns %]" style="[% td_style %][% hint_style %]" class="hint"> - [%~ IF email_footer %] - [% email_footer %] - [%~ ELSE %] - This email was sent automatically, from an unmonitored email account. Please do not reply to it. - [%~ END %] - </th> - </tr> </table> </th> <th></th> </tr> </table> + <table [% wrapper_table %] style="[% wrapper_style %]"> + <tr> + <th></th> + <th width="[% wrapper_max_width %]" style="[% td_style %][% hint_style %]" class="hint"> + [%~ IF email_footer %] + [% email_footer %] + [%~ ELSE %] + This email was sent automatically, from an unmonitored email account. Please do not reply to it. + [%~ END %] + </th> + <th></th> + </tr> + </table> </body> </html> diff --git a/templates/email/default/_email_settings.html b/templates/email/default/_email_settings.html index 54abc2b50..f6db8334c 100644 --- a/templates/email/default/_email_settings.html +++ b/templates/email/default/_email_settings.html @@ -60,7 +60,7 @@ button_font_weight = "bold" # Variables used inside the email templates. table_reset = 'cellspacing="0" cellpadding="0" border="0" width="100%"' -wrapper_table = 'cellspacing="0" cellpadding="5" border="0" width="100%"' +wrapper_table = table_reset link_style = "color: $link_text_color;" link_hover_style = "text-decoration: none; color: $link_hover_text_color;" @@ -70,7 +70,12 @@ td_style = "font-family: $body_font_family; font-size: 16px; line-height: 21px; body_style = "margin: 0;" wrapper_style = "$td_style background: $body_background_color; color: $body_text_color;" -hint_style = "padding: ${ column_padding }px 0; color: $body_text_color; font-size: 12px; line-height: 18px;" +wrapper_max_width = 620 # in pixels without "px" suffix +wrapper_min_width = 520 # in pixels without "px" suffix + +hint_min_width = wrapper_min_width - (column_padding * 2) +hint_style = "min-width: ${ hint_min_width }px; padding: ${ column_padding }px; color: $body_text_color; font-size: 12px; line-height: 18px;" + header_style = "padding: $header_padding; background: $header_background_color; color: $header_text_color;" only_column_style = "padding: ${ column_padding }px; vertical-align: top; background-color: $primary_column_background_color; color: $primary_column_text_color;" diff --git a/templates/email/default/_email_top.html b/templates/email/default/_email_top.html index 102e23e59..d9e3becf2 100644 --- a/templates/email/default/_email_top.html +++ b/templates/email/default/_email_top.html @@ -22,14 +22,11 @@ font-family: [% body_font_family %] !important; } - [%~ # 550px = 5+5+5+520+5+5+5 %] - @media only screen and (max-width: 549px) { - #main { + @media only screen and (max-width: [% wrapper_min_width - 1 %]px) { + #main, .hint { min-width: 0 !important; } - } - @media only screen and (max-width: 500px) { #main table, #main tr, #main th { display: block !important; } @@ -45,14 +42,18 @@ <table [% wrapper_table %] style="[% wrapper_style %]"> <tr> <th></th> - <th width="620" style="[% td_style %] min-width: 520px;" id="main"> + <th width="[% wrapper_max_width %]" style="[% td_style %][% hint_style %]" class="hint"> + [% email_summary %] + </th> + <th></th> + </tr> + </table> + <table [% wrapper_table %] style="[% wrapper_style %]"> + <tr> + <th></th> + <th width="[% wrapper_max_width %]" style="[% td_style %] min-width: [% wrapper_min_width %]px;" id="main"> <table [% table_reset %]> <tr> - <th colspan="[% email_columns %]" style="[% td_style %][% hint_style %]" class="hint"> - [% email_summary %] - </th> - </tr> - <tr> <th colspan="[% email_columns %]" style="[% td_style %][% header_style %]"> [%~ IF file_exists("web/cobrands/${ img_dir }/images/email-logo.gif") ~%] <img src="[% inline_image('web/cobrands/' _ img_dir _ '/images/email-logo.gif') %]" width="[% logo_width %]" height="[% logo_height %]" alt="[% site_name %]" style="[% logo_style %]"/> diff --git a/templates/email/fixamingata/_email_bottom.html b/templates/email/fixamingata/_email_bottom.html index dab4486cd..0a8c95c1c 100644 --- a/templates/email/fixamingata/_email_bottom.html +++ b/templates/email/fixamingata/_email_bottom.html @@ -1,17 +1,21 @@ </tr> - <tr> - <th colspan="[% email_columns %]" style="[% td_style %][% hint_style %]" class="hint"> - [%~ IF email_footer %] - [% email_footer %] - [%~ ELSE %] - Det går inte att svara på detta mail - [%~ END %] - </th> - </tr> </table> </th> <th></th> </tr> </table> + <table [% wrapper_table %] style="[% wrapper_style %]"> + <tr> + <th></th> + <th width="[% wrapper_max_width %]" style="[% td_style %][% hint_style %]" class="hint"> + [%~ IF email_footer %] + [% email_footer %] + [%~ ELSE %] + Det går inte att svara på detta mail + [%~ END %] + </th> + <th></th> + </tr> + </table> </body> </html> |