hyperzlib
/
nodebb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: #11572

Browse Source 
add width to emojis
isekai-main
Barış Soner Uşaklı 2 years ago
parent 9924fde6a2
commit 2910cb2b26
1 changed files with 54 additions and 49 deletions
Show Stats Download Patch File Download Diff File

103
src/views/emails/partials/header.tpl
Unescape Escape View File

@ -8,7 +8,7 @@
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. --> <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / @font-face : BEGIN --> <!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. --> <!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. --> <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]> <!--[if mso]>
@ -26,7 +26,7 @@
<!-- Web Font / @font-face : END --> <!-- Web Font / @font-face : END -->
<!-- CSS Reset --> <!-- CSS Reset -->
<style> <style>
/* What it does: Remove spaces around the email design added by some email clients. */ /* What it does: Remove spaces around the email design added by some email clients. */
@ -90,13 +90,13 @@
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */ /* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S { .a6S {
display: none !important; display: none !important;
opacity: 0.01 !important; opacity: 0.01 !important;
} }
/* If the above doesn't work, add a .g-img class to any image in question. */ /* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div { img.g-img + div {
display:none !important; display:none !important;
} }
/* What it does: Prevents underlining the button text in Windows 10 */ /* What it does: Prevents underlining the button text in Windows 10 */
.button-link { .button-link {
@ -132,56 +132,61 @@
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
/* What it does: Adjust typography on small screens to improve readability */ /* What it does: Adjust typography on small screens to improve readability */
.email-container p { .email-container p {
font-size: 17px !important; font-size: 17px !important;
line-height: 26px !important; line-height: 26px !important;
} }
}
}
.notification-body img { .notification-body img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
</style> /* https://github.com/NodeBB/NodeBB/issues/11572 */
img[src*="nodebb-plugin-emoji"] {
width: 23px;
height: auto;
vertical-align: top;
}
</style>
<!-- What it does: Makes background images in 72ppi Outlook render at correct size. --> <!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
<!--[if gte mso 9]> <!--[if gte mso 9]>
<xml> <xml>
<o:OfficeDocumentSettings> <o:OfficeDocumentSettings>
<o:AllowPNG/> <o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch> <o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings> </o:OfficeDocumentSettings>
</xml> </xml>
<![endif]--> <![endif]-->
</head> </head>
<body width="100%" bgcolor="#f6f6f6" style="margin: 0; mso-line-height-rule: exactly;"> <body width="100%" bgcolor="#f6f6f6" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #f6f6f6; text-align: left;"> <center style="width: 100%; background: #f6f6f6; text-align: left;">
<!-- <!--
Set the email width. Defined in two places: Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px. 1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
2. MSO tags for Desktop Windows Outlook enforce a 600px width. 2. MSO tags for Desktop Windows Outlook enforce a 600px width.
--> -->
<div style="max-width: 600px; margin: auto;{{{ if rtl }}} text-align: right; direction: rtl;{{{ end }}}" class="email-container"> <div style="max-width: 600px; margin: auto;{{{ if rtl }}} text-align: right; direction: rtl;{{{ end }}}" class="email-container">
<!--[if mso]> <!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" align="center"> <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr> <tr>
<td> <td>
<![endif]--> <![endif]-->
<!-- Email Header : BEGIN --> <!-- Email Header : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;"> <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
<tr> <tr>
<td style="padding: 20px 0; text-align: center"> <td style="padding: 20px 0; text-align: center">
{{{ if logo.src }}} {{{ if logo.src }}}
<img src="{logo.src}" height="auto" width="{logo.width}" alt="{site_title}" border="0" style="height: auto; width: {logo.width}px; background: #f6f6f6; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; font-size: 15px; line-height: 20px; color: #333333;"> <img src="{logo.src}" height="auto" width="{logo.width}" alt="{site_title}" border="0" style="height: auto; width: {logo.width}px; background: #f6f6f6; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; font-size: 15px; line-height: 20px; color: #333333;">
{{{ else }}} {{{ else }}}
&nbsp; &nbsp;
{{{ end }}} {{{ end }}}
</td> </td>
</tr> </tr>
</table> </table>
<!-- Email Header : END --> <!-- Email Header : END -->
Write Preview
Loading…
Cancel
Save