Skip to content
Snippets Groups Projects
Unverified Commit 872a0d5b authored by Eugen Rochko's avatar Eugen Rochko Committed by GitHub
Browse files

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
parent 01421999
No related branches found
No related tags found
No related merge requests found
Showing
with 45 additions and 16 deletions
app/javascript/images/mailer/icon_cached.png

754 B

app/javascript/images/mailer/icon_done.png

279 B

app/javascript/images/mailer/icon_email.png

520 B

app/javascript/images/mailer/icon_grade.png

541 B

app/javascript/images/mailer/icon_lock_open.png

550 B

app/javascript/images/mailer/icon_person_add.png

512 B

app/javascript/images/mailer/icon_reply.png

391 B

app/javascript/images/mailer/logo_full.png

2.98 KiB

app/javascript/images/mailer/logo_transparent.png

627 B

......@@ -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;
}
}
......@@ -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
......@@ -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)
......
......@@ -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)
......
......@@ -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)
......
......@@ -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)
......
......@@ -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)
......
......@@ -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'
......
......@@ -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'
......
......@@ -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'
......
......@@ -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'
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment