HTML e-mails for UserMailer (#6256)
- premailer gem to turn CSS into inline styles automatically - rework UserMailer templates - reword UserMailer templates
This commit is contained in:
Eugen Rochko
GitHub
parent
7861c5f108
commit
5276c0a090
104 changed files with 848 additions and 706 deletions
4
app/javascript/images/icon_email.svg
Normal file
4
app/javascript/images/icon_email.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 273 B |
4
app/javascript/images/icon_lock_open.svg
Normal file
4
app/javascript/images/icon_lock_open.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 395 B |
1
app/javascript/images/logo_transparent.svg
Normal file
1
app/javascript/images/logo_transparent.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><path d="M107.86523 0C78.203984.2425 49.672422 3.4535937 33.044922 11.089844c0 0-32.97656262 14.752031-32.97656262 65.082031 0 11.525-.224375 25.306175.140625 39.919925 1.19750002 49.22 9.02375002 97.72843 54.53124962 109.77343 20.9825 5.55375 38.99711 6.71547 53.505856 5.91797 26.31125-1.45875 41.08203-9.38867 41.08203-9.38867l-.86914-19.08984s-18.80171 5.92758-39.91796 5.20508c-20.921254-.7175-43.006879-2.25516-46.390629-27.94141-.3125-2.25625-.46875-4.66938-.46875-7.20313 0 0 20.536953 5.0204 46.564449 6.21289 15.915.73001 30.8393-.93343 45.99805-2.74218 29.07-3.47125 54.38125-21.3818 57.5625-37.74805 5.0125-25.78125 4.59961-62.916015 4.59961-62.916015 0-50.33-32.97461-65.082031-32.97461-65.082031C166.80539 3.4535938 138.255.2425 108.59375 0h-.72852zM74.296875 39.326172c12.355 0 21.710234 4.749297 27.896485 14.248047l6.01367 10.080078 6.01563-10.080078c6.185-9.49875 15.54023-14.248047 27.89648-14.248047 10.6775 0 19.28156 3.753672 25.85156 11.076172 6.36875 7.3225 9.53907 17.218828 9.53907 29.673828v60.941408h-24.14454V81.869141c0-12.46875-5.24453-18.798829-15.73828-18.798829-11.6025 0-17.41797 7.508516-17.41797 22.353516v32.375002H96.207031V85.423828c0-14.845-5.815468-22.353515-17.417969-22.353516-10.49375 0-15.740234 6.330079-15.740234 18.798829v59.148439H38.904297V80.076172c0-12.455 3.171016-22.351328 9.541015-29.673828 6.568751-7.3225 15.172813-11.076172 25.851563-11.076172z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
app/javascript/packs/mailer.js
Normal file
1
app/javascript/packs/mailer.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
require('../styles/mailer.scss');
|
||||
392
app/javascript/styles/mailer.scss
Normal file
392
app/javascript/styles/mailer.scss
Normal file
|
|
@ -0,0 +1,392 @@
|
|||
@import 'mastodon/variables';
|
||||
@import 'fonts/roboto';
|
||||
|
||||
table,
|
||||
td,
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100% !important;
|
||||
min-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.email_body {
|
||||
td,
|
||||
div,
|
||||
a,
|
||||
span {
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&,
|
||||
&:visited,
|
||||
span {
|
||||
text-decoration: none;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
#outlook & {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
outline: none;
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
clear: both;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
mso-table-lspace: 0;
|
||||
mso-table-rspace: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.email-table,
|
||||
.content-section,
|
||||
.column,
|
||||
.column-cell {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.email-body {
|
||||
font-size: 0 !important;
|
||||
line-height: 100%;
|
||||
text-align: center;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.email-start {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.email-end {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.email-body,
|
||||
html,
|
||||
body {
|
||||
background-color: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
.email-container,
|
||||
.email-row,
|
||||
.col-0,
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6, {
|
||||
font-size: 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
min-width: 0 !important;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.content-cell {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.column-cell {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
vertical-align: top;
|
||||
|
||||
&.button-cell {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.email-container {
|
||||
max-width: 632px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.email-row {
|
||||
display: block;
|
||||
max-width: 600px !important;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.col-0 {
|
||||
max-width: 50px;
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.column-cell,
|
||||
.column-cell td,
|
||||
p {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
|
||||
@media only screen {
|
||||
font-family: 'mastodon-font-sans-serif', sans-serif !important;
|
||||
}
|
||||
}
|
||||
|
||||
.email-body .column-cell,
|
||||
.column-cell,
|
||||
p {
|
||||
font-size: 15px;
|
||||
line-height: 23px;
|
||||
color: $ui-primary-color;
|
||||
mso-line-height-rule: exactly;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&.small {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&.lead {
|
||||
font-size: 19px;
|
||||
line-height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $ui-secondary-color;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 23px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 19px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.input {
|
||||
td {
|
||||
background: darken($ui-base-color, 8%);
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
line-height: 20px;
|
||||
mso-line-height-rule: exactly;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-cell,
|
||||
.blank-cell {
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.content-cell {
|
||||
background-color: darken($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-color: $ui-base-color;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
border-radius: 5px 5px 0 0;
|
||||
background-color: darken($ui-base-color, 8%);
|
||||
|
||||
.column-cell {
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-start {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.content-end {
|
||||
border-radius: 0 0 5px 5px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
.column-cell,
|
||||
p {
|
||||
color: lighten($ui-base-color, 26%);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: 13px;
|
||||
|
||||
&.small {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: lighten($ui-base-color, 26%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: relative;
|
||||
left: -4px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: table;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
td {
|
||||
line-height: 20px;
|
||||
mso-line-height-rule: exactly;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
padding: 0 !important;
|
||||
|
||||
a,
|
||||
a span {
|
||||
color: $primary-text-color;
|
||||
display: block !important;
|
||||
text-align: center !important;
|
||||
vertical-align: top !important;
|
||||
line-height: inherit !important;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 10px 22px !important;
|
||||
line-height: 26px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-default {
|
||||
background-color: darken($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.padded {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.hero-icon {
|
||||
width: 64px;
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 100%;
|
||||
mso-line-height-rule: exactly;
|
||||
padding: 16px;
|
||||
border-radius: 80px;
|
||||
background: $success-green;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: block;
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
|
||||
body {
|
||||
min-height: 1024px !important;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue