Fixed issue with email template in Outlook (#16486)

Refs https://github.com/TryGhost/Team/issues/2801

- It was not possible to click latest post links in Outlook due to <a>
tag wrapping around a table
- The post meta data wouldn't display properly when centered in Outlook

---------

Co-authored-by: Simon Backx <simon@ghost.org>
This commit is contained in:
Sanne de Vries 2023-03-24 14:54:16 +01:00 committed by GitHub
parent 751f7d5278
commit 387dfa59c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 625 additions and 437 deletions

View File

@ -2322,14 +2322,13 @@ p.gh-members-import-errordetail:first-of-type {
}
.gh-members-emailpreview-latest-post-image {
border-radius: var(--border-radius);
width: 100%;
max-width: 120px;
max-width: 100px;
height: auto;
background: transparent;
background-repeat: no-repeat;
background-size: cover;
aspect-ratio: 5 / 4;
aspect-ratio: 1 / 1;
}
.gh-members-emailpreview-latest-post h4 {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -239,23 +239,26 @@ table.body .post-meta-date {
table.body .post-meta,
table.body .view-online {
display: inline-block;
width: 100% !important;
}
table.body .post-meta-left {
display: inline-block !important;
table.body .post-meta-left,
table.body .post-meta-left.view-online {
width: 100% !important;
text-align: left !important;
}
table.body .post-meta-left.view-online {
display: inline-block !important;
width: 100% !important;
table.body .post-meta.view-online-mobile {
display: table-row !important;
}
table.body .post-meta-left.view-online-mobile,
table.body .post-meta-left.view-online-mobile .view-online {
text-align: left !important;
}
table.body .post-meta.author-date {
width: 100%;
table.body .post-meta.view-online.desktop {
display: none !important;
}
table.body .view-online {
@ -292,11 +295,6 @@ table.body .footer a {
font-size: 14px !important;
}
table.body .latest-post a {
height: auto !important;
padding: 0 !important;
}
table.body .latest-post-img {
display: none !important;
}
@ -508,16 +506,21 @@ table.body figcaption a {
</td>
</tr>
<tr>
<td style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
<td style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #15212A; width: 100%;\\" width=\\"100%\\" valign=\\"top\\">
<table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; padding-bottom: 48px;\\">
<tr>
<td class=\\"post-meta post-meta-center author-date\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; display: inline-block; width: 100%;\\" width=\\"100%\\" valign=\\"top\\" align=\\"center\\">
<td height=\\"20\\" class=\\"post-meta post-meta-center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; padding: 0;\\" valign=\\"top\\" align=\\"center\\">
By Joe Bloggs &#x2022; <span class=\\"post-meta-date\\" style=\\"white-space: nowrap;\\">1 Jan 1970 </span>
</td>
<td class=\\"post-meta post-meta-center view-online\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; display: inline-block; text-align: center; text-decoration: underline; width: 100%;\\" width=\\"100%\\" valign=\\"top\\" align=\\"center\\">
<td class=\\"post-meta post-meta-center view-online desktop\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; display: none;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"view-online-link\\" style=\\"text-decoration: none; word-wrap: none; white-space: nowrap; color: #738a94; overflow-wrap: anywhere;\\" target=\\"_blank\\">View in browser</a>
</td>
</tr>
<tr class=\\"post-meta post-meta-center view-online-mobile\\" style=\\"color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center;\\" align=\\"center\\">
<td height=\\"20\\" class=\\"view-online\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; text-decoration: underline;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"view-online-link\\" style=\\"word-wrap: none; white-space: nowrap; color: #738a94; overflow-wrap: anywhere; text-decoration: underline;\\" target=\\"_blank\\">View in browser</a>
</td>
</tr>
</table>
</td>
</tr>
@ -649,6 +652,11 @@ View in browser [http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/]
View in browser [http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/]
@ -711,7 +719,7 @@ exports[`Email Preview API Read can read post email preview with email card and
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "22062",
"content-length": "23232",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -864,23 +872,26 @@ table.body .post-meta-date {
table.body .post-meta,
table.body .view-online {
display: inline-block;
width: 100% !important;
}
table.body .post-meta-left {
display: inline-block !important;
table.body .post-meta-left,
table.body .post-meta-left.view-online {
width: 100% !important;
text-align: left !important;
}
table.body .post-meta-left.view-online {
display: inline-block !important;
width: 100% !important;
table.body .post-meta.view-online-mobile {
display: table-row !important;
}
table.body .post-meta-left.view-online-mobile,
table.body .post-meta-left.view-online-mobile .view-online {
text-align: left !important;
}
table.body .post-meta.author-date {
width: 100%;
table.body .post-meta.view-online.desktop {
display: none !important;
}
table.body .view-online {
@ -917,11 +928,6 @@ table.body .footer a {
font-size: 14px !important;
}
table.body .latest-post a {
height: auto !important;
padding: 0 !important;
}
table.body .latest-post-img {
display: none !important;
}
@ -1133,16 +1139,21 @@ table.body figcaption a {
</td>
</tr>
<tr>
<td style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
<td style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #15212A; width: 100%;\\" width=\\"100%\\" valign=\\"top\\">
<table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; padding-bottom: 48px;\\">
<tr>
<td class=\\"post-meta post-meta-center author-date\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; display: inline-block; width: 100%;\\" width=\\"100%\\" valign=\\"top\\" align=\\"center\\">
<td height=\\"20\\" class=\\"post-meta post-meta-center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; padding: 0;\\" valign=\\"top\\" align=\\"center\\">
By Joe Bloggs &#x2022; <span class=\\"post-meta-date\\" style=\\"white-space: nowrap;\\">1 Jan 2015 </span>
</td>
<td class=\\"post-meta post-meta-center view-online\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; display: inline-block; text-align: center; text-decoration: underline; width: 100%;\\" width=\\"100%\\" valign=\\"top\\" align=\\"center\\">
<td class=\\"post-meta post-meta-center view-online desktop\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; display: none;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/html-ipsum/\\" class=\\"view-online-link\\" style=\\"text-decoration: none; word-wrap: none; white-space: nowrap; color: #738a94; overflow-wrap: anywhere;\\" target=\\"_blank\\">View in browser</a>
</td>
</tr>
<tr class=\\"post-meta post-meta-center view-online-mobile\\" style=\\"color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center;\\" align=\\"center\\">
<td height=\\"20\\" class=\\"view-online\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; text-decoration: underline;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/html-ipsum/\\" class=\\"view-online-link\\" style=\\"word-wrap: none; white-space: nowrap; color: #738a94; overflow-wrap: anywhere; text-decoration: underline;\\" target=\\"_blank\\">View in browser</a>
</td>
</tr>
</table>
</td>
</tr>
@ -1278,6 +1289,11 @@ View in browser [http://127.0.0.1:2369/html-ipsum/]
View in browser [http://127.0.0.1:2369/html-ipsum/]
@ -1356,7 +1372,7 @@ exports[`Email Preview API Read can read post email preview with fields 4: [head
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "26885",
"content-length": "27999",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -1540,23 +1556,26 @@ table.body .post-meta-date {
table.body .post-meta,
table.body .view-online {
display: inline-block;
width: 100% !important;
}
table.body .post-meta-left {
display: inline-block !important;
table.body .post-meta-left,
table.body .post-meta-left.view-online {
width: 100% !important;
text-align: left !important;
}
table.body .post-meta-left.view-online {
display: inline-block !important;
width: 100% !important;
table.body .post-meta.view-online-mobile {
display: table-row !important;
}
table.body .post-meta-left.view-online-mobile,
table.body .post-meta-left.view-online-mobile .view-online {
text-align: left !important;
}
table.body .post-meta.author-date {
width: 100%;
table.body .post-meta.view-online.desktop {
display: none !important;
}
table.body .view-online {
@ -1593,11 +1612,6 @@ table.body .footer a {
font-size: 14px !important;
}
table.body .latest-post a {
height: auto !important;
padding: 0 !important;
}
table.body .latest-post-img {
display: none !important;
}
@ -1809,16 +1823,21 @@ table.body figcaption a {
</td>
</tr>
<tr>
<td style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
<td style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #15212A; width: 100%;\\" width=\\"100%\\" valign=\\"top\\">
<table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; padding-bottom: 48px;\\">
<tr>
<td class=\\"post-meta post-meta-center author-date\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; display: inline-block; width: 100%;\\" width=\\"100%\\" valign=\\"top\\" align=\\"center\\">
<td height=\\"20\\" class=\\"post-meta post-meta-center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; padding: 0;\\" valign=\\"top\\" align=\\"center\\">
By Joe Bloggs &#x2022; <span class=\\"post-meta-date\\" style=\\"white-space: nowrap;\\">1 Jan 1970 </span>
</td>
<td class=\\"post-meta post-meta-center view-online\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; display: inline-block; text-align: center; text-decoration: underline; width: 100%;\\" width=\\"100%\\" valign=\\"top\\" align=\\"center\\">
<td class=\\"post-meta post-meta-center view-online desktop\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; display: none;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"view-online-link\\" style=\\"text-decoration: none; word-wrap: none; white-space: nowrap; color: #738a94; overflow-wrap: anywhere;\\" target=\\"_blank\\">View in browser</a>
</td>
</tr>
<tr class=\\"post-meta post-meta-center view-online-mobile\\" style=\\"color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center;\\" align=\\"center\\">
<td height=\\"20\\" class=\\"view-online\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; text-decoration: underline;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"view-online-link\\" style=\\"word-wrap: none; white-space: nowrap; color: #738a94; overflow-wrap: anywhere; text-decoration: underline;\\" target=\\"_blank\\">View in browser</a>
</td>
</tr>
</table>
</td>
</tr>
@ -1950,6 +1969,11 @@ View in browser [http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/]
View in browser [http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/]
@ -2019,7 +2043,7 @@ exports[`Email Preview API Read has custom content transformations for email com
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "21828",
"content-length": "22998",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -2532,23 +2556,26 @@ table.body .post-meta-date {
table.body .post-meta,
table.body .view-online {
display: inline-block;
width: 100% !important;
}
table.body .post-meta-left {
display: inline-block !important;
table.body .post-meta-left,
table.body .post-meta-left.view-online {
width: 100% !important;
text-align: left !important;
}
table.body .post-meta-left.view-online {
display: inline-block !important;
width: 100% !important;
table.body .post-meta.view-online-mobile {
display: table-row !important;
}
table.body .post-meta-left.view-online-mobile,
table.body .post-meta-left.view-online-mobile .view-online {
text-align: left !important;
}
table.body .post-meta.author-date {
width: 100%;
table.body .post-meta.view-online.desktop {
display: none !important;
}
table.body .view-online {
@ -2585,11 +2612,6 @@ table.body .footer a {
font-size: 14px !important;
}
table.body .latest-post a {
height: auto !important;
padding: 0 !important;
}
table.body .latest-post-img {
display: none !important;
}
@ -2806,16 +2828,21 @@ table.body figcaption a {
</td>
</tr>
<tr>
<td style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
<td style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #15212A; width: 100%;\\" width=\\"100%\\" valign=\\"top\\">
<table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; padding-bottom: 48px;\\">
<tr>
<td class=\\"post-meta post-meta-center author-date\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; display: inline-block; width: 100%;\\" width=\\"100%\\" valign=\\"top\\" align=\\"center\\">
<td height=\\"20\\" class=\\"post-meta post-meta-center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; padding: 0;\\" valign=\\"top\\" align=\\"center\\">
By Joe Bloggs &#x2022; <span class=\\"post-meta-date\\" style=\\"white-space: nowrap;\\">1 Jan 1970 </span>
</td>
<td class=\\"post-meta post-meta-center view-online\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; display: inline-block; text-align: center; text-decoration: underline; width: 100%;\\" width=\\"100%\\" valign=\\"top\\" align=\\"center\\">
<td class=\\"post-meta post-meta-center view-online desktop\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; display: none;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"view-online-link\\" style=\\"text-decoration: none; word-wrap: none; white-space: nowrap; color: #738a94; overflow-wrap: anywhere;\\" target=\\"_blank\\">View in browser</a>
</td>
</tr>
<tr class=\\"post-meta post-meta-center view-online-mobile\\" style=\\"color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center;\\" align=\\"center\\">
<td height=\\"20\\" class=\\"view-online\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; text-decoration: underline;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"view-online-link\\" style=\\"word-wrap: none; white-space: nowrap; color: #738a94; overflow-wrap: anywhere; text-decoration: underline;\\" target=\\"_blank\\">View in browser</a>
</td>
</tr>
</table>
</td>
</tr>
@ -2952,6 +2979,11 @@ View in browser [http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/]
View in browser [http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/]
@ -3021,7 +3053,7 @@ exports[`Email Preview API Read uses the newsletter provided through ?newsletter
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "22320",
"content-length": "23490",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -3560,23 +3592,26 @@ table.body .post-meta-date {
table.body .post-meta,
table.body .view-online {
display: inline-block;
width: 100% !important;
}
table.body .post-meta-left {
display: inline-block !important;
table.body .post-meta-left,
table.body .post-meta-left.view-online {
width: 100% !important;
text-align: left !important;
}
table.body .post-meta-left.view-online {
display: inline-block !important;
width: 100% !important;
table.body .post-meta.view-online-mobile {
display: table-row !important;
}
table.body .post-meta-left.view-online-mobile,
table.body .post-meta-left.view-online-mobile .view-online {
text-align: left !important;
}
table.body .post-meta.author-date {
width: 100%;
table.body .post-meta.view-online.desktop {
display: none !important;
}
table.body .view-online {
@ -3613,11 +3648,6 @@ table.body .footer a {
font-size: 14px !important;
}
table.body .latest-post a {
height: auto !important;
padding: 0 !important;
}
table.body .latest-post-img {
display: none !important;
}
@ -3834,16 +3864,21 @@ table.body figcaption a {
</td>
</tr>
<tr>
<td style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
<td style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #15212A; width: 100%;\\" width=\\"100%\\" valign=\\"top\\">
<table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; padding-bottom: 48px;\\">
<tr>
<td class=\\"post-meta post-meta-center author-date\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; display: inline-block; width: 100%;\\" width=\\"100%\\" valign=\\"top\\" align=\\"center\\">
<td height=\\"20\\" class=\\"post-meta post-meta-center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; padding: 0;\\" valign=\\"top\\" align=\\"center\\">
By Joe Bloggs &#x2022; <span class=\\"post-meta-date\\" style=\\"white-space: nowrap;\\">1 Jan 1970 </span>
</td>
<td class=\\"post-meta post-meta-center view-online\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; display: inline-block; text-align: center; text-decoration: underline; width: 100%;\\" width=\\"100%\\" valign=\\"top\\" align=\\"center\\">
<td class=\\"post-meta post-meta-center view-online desktop\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; display: none;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"view-online-link\\" style=\\"text-decoration: none; word-wrap: none; white-space: nowrap; color: #738a94; overflow-wrap: anywhere;\\" target=\\"_blank\\">View in browser</a>
</td>
</tr>
<tr class=\\"post-meta post-meta-center view-online-mobile\\" style=\\"color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center;\\" align=\\"center\\">
<td height=\\"20\\" class=\\"view-online\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; color: #738a94; font-size: 13px; letter-spacing: 0.1px; text-align: center; text-decoration: underline;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"view-online-link\\" style=\\"word-wrap: none; white-space: nowrap; color: #738a94; overflow-wrap: anywhere; text-decoration: underline;\\" target=\\"_blank\\">View in browser</a>
</td>
</tr>
</table>
</td>
</tr>
@ -3980,6 +4015,11 @@ View in browser [http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/]
View in browser [http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/]
@ -4049,7 +4089,7 @@ exports[`Email Preview API Read uses the posts newsletter by default 4: [headers
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "22320",
"content-length": "23490",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,

View File

@ -2,12 +2,12 @@
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="latest-post">
<a href="{{url}}" style="{{#if ../latestPostsHasImages}}{{#if featureImage}}height: 100px;{{else}}padding-bottom: 12px;{{/if}}{{/if}}">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
{{#if ../latestPostsHasImages}}
{{#if featureImage}}
<td class="latest-post-img-mobile">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
{{#if ../latestPostsHasImages}}
{{#if featureImage}}
<td class="latest-post-img-mobile">
<a href="{{url}}">
<img
src="{{featureImageMobile.src}}"
{{#if featureImageMobile.width }}
@ -17,18 +17,24 @@
height="{{featureImageMobile.height}}"
{{/if}}
/>
</td>
{{/if}}
</a>
</td>
{{/if}}
<td valign="top" align="left" class="latest-post-title">
<h4 class="{{#if ../latestPostsHasImages}}{{#if (not featureImage)}}no-image{{/if}}{{/if}}">{{{title}}}</h4>
{{#if excerpt}}
<p>{{{excerpt}}}</p>
{{/if}}
</td>
{{#if ../latestPostsHasImages}}
{{#if featureImage}}
<td width="100" class="latest-post-img">
{{/if}}
<td valign="top" align="left" class="latest-post-title">
<h4 class="{{#if ../latestPostsHasImages}}{{#if (not featureImage)}}no-image{{/if}}{{/if}}">
<a href="{{url}}">{{{title}}}</a>
</h4>
{{#if excerpt}}
<p>
<a href="{{url}}">{{{excerpt}}}</a>
</p>
{{/if}}
</td>
{{#if ../latestPostsHasImages}}
{{#if featureImage}}
<td width="100" class="latest-post-img">
<a href="{{url}}">
<img
src="{{featureImage.src}}"
{{#if featureImage.width }}
@ -38,12 +44,12 @@
height="{{featureImage.height}}"
{{/if}}
/>
</td>
{{/if}}
</a>
</td>
{{/if}}
</tr>
</table>
</a>
{{/if}}
</tr>
</table>
</td>
</tr>
</table>

View File

@ -360,26 +360,27 @@ figure blockquote p {
font-size: 13px;
letter-spacing: 0.1px;
text-align: center;
display: inline-block;
width: 100% !important;
}
.view-online {
text-align: center;
}
.post-meta-left {
display: table-cell;
text-align: left;
}
.post-meta-left.view-online-mobile {
display: none !important;
}
.post-meta-left.view-online {
display: table-cell;
text-align: right;
}
.post-meta-center.view-online {
text-decoration: underline;
display: none !important;
}
.post-meta-center .view-online,
.post-meta-center .view-online a {
text-decoration: underline !important;
}
.post-meta-date {
@ -465,7 +466,12 @@ figure blockquote p {
}
.latest-post a {
text-decoration: none !important;
}
.latest-post-img a {
display: block;
height: 100px;
overflow: hidden;
color: inherit;
text-decoration: none;
@ -496,6 +502,14 @@ figure blockquote p {
font-weight: 700;
}
.latest-post h4.no-image {
padding: 12px 0 4px;
}
.latest-post h4 a {
color: #15212A !important;
}
.latest-post p {
margin: 0;
padding: 0;
@ -504,8 +518,8 @@ figure blockquote p {
font-weight: 400;
}
.latest-post h4.no-image {
padding: 12px 0 4px;
.latest-post p a {
color: #738a94 !important;
}
/* -------------------------------------
@ -1155,23 +1169,26 @@ a[data-flickr-embed] img {
table.body .post-meta,
table.body .view-online {
display: inline-block;
}
table.body .post-meta-left {
display: inline-block !important;
width: 100% !important;
text-align: left !important;
}
table.body .post-meta-left,
table.body .post-meta-left.view-online {
display: inline-block !important;
width: 100% !important;
text-align: left !important;
}
table.body .post-meta.author-date {
width: 100%;
table.body .post-meta.view-online-mobile {
display: table-row !important;
}
table.body .post-meta-left.view-online-mobile,
table.body .post-meta-left.view-online-mobile .view-online {
text-align: left !important;
}
table.body .post-meta.view-online.desktop {
display: none !important;
}
table.body .view-online {
@ -1209,11 +1226,6 @@ a[data-flickr-embed] img {
font-size: 14px !important;
}
table.body .latest-post a {
height: auto !important;
padding: 0 !important;
}
table.body .latest-post-img {
display: none !important;
}

View File

@ -78,10 +78,10 @@
</td>
</tr>
<tr>
<td>
<td style="width: 100%">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-bottom: 48px;">
<tr>
<td class="{{classes.meta}} author-date">
<td height="20" class="{{classes.meta}}" style="padding: 0;">
By {{post.authors}} • <span class="post-meta-date">{{post.publishedAt}} </span>
{{#if newsletter.showCommentCta}}
<a href="{{post.commentUrl}}" class="comment-link" valign="middle">
@ -89,7 +89,12 @@
</a>
{{/if}}
</td>
<td class="{{classes.meta}} view-online">
<td class="{{classes.meta}} view-online desktop">
<a href="{{post.url}}" class="view-online-link">View in browser</a>
</td>
</tr>
<tr class="{{classes.meta}} view-online-mobile">
<td height="20" class="view-online">
<a href="{{post.url}}" class="view-online-link">View in browser</a>
</td>
</tr>

View File

@ -1213,6 +1213,7 @@ describe('Email renderer', function () {
// Update the following array when you make changes to the email template, check if replacements are correct for each newly added link.
assert.deepEqual(links, [
`http://tracked-link.com/?m=%%{uuid}%%&url=http%3A%2F%2Fexample.com%2F%3Fsource_tracking%3DTest%2BNewsletter%26post_tracking%3Dadded`,
`http://tracked-link.com/?m=%%{uuid}%%&url=http%3A%2F%2Fexample.com%2F%3Fsource_tracking%3DTest%2BNewsletter%26post_tracking%3Dadded`,
`http://tracked-link.com/?m=%%{uuid}%%&url=http%3A%2F%2Fexample.com%2F%3Fsource_tracking%3DTest%2BNewsletter%26post_tracking%3Dadded`,
`http://tracked-link.com/?m=%%{uuid}%%&url=https%3A%2F%2Fexternal-domain.com%2F%3Fref%3D123%26source_tracking%3Dsite`,
@ -1275,6 +1276,7 @@ describe('Email renderer', function () {
// Update the following array when you make changes to the email template, check if replacements are correct for each newly added link.
assert.deepEqual(links, [
`http://tracked-link.com/?m=%%{uuid}%%&url=http%3A%2F%2Fexample.com%2F%3Fsource_tracking%3DTest%2BNewsletter%26post_tracking%3Dadded`,
`http://tracked-link.com/?m=%%{uuid}%%&url=http%3A%2F%2Fexample.com%2F%3Fsource_tracking%3DTest%2BNewsletter%26post_tracking%3Dadded`,
`http://tracked-link.com/?m=%%{uuid}%%&url=http%3A%2F%2Fexample.com%2F%3Fsource_tracking%3DTest%2BNewsletter%26post_tracking%3Dadded`,
`http://tracked-link.com/?m=%%{uuid}%%&url=https%3A%2F%2Fexternal-domain.com%2F%3Fref%3D123%26source_tracking%3Dsite`,