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 1e0f1c2463..e1f4ef0621 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 @@ -175,6 +175,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -297,8 +305,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -315,10 +321,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -711,7 +713,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": "23528", + "content-length": "23508", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -800,6 +802,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -922,8 +932,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -940,10 +948,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -1356,7 +1360,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": "28339", + "content-length": "28319", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -1476,6 +1480,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -1598,8 +1610,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -1616,10 +1626,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -2019,7 +2025,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": "23282", + "content-length": "23262", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -2468,6 +2474,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -2590,8 +2604,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -2608,10 +2620,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -3025,7 +3033,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": "24043", + "content-length": "24023", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -3500,6 +3508,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -3622,8 +3638,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -3640,10 +3654,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -4057,7 +4067,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": "24043", + "content-length": "24023", "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 976e2c0239..c0e91ba2b9 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 @@ -68,6 +68,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -190,8 +198,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -208,10 +214,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -672,6 +674,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -794,8 +804,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -812,10 +820,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -1262,6 +1266,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -1384,8 +1396,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -1402,10 +1412,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -1852,6 +1858,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -1974,8 +1988,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -1992,10 +2004,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -2442,6 +2450,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -2564,8 +2580,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -2582,10 +2596,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -2980,6 +2990,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -3102,8 +3120,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -3120,10 +3136,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -3570,6 +3582,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -3692,8 +3712,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -3710,10 +3728,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -4254,6 +4268,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -4376,8 +4398,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -4394,10 +4414,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -6258,6 +6274,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -6380,8 +6404,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -6398,10 +6420,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -6624,10 +6642,10 @@ table.body h2 span { -

Keep reading

+

Keep reading

-
+
@@ -6645,7 +6663,7 @@ table.body h2 span {
-
+
@@ -6663,7 +6681,7 @@ table.body h2 span {
-
+
@@ -6993,6 +7011,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -7115,8 +7141,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -7133,10 +7157,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -7638,6 +7658,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -7760,8 +7788,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -7778,10 +7804,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -8283,6 +8305,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -8405,8 +8435,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -8423,10 +8451,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -8928,6 +8952,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -9050,8 +9082,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -9068,10 +9098,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -9573,6 +9599,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -9695,8 +9729,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -9713,10 +9745,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -10218,6 +10246,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -10340,8 +10376,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -10358,10 +10392,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -10810,6 +10840,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -10932,8 +10970,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -10950,10 +10986,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } diff --git a/ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap b/ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap index a234b1ab63..849e15afd9 100644 --- a/ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap +++ b/ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap @@ -68,6 +68,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -190,8 +198,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -208,10 +214,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -658,6 +660,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -780,8 +790,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -798,10 +806,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } @@ -1248,6 +1252,14 @@ Object { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -1370,8 +1382,6 @@ table.body .feedback-button-mobile-text { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -1388,10 +1398,6 @@ table.body .latest-post-excerpt span { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } diff --git a/ghost/email-service/lib/EmailRenderer.js b/ghost/email-service/lib/EmailRenderer.js index 67248bf723..ea096b1cd7 100644 --- a/ghost/email-service/lib/EmailRenderer.js +++ b/ghost/email-service/lib/EmailRenderer.js @@ -836,18 +836,23 @@ class EmailRenderer { * * @param {*} text * @param {number} maxLength - * @param {number} maxLengthMobile should be larger than maxLength + * @param {number} maxLengthMobile should be smaller than maxLength * @returns */ truncateHtml(text, maxLength, maxLengthMobile) { - if (!maxLengthMobile || maxLength >= maxLengthMobile) { + if (!maxLengthMobile || maxLength <= maxLengthMobile) { return escapeHtml(this.truncateText(text, maxLength)); } - if (text && text.length > maxLength) { - if (text.length <= maxLengthMobile) { - return escapeHtml(text.substring(0, maxLength - 1)) + '' + escapeHtml(text.substring(maxLength - 1, maxLengthMobile - 1)) + '' + '…'; + if (text && text.length > maxLengthMobile) { + let ellipsis = ''; + + if (text.length > maxLengthMobile && text.length <= maxLength) { + ellipsis = '…'; + } else if (text.length > maxLength) { + ellipsis = '…'; } - return escapeHtml(text.substring(0, maxLength - 1)) + '' + escapeHtml(text.substring(maxLength - 1, maxLengthMobile - 1)) + '' + '…'; + + return escapeHtml(text.substring(0, maxLengthMobile - 1)) + '' + escapeHtml(text.substring(maxLengthMobile - 1, maxLength - 1)) + '' + ellipsis; } else { return escapeHtml(text ?? ''); } @@ -996,7 +1001,7 @@ class EmailRenderer { const {href: featureImageMobile, width: featureImageMobileWidth, height: featureImageMobileHeight} = await this.limitImageWidth(latestPost.get('feature_image'), 600, 480); latestPosts.push({ - title: this.truncateHtml(latestPost.get('title'), featureImage ? 85 : 105, 105), + title: this.truncateHtml(latestPost.get('title'), featureImage ? 85 : 95, featureImageMobile ? 55 : 75), url: this.#getPostUrl(latestPost), featureImage: featureImage ? { src: featureImage, @@ -1008,7 +1013,7 @@ class EmailRenderer { width: featureImageMobileWidth, height: featureImageMobileHeight } : null, - excerpt: this.truncateHtml(latestPost.get('custom_excerpt') || latestPost.get('plaintext'), featureImage ? 60 : 70, 105) + excerpt: this.truncateHtml(latestPost.get('custom_excerpt') || latestPost.get('plaintext'), featureImage ? 120 : 130, featureImageMobile ? 90 : 100) }); if (featureImage) { diff --git a/ghost/email-service/lib/email-templates/partials/styles-old.hbs b/ghost/email-service/lib/email-templates/partials/styles-old.hbs index 83222112b2..9c5a4e24c0 100644 --- a/ghost/email-service/lib/email-templates/partials/styles-old.hbs +++ b/ghost/email-service/lib/email-templates/partials/styles-old.hbs @@ -499,7 +499,7 @@ figure blockquote p { .latest-posts-header { margin: 0; - padding: 8px 0 16px; + padding: 8px 0 8px; color: #15212A; font-size: 13px; font-weight: 700; @@ -507,7 +507,8 @@ figure blockquote p { } .latest-post { - padding: 8px 0; + max-width: 600px !important; + padding: 16px 0; } .latest-post a { @@ -1288,6 +1289,10 @@ a[data-flickr-embed] img { display: none; } +.hide-desktop { + display: none; +} + /* ------------------------------------- RESPONSIVE AND MOBILE FRIENDLY STYLES ------------------------------------- */ @@ -1306,6 +1311,14 @@ a[data-flickr-embed] img { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -1448,8 +1461,6 @@ a[data-flickr-embed] img { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -1465,10 +1476,6 @@ a[data-flickr-embed] img { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } diff --git a/ghost/email-service/lib/email-templates/partials/styles.hbs b/ghost/email-service/lib/email-templates/partials/styles.hbs index 0a8b36fdf6..34e0533eb3 100644 --- a/ghost/email-service/lib/email-templates/partials/styles.hbs +++ b/ghost/email-service/lib/email-templates/partials/styles.hbs @@ -464,7 +464,7 @@ figure blockquote p { width: 100%; padding: 10px 0 30px 0; font-size: 13px !important; - text-align: center; + text-align: center; color: {{secondaryTextColor}}; } @@ -496,7 +496,7 @@ figure blockquote p { .latest-posts-header { margin: 0; - padding: 8px 0 16px; + padding: 8px 0 8px; color: {{titleColor}}; font-size: 13px; font-weight: 700; @@ -505,7 +505,7 @@ figure blockquote p { .latest-post { max-width: 600px !important; - padding: 8px 0; + padding: 16px 0; } .latest-post a { @@ -1015,9 +1015,9 @@ a[data-flickr-embed] img { .kg-product-card { width: 100%; - margin: 0 0 1.5em; + margin: 0 0 1.5em; padding: 20px; - border-radius: 3px; + border-radius: 3px; border: 1px solid #e5eff5; border: 1px solid {{secondaryBorderColor}}; } @@ -1034,105 +1034,105 @@ a[data-flickr-embed] img { } .kg-audio-card { - width: auto; + width: auto; width: 100%; margin: 0 auto 1.5em; - border-radius: 3px; + border-radius: 3px; border: 1px solid #e5eff5; border: 1px solid {{secondaryBorderColor}}; } .kg-audio-title { - display: block; - padding-right: 20px; - padding-bottom: 4px; - padding-top: 4px; - font-size: 16px; - font-weight: 600; - line-height: 18px; - text-decoration: none !important; + display: block; + padding-right: 20px; + padding-bottom: 4px; + padding-top: 4px; + font-size: 16px; + font-weight: 600; + line-height: 18px; + text-decoration: none !important; color: {{textColor}} !important; } .kg-audio-play-button { - display: block; - box-sizing: border-box; - width: 16px; - height: 16px; - color: {{textColor}} !important; - border-style: solid; - border-width: 8px 0px 8px 16px; + display: block; + box-sizing: border-box; + width: 16px; + height: 16px; + color: {{textColor}} !important; + border-style: solid; + border-width: 8px 0px 8px 16px; border-color: transparent transparent transparent currentColor; } .kg-audio-duration { - display: block; - text-decoration: none; - font-size: 13px; - text-decoration: none !important; + display: block; + text-decoration: none; + font-size: 13px; + text-decoration: none !important; color: {{textColor}} !important; } .kg-audio-link { - text-decoration: none !important; - color: {{textColor}}; + text-decoration: none !important; + color: {{textColor}}; color: {{secondaryTextColor}}; } .kg-file-card { width: 100%; margin: 0 0 1.5em 0; - border-radius: 3px; + border-radius: 3px; border: 1px solid #e5eff5; border: 1px solid {{secondaryBorderColor}}; } .kg-file-title { - display: block; - width: 100%; - padding-left: 12px; - padding-top: 8px; - font-size: 17px; - font-weight: bold; - line-height: 1.3em; + display: block; + width: 100%; + padding-left: 12px; + padding-top: 8px; + font-size: 17px; + font-weight: bold; + line-height: 1.3em; text-decoration: none !important; - color: {{textColor}} !important; + color: {{textColor}} !important; } .kg-file-description { - display: block; - width: 100%; - padding-left: 12px; - padding-top: 2px; - font-size: 15px; - line-height: 1.4em; + display: block; + width: 100%; + padding-left: 12px; + padding-top: 2px; + font-size: 15px; + line-height: 1.4em; text-decoration: none !important; - color: {{textColor}} !important; - color: {{secondaryTextColor}} !important; + color: {{textColor}} !important; + color: {{secondaryTextColor}} !important; } .kg-file-meta { display: block; - width: 100%; - padding-left: 12px; - padding-top: 4px; + width: 100%; + padding-left: 12px; + padding-top: 4px; padding-bottom: 8px; - font-size: 13px; - line-height: 1.4em; + font-size: 13px; + line-height: 1.4em; text-decoration: none !important; color: {{textColor}} !important; - color: {{secondaryTextColor}} !important; + color: {{secondaryTextColor}} !important; } .kg-file-name { - font-weight: 500; + font-weight: 500; color: {{textColor}}; } .kg-file-thumbnail { - position: relative; - vertical-align: middle; - text-align: center; + position: relative; + vertical-align: middle; + text-align: center; border-radius: 2px; {{#if backgroundIsDark}} background: {{backgroundColor}} !important; @@ -1143,20 +1143,20 @@ a[data-flickr-embed] img { } .kg-twitter-card { - width: auto; + width: auto; width: 100%; margin: 0 auto; background: #FFFFFF !important; - border-radius: 12px; + border-radius: 12px; border: 1px solid #e5eff5; } .kg-toggle-card { background: transparent; - padding: 20px; + padding: 20px; margin-bottom: 1.5em; - border-radius: 4px; - border: 1px solid {{secondaryBorderColor}}; + border-radius: 4px; + border: 1px solid {{secondaryBorderColor}}; } @@ -1318,6 +1318,10 @@ a[data-flickr-embed] img { display: none; } +.hide-desktop { + display: none; +} + /* ------------------------------------- RESPONSIVE AND MOBILE FRIENDLY STYLES ------------------------------------- */ @@ -1338,6 +1342,14 @@ a[data-flickr-embed] img { display: initial !important; } + .hide-desktop { + display: initial !important; + } + + .desktop-only { + display: none !important; + } + table.body p, table.body ul, table.body ol, @@ -1461,8 +1473,6 @@ a[data-flickr-embed] img { } table.body .latest-post-title { - display: inline-block !important; - width: 100%; padding-right: 8px !important; } @@ -1478,10 +1488,6 @@ a[data-flickr-embed] img { line-height: 1.2 !important; } - table.body .latest-post-excerpt span { - display: none !important; - } - table.body .subscription-box h3 { font-size: 14px !important; } diff --git a/ghost/email-service/test/email-renderer.test.js b/ghost/email-service/test/email-renderer.test.js index 945667e11e..92a3bd82ad 100644 --- a/ghost/email-service/test/email-renderer.test.js +++ b/ghost/email-service/test/email-renderer.test.js @@ -2243,7 +2243,7 @@ describe('Email renderer', function () { assert.deepEqual(data.latestPosts, [ { - excerpt: 'Super long custom excerpt. Super long custom excerpt. Super long custom excerpt. Super long custom excer…', + excerpt: 'Super long custom excerpt. Super long custom excerpt. Super long custom excerpt. Super long custom excerpt. Super long …', title: 'Test Post 1', url: 'http://example.com', featureImage: { @@ -2327,12 +2327,12 @@ describe('Email renderer', function () { describe('truncateHTML', function () { it('works correctly', async function () { const emailRenderer = new EmailRenderer({}); - assert.equal(emailRenderer.truncateHtml('This is a short one', 5, 10), 'This is a…'); - assert.equal(emailRenderer.truncateHtml('This is a', 5, 10), 'This is a…'); - assert.equal(emailRenderer.truncateHtml('This', 5, 10), 'This'); + assert.equal(emailRenderer.truncateHtml('This is a short one', 10, 5), 'This is a…'); + assert.equal(emailRenderer.truncateHtml('This is a', 10, 5), 'This is a…'); + assert.equal(emailRenderer.truncateHtml('This', 10, 5), 'This'); assert.equal(emailRenderer.truncateHtml('This is a long text', 5, 5), 'This…'); assert.equal(emailRenderer.truncateHtml('This is a long text', 5), 'This…'); - assert.equal(emailRenderer.truncateHtml(null, 5, 10), ''); + assert.equal(emailRenderer.truncateHtml(null, 10, 5), ''); }); });