From 792bfdb498001017eb7c9c97751f76195fbb3619 Mon Sep 17 00:00:00 2001 From: Sanne de Vries Date: Tue, 21 Mar 2023 11:39:13 +0100 Subject: [PATCH] Added UI for subscription box in newsletters Refs https://github.com/TryGhost/Team/issues/2738 - Added preview to email newsletter settings - Added subscription box UI to email template --- .../modals/newsletters/edit/preview-labs.hbs | 15 +- ghost/admin/app/styles/layouts/members.css | 64 ++- .../__snapshots__/email-previews.test.js.snap | 225 ++++++--- .../__snapshots__/batch-sending.test.js.snap | 430 +++++++++++++----- .../lib/email-templates/partials/styles.hbs | 77 +++- .../lib/email-templates/template.hbs | 29 +- 6 files changed, 648 insertions(+), 192 deletions(-) diff --git a/ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs b/ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs index e29537b3c1..48bf6f3d79 100644 --- a/ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs +++ b/ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs @@ -45,14 +45,14 @@
Feature image caption
{{/if}} -
+

This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.

Over there on the left you’ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we’ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.

So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.

{{#if (or (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta)}} -
+
{{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}} @@ -82,7 +82,16 @@ {{#if @newsletter.showSubscriptionDetails}}
- Subscription details +

Subscription details

+

You are receiving this because you are a paid subscriber to The Local Host. Your paid subscription will renew on 20 March 2024.

+
+
+

Name: Jamie Larson

+

Email: jamie@example.com

+

Member since: 20 March 2023

+
+ Manage subscription → +
{{/if}} diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index 77b176f46c..c9919e59b0 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/ghost/admin/app/styles/layouts/members.css @@ -2038,18 +2038,23 @@ p.gh-members-import-errordetail:first-of-type { align-items: center; padding: 50px 0 40px; } + .gh-members-emailpreview-title-left { align-items: flex-start; } .gh-members-emailpreview-title h2 { + margin: 0; + padding: 0 0 10px; + color: #15212A; font-size: 4.2rem; line-height: 1.1em; font-weight: 700; text-align: center; - margin: 0; - padding: 0 0 10px; - color: #15212A; +} + +.gh-members-emailpreview-title-left h2 { + text-align: left; } .gh-members-emailpreview-labs .gh-members-emailpreview-title h2 { @@ -2149,6 +2154,10 @@ p.gh-members-import-errordetail:first-of-type { border-bottom: 1px solid #e5eff5; } +.gh-members-emailpreview-content.no-border { + border-bottom: 0; +} + .gh-members-emailpreview-content:first-child { margin-top: 52px; } @@ -2260,6 +2269,11 @@ p.gh-members-import-errordetail:first-of-type { display: grid; gap: 20px; padding: 40px; + border-bottom: 1px solid #e5eff5; +} + +.gh-members-emailpreview-feedback.no-border { + border-bottom: 0; } .gh-members-emailpreview-labs .gh-members-emailpreview-feedback { @@ -2311,6 +2325,50 @@ p.gh-members-import-errordetail:first-of-type { padding: 7px 18px; } +.gh-members-emailpreview-subscription-details { + padding: 24px; + background: #F4F5F6; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial, sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 1.3rem; + font-weight: 400; + border-radius: 3px; +} + +.gh-members-emailpreview-subscription-details h4 { + font-size: 1.4rem; +} + +.gh-members-emailpreview-subscription-details p { + margin: 0; +} + +.gh-members-emailpreview-subscription-details p strong { + font-weight: 700; +} + +a.gh-members-emailpreview-subscription-link { + align-self: flex-end; + white-space: nowrap; + width: 100%; + color: var(--accent-color); + font-weight: 500; + text-decoration: none; + text-align: right; +} + +@media (max-width: 1000px) { + .gh-members-emailpreview-subscription-details .flex { + flex-direction: column; + } + + a.gh-members-emailpreview-subscription-link { + align-self: flex-start; + padding-top: 12px; + text-align: left; + } + +} + /* Custom tier member details */ .gh-cp-member-email-name { display: grid; 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 f83a6b3b3c..3170198fb6 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 @@ -182,11 +182,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -197,6 +192,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -272,6 +268,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -403,11 +424,11 @@ table.body figcaption a {
- +
-
+ @@ -433,10 +454,10 @@ table.body figcaption a {
- - @@ -462,8 +483,8 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 1970 + View in browser
- +
+ @@ -633,7 +654,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": "20437", + "content-length": "20881", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -729,11 +750,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -744,6 +760,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -819,6 +836,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -950,11 +992,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+ @@ -980,10 +1022,10 @@ table.body figcaption a {
- - @@ -1013,8 +1055,8 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 2015 + View in browser
- +
+ @@ -1200,7 +1242,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": "25260", + "content-length": "25704", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -1327,11 +1369,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -1342,6 +1379,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -1417,6 +1455,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -1548,11 +1611,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+ @@ -1578,10 +1641,10 @@ table.body figcaption a {
- - @@ -1607,8 +1670,8 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 1970 + View in browser
- +
+ @@ -1785,7 +1848,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": "20203", + "content-length": "20647", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -2241,11 +2304,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -2256,6 +2314,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -2331,6 +2390,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -2462,11 +2546,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+
@@ -2497,10 +2581,10 @@ table.body figcaption a { - - @@ -2526,8 +2610,8 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 1970 + View in browser
- +
+ @@ -2709,7 +2793,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": "20695", + "content-length": "21139", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -3191,11 +3275,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -3206,6 +3285,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -3281,6 +3361,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -3412,11 +3517,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+
@@ -3447,10 +3552,10 @@ table.body figcaption a { - - @@ -3476,8 +3581,8 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 1970 + View in browser
- +
+ @@ -3659,7 +3764,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": "20695", + "content-length": "21139", "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 a238b9b411..e2beb00050 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 @@ -75,11 +75,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -90,6 +85,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -165,6 +161,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -296,11 +317,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+
@@ -331,10 +352,10 @@ table.body figcaption a { - - @@ -368,8 +389,8 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- +
+ @@ -602,11 +623,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -617,6 +633,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -692,6 +709,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -823,11 +865,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+
@@ -858,10 +900,10 @@ table.body figcaption a { - - @@ -887,8 +929,8 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- +
+ @@ -1115,11 +1157,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -1130,6 +1167,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -1205,6 +1243,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -1336,11 +1399,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+
@@ -1371,10 +1434,10 @@ table.body figcaption a { - - @@ -1400,8 +1463,8 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- +
+ @@ -1628,11 +1691,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -1643,6 +1701,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -1718,6 +1777,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -1849,11 +1933,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+
@@ -1884,10 +1968,10 @@ table.body figcaption a { - - @@ -1913,8 +1997,8 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- +
+ @@ -2141,11 +2225,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -2156,6 +2235,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -2231,6 +2311,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -2362,11 +2467,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+ -
@@ -2407,8 +2512,8 @@ table.body figcaption a {
- +
+ @@ -2612,11 +2717,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -2627,6 +2727,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -2702,6 +2803,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -2833,11 +2959,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+
@@ -2868,10 +2994,10 @@ table.body figcaption a { - - @@ -2897,8 +3023,8 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- +
+ @@ -4199,11 +4325,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -4214,6 +4335,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -4289,6 +4411,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -4420,11 +4567,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+
@@ -4455,13 +4602,13 @@ table.body figcaption a { - - @@ -4484,7 +4631,7 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 2023 • \\"Comment\\" + View in browser
+ -
@@ -4526,8 +4673,8 @@ table.body figcaption a {
- +
+ @@ -4812,11 +4959,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -4827,6 +4969,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -4902,6 +5045,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -5033,11 +5201,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+
@@ -5068,13 +5236,13 @@ table.body figcaption a { - - @@ -5097,7 +5265,7 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 2023 • \\"Comment\\" + View in browser
+ -
@@ -5121,8 +5289,8 @@ table.body figcaption a {
- +
+ @@ -5910,11 +6078,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -5925,6 +6088,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -6000,6 +6164,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -6131,11 +6320,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+
@@ -6166,10 +6355,10 @@ table.body figcaption a { - - @@ -6195,8 +6384,8 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- +
+ @@ -6425,11 +6614,6 @@ table.body span { word-break: break-word !important; } - table.body .wrapper, -table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -6440,6 +6624,7 @@ table.body .article { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -6515,6 +6700,31 @@ table.body .footer a { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, +table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, +table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -6646,11 +6856,11 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- +
-
+
@@ -6681,10 +6891,10 @@ table.body figcaption a { - - @@ -6710,8 +6920,8 @@ table.body figcaption a { -
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- +
+ diff --git a/ghost/email-service/lib/email-templates/partials/styles.hbs b/ghost/email-service/lib/email-templates/partials/styles.hbs index df7825c481..2fca9a95cb 100644 --- a/ghost/email-service/lib/email-templates/partials/styles.hbs +++ b/ghost/email-service/lib/email-templates/partials/styles.hbs @@ -373,7 +373,7 @@ figure blockquote p { .post-meta-center.view-online { display: inline-block; width: 100% !important; - text-align: center; + text-align: center !important; } .post-meta-center.view-online { @@ -442,6 +442,43 @@ figure blockquote p { margin-bottom: 0; } +.subscription-box { + padding: 24px; + background: #F4F5F6; + color: #15212A; + border-radius: 3px; +} + +.subscription-box h3 { + font-size: 14px; + font-weight: 700; + margin: 0 0 16px; +} + +.subscription-box p { + margin-bottom: 0; + color: #15212A !important; + font-size: 14px; + font-weight: 400; + line-height: 1.45em; + text-decoration: none; +} + +.subscription-box p a { + color: #15212A !important; + text-decoration: none; +} + +.manage-subscription { + white-space: nowrap; + font-size: 13.5px; + font-weight: 500; + text-align: right; + line-height: 1.45em; + vertical-align: bottom; + color: {{accentColor}}; +} + .post-content { max-width: 600px !important; font-family: Georgia, serif; @@ -461,6 +498,11 @@ figure blockquote p { border-bottom: 1px solid #e5eff5; } +.post-content.no-border, +.post-content-sans-serif.no-border { + border-bottom: 0; +} + .post-content-row:first-child > td, .header-image-row + .post-content-row > td { padding-top: 52px; } @@ -820,12 +862,12 @@ a[data-flickr-embed] img { .main { background: #ffffff; border-radius: 3px; + border-spacing: 20px 0; width: 100%; } .wrapper { box-sizing: border-box; - padding: 0 20px; } .content-block { @@ -979,11 +1021,6 @@ a[data-flickr-embed] img { word-break: break-word !important; } - table.body .wrapper, - table.body .article { - padding: 0 10px !important; - } - table.body .content { padding: 0 !important; } @@ -994,6 +1031,7 @@ a[data-flickr-embed] img { } table.body .main { + border-spacing: 10px 0 !important; border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; @@ -1070,6 +1108,31 @@ a[data-flickr-embed] img { font-size: 13px !important; } + table.body .subscription-box { + padding: 24px 20px !important; + } + + table.body .subscription-box h3 { + font-size: 14px !important; + } + + table.body .subscription-box p, + table.body .subscription-box p span { + font-size: 13px !important; + } + + table.body .subscription-details, + table.body .manage-subscription { + display: inline-block; + width: 100%; + text-align: left !important; + font-size: 13px !important; + } + + table.body .subscription-details { + padding-bottom: 12px; + } + table.body .kg-bookmark-card { width: 90vw; } diff --git a/ghost/email-service/lib/email-templates/template.hbs b/ghost/email-service/lib/email-templates/template.hbs index 90576f5143..77671544f2 100644 --- a/ghost/email-service/lib/email-templates/template.hbs +++ b/ghost/email-service/lib/email-templates/template.hbs @@ -121,7 +121,7 @@ {{/if}} {{/if}} - -
Ghost © 2023 – Unsubscribe
+
+ {{#if feedbackButtons }} @@ -176,20 +176,31 @@ {{#if newsletter.showSubscriptionDetails}} - {{/if}}