shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(notif): Restyle HTML email notifications (#1864)

Browse Source
This commit is contained in:
tangentThought
2021-07-14 04:57:51 -07:00
committed by GitHub
parent 8a55f85d3e
commit badf0f5e28
1 changed files with 50 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
server/templates/email/media-request/html.pug
View File

@@ -5,7 +5,7 @@ head
meta(http-equiv='x-ua-compatible' content='ie=edge') meta(http-equiv='x-ua-compatible' content='ie=edge')
meta(name='viewport' content='width=device-width, initial-scale=1') meta(name='viewport' content='width=device-width, initial-scale=1')
meta(name='format-detection' content='telephone=no, date=no, address=no, email=no') meta(name='format-detection' content='telephone=no, date=no, address=no, email=no')
link(href='https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap' rel='stylesheet' media='screen') link(href='https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap' rel='stylesheet' media='screen')
//if mso //if mso
xml xml
o:officedocumentsettings o:officedocumentsettings
@@ -26,74 +26,56 @@ head
mso-line-height-rule: exactly; mso-line-height-rule: exactly;
} }
style. style.
@media (max-width: 600px) { .title:hover * {
.sm-w-full { text-decoration: underline;
}
@media only screen and (max-width:600px) {
table {
font-size: 20px !important;
width: 100% !important; width: 100% !important;
} }
} }
div(role='article' aria-roledescription='email' aria-label='' lang='en') div(style='display: block; background-color: #111827;')
table(style="\ table(style='margin: 0 auto; font-family: Inter, Arial, Sans-Serif; color: #fff; font-size: 16px; width: 26rem;')
background-color: #f2f4f6;\
font-family: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif;\
width: 100%;\
" width='100%' bgcolor='#f2f4f6' cellpadding='0' cellspacing='0' role='presentation')
tr tr
td(align='center') td(style="text-align: center;")
table(style='width: 100%' width='100%' cellpadding='0' cellspacing='0' role='presentation') a(href=applicationUrl)
tr img(src=applicationUrl +'/logo_full.svg' style='width: 26rem; padding: 1rem;')
td(align='center' style='\ tr
padding-top: 25px;\ td(style='text-align: center;')
padding-bottom: 25px;\ div(style='margin: 0rem 1rem 1rem; font-size: 1.25em;')
text-align: center;\ span
') | #{body}
a(href=applicationUrl style='\ tr
text-shadow: 0 1px 0 #ffffff;\ td
font-weight: 700;\ div(style='box-sizing: border-box; margin: 0; width: 100%; color: #fff; border-radius: .75rem; padding: 1rem; border: 1px solid rgba(100, 100, 100, 1); background: linear-gradient(135deg, rgba(17, 24, 39, 0.47) 0%, rgb(17, 24, 39) 75%), url(' + imageUrl + ') center 25%/cover')
font-size: 24px;\ table(style='color: #fff; width: 100%;')
color: #a8aaaf;\ tr
text-decoration: none;\ td(style='vertical-align: top;')
') a(href=actionUrl style='display: block; max-width: 20rem; color: #fff; font-weight: 700; text-decoration: none; margin: 0 1rem 0.25rem 0; font-size: 1.3em; line-height: 1.25em; margin-bottom: 5px;' class='title')
| #{applicationTitle} span
tr | #{mediaName}
td(style='width: 100%' width='100%') div(style='overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d1d5db; font-size: .975em; line-height: 1.45em; padding-top: .25rem; padding-bottom: .25rem;')
table.sm-w-full(align='center' style='\ span(style='display: block;')
background-color: #ffffff;\ b(style='color: #9ca3af; font-weight: 700;')
margin-left: auto;\ | Requested By 
margin-right: auto;\ | #{requestedBy}
width: 570px;\ each extra in mediaExtra
' width='570' bgcolor='#ffffff' cellpadding='0' cellspacing='0' role='presentation') span(style='display: block;')
tr b(style='color: #9ca3af; font-weight: 700;')
td(style='padding: 45px') | #{extra.name} 
div(style='font-size: 16px') | #{extra.value}
| #{body} td(rowspan='2' style='width: 7rem;')
br a(style='display: block; width: 7rem; overflow: hidden; border-radius: .375rem;' href=actionUrl)
br div(style='overflow: hidden; box-sizing: border-box; margin: 0px;')
p(style='margin-top: 4px; text-align: center') img(alt='' src=imageUrl style='box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;')
b tr
| #{mediaName} td(style='font-size: .85em; color: #9ca3af; line-height: 1em; vertical-align: bottom; margin-right: 1rem')
each extra in mediaExtra span
br | #{timestamp}
| #{extra.name}:  if actionUrl
| #{extra.value} tr
table(align='center' cellpadding='0' cellspacing='0' role='presentation') td
tr a(href=actionUrl style='display: block; margin: 1.5rem 3rem 2.5rem 3rem; text-decoration: none; font-size: 1.0em; line-height: 2.25em;')
td(style='text-align: center') span(style='padding: 0.2rem; font-weight: 500; text-align: center; border-radius: 10px; background-color: rgb(99,102,241); color: #fff; display: block; border: 1px solid rgba(255, 255, 255, 0.2);')
a(href=actionUrl style='color: #3869d4') | Open in #{applicationTitle}
img(src=imageUrl alt='' style='max-width: 50%')
p(style='\
font-size: 16px;\
line-height: 24px;\
margin-top: 6px;\
margin-bottom: 20px;\
color: #51545e;\
')
| Requested by #{requestedBy} at #{timestamp}
p(style='\
font-size: 13px;\
line-height: 24px;\
margin-top: 6px;\
margin-bottom: 20px;\
color: #51545e;\
')
if actionUrl
a(href=actionUrl style='color: #3869d4') Open in #{applicationTitle}