From 0455672832d44b4a8dc5b23f122af2c0dc3cc1ce Mon Sep 17 00:00:00 2001 From: Sanne de Vries Date: Thu, 23 Mar 2023 13:16:48 +0100 Subject: [PATCH] Updatet latest post section in email template Refs https://github.com/TryGhost/Team/issues/2675 --- .../__snapshots__/email-previews.test.js.snap | 135 +++++++-- .../__snapshots__/batch-sending.test.js.snap | 275 +++++++++++++++--- ghost/email-service/lib/email-renderer.js | 2 +- .../email-templates/partials/latest-posts.hbs | 30 +- .../lib/email-templates/partials/styles.hbs | 147 ++++++---- .../lib/email-templates/template.hbs | 7 +- 6 files changed, 451 insertions(+), 145 deletions(-) diff --git a/ghost/core/test/e2e-api/admin/__snapshots__/email-previews.test.js.snap b/ghost/core/test/e2e-api/admin/__snapshots__/email-previews.test.js.snap index 4304b7a9d9..48321b0111 100644 --- a/ghost/core/test/e2e-api/admin/__snapshots__/email-previews.test.js.snap +++ b/ghost/core/test/e2e-api/admin/__snapshots__/email-previews.test.js.snap @@ -234,6 +234,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -270,6 +282,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -278,20 +291,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -484,10 +501,10 @@ table.body figcaption a { - - @@ -684,7 +701,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": "21445", + "content-length": "21891", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -832,6 +849,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -868,6 +897,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -876,20 +906,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -1082,10 +1116,10 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 1970 + View in browser
- - @@ -1302,7 +1336,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": "26268", + "content-length": "26714", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -1481,6 +1515,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -1517,6 +1563,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -1525,20 +1572,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -1731,10 +1782,10 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2015 + View in browser
- - @@ -1938,7 +1989,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": "21211", + "content-length": "21657", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -2446,6 +2497,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -2482,6 +2545,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -2490,20 +2554,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -2701,10 +2769,10 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 1970 + View in browser
- - @@ -2913,7 +2981,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": "21703", + "content-length": "22149", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -3447,6 +3515,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -3483,6 +3563,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -3491,20 +3572,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -3702,10 +3787,10 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 1970 + View in browser
- - @@ -3914,7 +3999,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": "21703", + "content-length": "22149", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, diff --git a/ghost/core/test/integration/services/email-service/__snapshots__/batch-sending.test.js.snap b/ghost/core/test/integration/services/email-service/__snapshots__/batch-sending.test.js.snap index 2318d6d2ee..18b468b190 100644 --- a/ghost/core/test/integration/services/email-service/__snapshots__/batch-sending.test.js.snap +++ b/ghost/core/test/integration/services/email-service/__snapshots__/batch-sending.test.js.snap @@ -127,6 +127,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -163,6 +175,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -171,20 +184,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -382,10 +399,10 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 1970 + View in browser
- - @@ -705,6 +722,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -741,6 +770,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -749,20 +779,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -960,10 +994,10 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- - @@ -1269,6 +1303,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -1305,6 +1351,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -1313,20 +1360,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -1524,10 +1575,10 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- - @@ -1833,6 +1884,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -1869,6 +1932,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -1877,20 +1941,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -2088,10 +2156,10 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- - @@ -2397,6 +2465,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -2433,6 +2513,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -2441,20 +2522,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -2919,6 +3004,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -2955,6 +3052,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -2963,20 +3061,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -3174,10 +3276,10 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- - @@ -4557,6 +4659,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -4593,6 +4707,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -4601,20 +4716,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -4812,13 +4931,13 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- - @@ -4858,7 +4977,7 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2023 • \\"Comment\\" + View in browser
- +
@@ -5221,6 +5340,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -5257,6 +5388,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -5265,20 +5397,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -5476,13 +5612,13 @@ table.body figcaption a { - - @@ -5514,7 +5650,7 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2023 • \\"Comment\\" + View in browser
- +
@@ -6370,6 +6506,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -6406,6 +6554,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -6414,20 +6563,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -6625,10 +6778,10 @@ table.body figcaption a { - - @@ -6991,6 +7144,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -7027,6 +7192,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -7035,20 +7201,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -7246,10 +7416,10 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- - @@ -7557,6 +7727,18 @@ 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.view-online { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + table.body .post-meta.author-date { width: 100%; } @@ -7593,6 +7775,7 @@ table.body .footer a { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -7601,20 +7784,24 @@ table.body .footer a { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -7812,10 +7999,10 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- - diff --git a/ghost/email-service/lib/email-renderer.js b/ghost/email-service/lib/email-renderer.js index af6239309e..ee1278ecb3 100644 --- a/ghost/email-service/lib/email-renderer.js +++ b/ghost/email-service/lib/email-renderer.js @@ -758,7 +758,7 @@ class EmailRenderer { const {href: featureImageMobile, width: featureImageMobileWidth, height: featureImageMobileHeight} = await this.limitImageWidth(latestPost.get('feature_image'), 600, 480); latestPosts.push({ - title: this.truncateText(latestPost.get('title'), 85), + title: this.truncateText(latestPost.get('title'), 90), url: this.#getPostUrl(latestPost), featureImage: featureImage ? { src: featureImage, diff --git a/ghost/email-service/lib/email-templates/partials/latest-posts.hbs b/ghost/email-service/lib/email-templates/partials/latest-posts.hbs index 9f806bd823..3cacf10250 100644 --- a/ghost/email-service/lib/email-templates/partials/latest-posts.hbs +++ b/ghost/email-service/lib/email-templates/partials/latest-posts.hbs @@ -2,23 +2,12 @@
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- + {{#if ../latestPostsHasImages}} {{#if featureImage}} - - + {{#if ../latestPostsHasImages}} + {{#if featureImage}} + + {{/if}} + {{/if}}
{{!-- maximum width of image + 20px padding --}} - - + {{excerpt}}

{{/if}} 		+ +
diff --git a/ghost/email-service/lib/email-templates/partials/styles.hbs b/ghost/email-service/lib/email-templates/partials/styles.hbs index 098ffb99ff..3f4d4398ee 100644 --- a/ghost/email-service/lib/email-templates/partials/styles.hbs +++ b/ghost/email-service/lib/email-templates/partials/styles.hbs @@ -359,21 +359,23 @@ figure blockquote p { color: #738a94; font-size: 13px; letter-spacing: 0.1px; -} - -.post-meta-left { - text-align: left; + text-align: center; + display: inline-block; + width: 100% !important; } .view-online { - text-align: right; + text-align: center; } -.post-meta-center, -.post-meta-center.view-online { - display: inline-block; - width: 100% !important; - text-align: center !important; +.post-meta-left { + display: table-cell; + text-align: left; +} + +.post-meta-left.view-online { + display: table-cell; + text-align: right; } .post-meta-center.view-online { @@ -424,6 +426,10 @@ figure blockquote p { color: #738a94; } +/* ------------------------------------- + FEEDBACK BUTTONS +------------------------------------- */ + .feedback-buttons { width: auto !important; margin: auto; @@ -431,8 +437,7 @@ figure blockquote p { .feedback-buttons-mobile { display: none !important; - width: auto !important; - margin: auto !important; + mso-hide: all !important; } .feedback-button-mobile-text { @@ -442,6 +447,58 @@ figure blockquote p { margin-bottom: 0; } +/* ------------------------------------- + LATEST POSTS TABLE +------------------------------------- */ +.latest-post { + padding: 8px 0; +} + +.latest-post a { + display: block; + overflow: hidden; + color: inherit; + text-decoration: none; +} + +.latest-post-img img, +.latest-post-img-mobile img { + object-fit: cover; +} + +.latest-post-img-mobile { + display: none; +} + +.latest-post-img-mobile img { + width: 100% !important; + height: auto !important; /* Make sure CSS ignores the height that is defined in HTML, but keep the aspect ratio from the width/height in HTML */ +} + +.latest-post-title { + padding-right: 12px; +} + +.latest-post p { + margin: 0; + padding: 0; + color: #738a94; + font-size: 14px; + font-weight: 400; +} + +.latest-post h4 { + margin: 0; + padding: 12px 0 4px; + font-size: 18px; + font-weight: 700; + +} + +/* ------------------------------------- + SUBSCRIPTION DETAILS BOX +------------------------------------- */ + .subscription-box { padding: 24px; background: #F4F5F6; @@ -1077,6 +1134,18 @@ a[data-flickr-embed] img { display: inline-block; } + table.body .post-meta-left { + display: inline-block !important; + width: 100% !important; + text-align: left !important; + } + + 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%; } @@ -1114,6 +1183,7 @@ a[data-flickr-embed] img { table.body .latest-post a { height: auto !important; + padding: 0 !important; } table.body .latest-post-img { @@ -1122,20 +1192,24 @@ a[data-flickr-embed] img { table.body .latest-post-img-mobile { display: inline-block !important; + width: 100%; } table.body .latest-post-title { display: inline-block !important; width: 100%; + padding-right: 0 !important; + padding-bottom: 8px !important; } table.body .latest-post h4 { - padding: 4px 0 0; - font-size: 18px !important; + padding: 4px 0 !important; + font-size: 16px !important; } table.body .latest-post p { font-size: 13px !important; + line-height: 1.25em; } table.body .subscription-box { @@ -1300,49 +1374,4 @@ a[data-flickr-embed] img { } {{/if}} -/* ------------------------------------- - LATEST POSTS TABLE -------------------------------------- */ -.latest-post { - padding: 8px 0; -} - -.latest-post-img img, -.latest-post-img-mobile img { - object-fit: cover; -} - -.latest-post-img-mobile { - display: none; -} - -.latest-post-img-mobile img { - width: 100% !important; - height: auto !important; /* Make sure CSS ignores the height that is defined in HTML, but keep the aspect ratio from the width/height in HTML */ -} - -.latest-post p { - margin: 0; - padding: 0; - color: #738a94; - font-size: 14px; - font-weight: 400; -} - -.latest-post h4 { - margin: 0; - padding: 12px 0 4px; - font-size: 19px; - font-weight: 700; - -} - -.latest-post a { - display: block; - height: 96px; - overflow: hidden; - color: inherit; - text-decoration: none; -} - diff --git a/ghost/email-service/lib/email-templates/template.hbs b/ghost/email-service/lib/email-templates/template.hbs index 2e9b5d8e42..56bd664295 100644 --- a/ghost/email-service/lib/email-templates/template.hbs +++ b/ghost/email-service/lib/email-templates/template.hbs @@ -81,7 +81,7 @@ 		- - @@ -151,7 +151,7 @@ {{/if}}
+ By {{post.authors}} • {{post.publishedAt}} {{#if newsletter.showCommentCta}} @@ -89,7 +89,7 @@ {{/if}} + View in browser
- + {{#if feedbackButtons }} {{> feedbackButtonMobile feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this-mobile.png" width="42" height="42" }} @@ -169,6 +169,7 @@ {{#if latestPosts.length}}