diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2018-01-20 01:32:21 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-01-20 01:32:21 +0100 |
commit | 872a0d5bd801c998d911f7da582a60d2f714a710 (patch) | |
tree | ca4fee834e05c620b46c1660a579828d1c397193 /app | |
parent | 01421999aeee60c1bb24a8509a9d1b9ebe34b4d9 (diff) |
Improve HTML e-mails based on Litmus tests (#6301)
* Use PNG images in HTML e-mails * Make webpack use URLs with host so fonts load inside HTML e-mails Convert this back to a relative URL in the premailer CSS loader since local requests are quicker * Improve responsive design * Add missing PNG icon
Diffstat (limited to 'app')
22 files changed, 52 insertions, 23 deletions
diff --git a/app/javascript/images/mailer/icon_cached.png b/app/javascript/images/mailer/icon_cached.png new file mode 100644 index 000000000..e62c064c8 --- /dev/null +++ b/app/javascript/images/mailer/icon_cached.png Binary files differdiff --git a/app/javascript/images/mailer/icon_done.png b/app/javascript/images/mailer/icon_done.png new file mode 100644 index 000000000..0d2ef0cb8 --- /dev/null +++ b/app/javascript/images/mailer/icon_done.png Binary files differdiff --git a/app/javascript/images/mailer/icon_email.png b/app/javascript/images/mailer/icon_email.png new file mode 100644 index 000000000..aae9d2bb9 --- /dev/null +++ b/app/javascript/images/mailer/icon_email.png Binary files differdiff --git a/app/javascript/images/mailer/icon_grade.png b/app/javascript/images/mailer/icon_grade.png new file mode 100644 index 000000000..895b57d0a --- /dev/null +++ b/app/javascript/images/mailer/icon_grade.png Binary files differdiff --git a/app/javascript/images/mailer/icon_lock_open.png b/app/javascript/images/mailer/icon_lock_open.png new file mode 100644 index 000000000..9f62eadc2 --- /dev/null +++ b/app/javascript/images/mailer/icon_lock_open.png Binary files differdiff --git a/app/javascript/images/mailer/icon_person_add.png b/app/javascript/images/mailer/icon_person_add.png new file mode 100644 index 000000000..3453060ae --- /dev/null +++ b/app/javascript/images/mailer/icon_person_add.png Binary files differdiff --git a/app/javascript/images/mailer/icon_reply.png b/app/javascript/images/mailer/icon_reply.png new file mode 100644 index 000000000..8bce4955c --- /dev/null +++ b/app/javascript/images/mailer/icon_reply.png Binary files differdiff --git a/app/javascript/images/mailer/logo_full.png b/app/javascript/images/mailer/logo_full.png new file mode 100644 index 000000000..1c4f33287 --- /dev/null +++ b/app/javascript/images/mailer/logo_full.png Binary files differdiff --git a/app/javascript/images/mailer/logo_transparent.png b/app/javascript/images/mailer/logo_transparent.png new file mode 100644 index 000000000..8fda4f67f --- /dev/null +++ b/app/javascript/images/mailer/logo_transparent.png Binary files differdiff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss index b3bcc9209..dbe070f9a 100644 --- a/app/javascript/styles/mailer.scss +++ b/app/javascript/styles/mailer.scss @@ -17,7 +17,7 @@ body { -ms-text-size-adjust: 100%; } -.email_body { +.email-body { td, div, a, @@ -235,6 +235,12 @@ h5 { color: lighten($ui-base-color, 34%); } +.input-cell { + h5 { + margin-top: 4px; + } +} + .input { td { background: darken($ui-base-color, 8%); @@ -512,3 +518,29 @@ ul { min-height: 1024px !important; } } + +@media (max-width: 697px) { + .email-container, + .col-1, + .col-2, + .col-3, + .col-4, + .col-5, + .col-6 { + width: 100% !important; + max-width: none !important; + } + + .email-start { + padding-top: 16px !important; + } + + .email-end { + padding-bottom: 16px !important; + } + + .padded { + padding-left: 0 !important; + padding-right: 0 !important; + } +} diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml index e41b91069..6687546fb 100644 --- a/app/views/layouts/mailer.html.haml +++ b/app/views/layouts/mailer.html.haml @@ -24,7 +24,7 @@ %tr %td.column-cell = link_to root_url do - = image_tag full_pack_url('logo_full.svg'), alt: 'Mastodon', height: 34, class: 'logo' + = image_tag full_pack_url('logo_full.png'), alt: 'Mastodon', height: 34, class: 'logo' = yield @@ -41,15 +41,12 @@ %tr %td.blank-cell.footer .email-row - .col-4 + .col-6 %table.column{ cellspacing: 0, cellpadding: 0 } %tbody %td.column-cell %p= t 'about.hosted_on', domain: site_hostname %p= link_to t('application_mailer.notification_preferences'), settings_notifications_url - .col-2 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody %td.column-cell.text-right = link_to root_url do - = image_tag full_pack_url('logo_transparent.svg'), alt: 'Mastodon', height: 24 + = image_tag full_pack_url('logo_transparent.png'), alt: 'Mastodon', height: 24 diff --git a/app/views/notification_mailer/favourite.html.haml b/app/views/notification_mailer/favourite.html.haml index f26b08b18..7d1b494d0 100644 --- a/app/views/notification_mailer/favourite.html.haml +++ b/app/views/notification_mailer/favourite.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_grade.svg'), alt:'' + = image_tag full_pack_url('icon_grade.png'), alt:'' %h1= t 'notification_mailer.favourite.title' %p.lead= t('notification_mailer.favourite.body', name: @account.acct) diff --git a/app/views/notification_mailer/follow.html.haml b/app/views/notification_mailer/follow.html.haml index 1290e2bc4..31a2b7445 100644 --- a/app/views/notification_mailer/follow.html.haml +++ b/app/views/notification_mailer/follow.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_person_add.svg'), alt: '' + = image_tag full_pack_url('icon_person_add.png'), alt: '' %h1= t 'notification_mailer.follow.title' %p.lead= t('notification_mailer.follow.body', name: @account.acct) diff --git a/app/views/notification_mailer/follow_request.html.haml b/app/views/notification_mailer/follow_request.html.haml index 41efeafaf..44f1911c4 100644 --- a/app/views/notification_mailer/follow_request.html.haml +++ b/app/views/notification_mailer/follow_request.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_person_add.svg'), alt: '' + = image_tag full_pack_url('icon_person_add.png'), alt: '' %h1= t 'notification_mailer.follow_request.title' %p.lead= t('notification_mailer.follow_request.body', name: @account.acct) diff --git a/app/views/notification_mailer/mention.html.haml b/app/views/notification_mailer/mention.html.haml index 619c580ce..479fed41c 100644 --- a/app/views/notification_mailer/mention.html.haml +++ b/app/views/notification_mailer/mention.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_reply.svg'), alt: '' + = image_tag full_pack_url('icon_reply.png'), alt: '' %h1= t 'notification_mailer.mention.title' %p.lead= t('notification_mailer.mention.body', name: @status.account.acct) diff --git a/app/views/notification_mailer/reblog.html.haml b/app/views/notification_mailer/reblog.html.haml index 61c6ee6be..85b202cf9 100644 --- a/app/views/notification_mailer/reblog.html.haml +++ b/app/views/notification_mailer/reblog.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_cached.svg'), alt: '' + = image_tag full_pack_url('icon_cached.png'), alt: '' %h1= t 'notification_mailer.reblog.title' %p.lead= t('notification_mailer.reblog.body', name: @account.acct) diff --git a/app/views/user_mailer/confirmation_instructions.html.haml b/app/views/user_mailer/confirmation_instructions.html.haml index 0f999bcbc..1f088a16f 100644 --- a/app/views/user_mailer/confirmation_instructions.html.haml +++ b/app/views/user_mailer/confirmation_instructions.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_email.svg'), alt: '' + = image_tag full_pack_url('icon_email.png'), alt: '' %h1= t 'devise.mailer.confirmation_instructions.title' diff --git a/app/views/user_mailer/email_changed.html.haml b/app/views/user_mailer/email_changed.html.haml index 45dc06650..7e82f23e4 100644 --- a/app/views/user_mailer/email_changed.html.haml +++ b/app/views/user_mailer/email_changed.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_email.svg'), alt: '' + = image_tag full_pack_url('icon_email.png'), alt: '' %h1= t 'devise.mailer.email_changed.title' %p.lead= t 'devise.mailer.email_changed.explanation' diff --git a/app/views/user_mailer/password_change.html.haml b/app/views/user_mailer/password_change.html.haml index 2e9377dff..26314a217 100644 --- a/app/views/user_mailer/password_change.html.haml +++ b/app/views/user_mailer/password_change.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_lock_open.svg'), alt: '' + = image_tag full_pack_url('icon_lock_open.png'), alt: '' %h1= t 'devise.mailer.password_change.title' %p.lead= t 'devise.mailer.password_change.explanation' diff --git a/app/views/user_mailer/reconfirmation_instructions.html.haml b/app/views/user_mailer/reconfirmation_instructions.html.haml index 3ae226093..e3be8e295 100644 --- a/app/views/user_mailer/reconfirmation_instructions.html.haml +++ b/app/views/user_mailer/reconfirmation_instructions.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_email.svg'), alt: '' + = image_tag full_pack_url('icon_email.png'), alt: '' %h1= t 'devise.mailer.reconfirmation_instructions.title' %p.lead= t 'devise.mailer.reconfirmation_instructions.explanation' diff --git a/app/views/user_mailer/reset_password_instructions.html.haml b/app/views/user_mailer/reset_password_instructions.html.haml index c0e6775d4..5d9ce6a75 100644 --- a/app/views/user_mailer/reset_password_instructions.html.haml +++ b/app/views/user_mailer/reset_password_instructions.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_lock_open.svg'), alt: '' + = image_tag full_pack_url('icon_lock_open.png'), alt: '' %h1= t 'devise.mailer.reset_password_instructions.title' %p.lead= t 'devise.mailer.reset_password_instructions.explanation' diff --git a/app/views/user_mailer/welcome.html.haml b/app/views/user_mailer/welcome.html.haml index 0823efa1a..d734da67d 100644 --- a/app/views/user_mailer/welcome.html.haml +++ b/app/views/user_mailer/welcome.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_done.svg'), alt: '' + = image_tag full_pack_url('icon_done.png'), alt: '' %h1= t 'user_mailer.welcome.title', name: @resource.account.username %p.lead= t 'user_mailer.welcome.explanation' @@ -30,7 +30,7 @@ %table.content-section{ cellspacing: 0, cellpadding: 0 } %tbody %tr - %td.content-cell + %td.content-cell.content-start .email-row .col-3 %table.column{ cellspacing: 0, cellpadding: 0 } @@ -46,7 +46,7 @@ %table.column{ cellspacing: 0, cellpadding: 0 } %tbody %tr - %td.column-cell.content-start + %td.column-cell %p= t 'user_mailer.welcome.full_handle_hint', instance: @instance %table.email-table{ cellspacing: 0, cellpadding: 0 } @@ -69,7 +69,7 @@ %table.column{ cellspacing: 0, cellpadding: 0 } %tbody %tr - %td.column-cell + %td.column-cell.padded %table.button.button-small{ align: 'left', cellspacing: 0, cellpadding: 0 } %tbody %tr @@ -89,7 +89,7 @@ %table.column{ cellspacing: 0, cellpadding: 0 } %tbody %tr - %td.column-cell + %td.column-cell.padded %table.button.button-small{ align: 'left', cellspacing: 0, cellpadding: 0 } %tbody %tr @@ -109,7 +109,7 @@ %table.column{ cellspacing: 0, cellpadding: 0 } %tbody %tr - %td.column-cell + %td.column-cell.padded %table.button.button-small{ align: 'left', cellspacing: 0, cellpadding: 0 } %tbody %tr |