From c3476739e77ae0fd526090de541cc186f3d82ec9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?= Date: Thu, 28 Nov 2024 12:46:34 +0100 Subject: [PATCH 1/5] Updated feedback buttons styling in newsletters It now won't break the layout in different translations. --- .../email-templates/partials/feedback-button.hbs | 3 +-- .../lib/email-templates/partials/styles.hbs | 14 ++++++-------- ghost/i18n/locales/nl/newsletter.json | 2 +- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/ghost/email-service/lib/email-templates/partials/feedback-button.hbs b/ghost/email-service/lib/email-templates/partials/feedback-button.hbs index 352c01f5906..95080b29397 100644 --- a/ghost/email-service/lib/email-templates/partials/feedback-button.hbs +++ b/ghost/email-service/lib/email-templates/partials/feedback-button.hbs @@ -1,7 +1,6 @@ - + {{buttonText}} - {{!-- Button text possible values: {{t 'More like this'}} {{t 'Less like this'}} {{t 'Comment'}} --}} \ No newline at end of file diff --git a/ghost/email-service/lib/email-templates/partials/styles.hbs b/ghost/email-service/lib/email-templates/partials/styles.hbs index b1e9be7a77b..838d9cc7e7d 100644 --- a/ghost/email-service/lib/email-templates/partials/styles.hbs +++ b/ghost/email-service/lib/email-templates/partials/styles.hbs @@ -510,18 +510,19 @@ figure blockquote p { } .feedback-buttons img { - display: inline-block; + display: block; + margin: 0 auto; vertical-align: middle; } .feedback-button-text { - display: inline; - padding-left: 8px; + display: inline-block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; color: #15212A; font-size: 13px !important; font-weight: 500; - margin-bottom: 0; + margin: 1em 0 0 0; + line-height: 1.4em; } /* ------------------------------------- @@ -1490,10 +1491,7 @@ a[data-flickr-embed] img { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { diff --git a/ghost/i18n/locales/nl/newsletter.json b/ghost/i18n/locales/nl/newsletter.json index 3eefa121a6f..98861169e89 100644 --- a/ghost/i18n/locales/nl/newsletter.json +++ b/ghost/i18n/locales/nl/newsletter.json @@ -1,6 +1,6 @@ { "By {authors}": "Door {authors}", - "Comment": "Opmerking", + "Comment": "Reageren", "complimentary": "gratis", "Email": "E-mail", "free": "gratis", From b04b9a7172f2f53f2f3c0e0a15ccdaf473bf4ba5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?= Date: Thu, 28 Nov 2024 12:57:35 +0100 Subject: [PATCH 2/5] Added word-break to feedback buttons in email --- ghost/email-service/lib/email-templates/partials/styles.hbs | 1 + 1 file changed, 1 insertion(+) diff --git a/ghost/email-service/lib/email-templates/partials/styles.hbs b/ghost/email-service/lib/email-templates/partials/styles.hbs index 838d9cc7e7d..15481349702 100644 --- a/ghost/email-service/lib/email-templates/partials/styles.hbs +++ b/ghost/email-service/lib/email-templates/partials/styles.hbs @@ -523,6 +523,7 @@ figure blockquote p { font-weight: 500; margin: 1em 0 0 0; line-height: 1.4em; + word-break: break-word; } /* ------------------------------------- From b99cb15386879c40dfaa04782e3f256339a9bb3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?= Date: Thu, 28 Nov 2024 15:19:41 +0100 Subject: [PATCH 3/5] Revert translation changes --- .../lib/email-templates/partials/feedback-button.hbs | 1 + ghost/i18n/locales/nl/newsletter.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/ghost/email-service/lib/email-templates/partials/feedback-button.hbs b/ghost/email-service/lib/email-templates/partials/feedback-button.hbs index 95080b29397..57efa82c7a2 100644 --- a/ghost/email-service/lib/email-templates/partials/feedback-button.hbs +++ b/ghost/email-service/lib/email-templates/partials/feedback-button.hbs @@ -2,5 +2,6 @@ {{buttonText}} + {{!-- Button text possible values: {{t 'More like this'}} {{t 'Less like this'}} {{t 'Comment'}} --}} \ No newline at end of file diff --git a/ghost/i18n/locales/nl/newsletter.json b/ghost/i18n/locales/nl/newsletter.json index 98861169e89..3eefa121a6f 100644 --- a/ghost/i18n/locales/nl/newsletter.json +++ b/ghost/i18n/locales/nl/newsletter.json @@ -1,6 +1,6 @@ { "By {authors}": "Door {authors}", - "Comment": "Reageren", + "Comment": "Opmerking", "complimentary": "gratis", "Email": "E-mail", "free": "gratis", From a884ac3753bbe348be7d48196ca4676e700c89fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?= Date: Thu, 28 Nov 2024 15:23:13 +0100 Subject: [PATCH 4/5] Updated snapshots --- .../__snapshots__/batch-sending.test.js.snap | 104 +++++------------- .../__snapshots__/cards.test.js.snap | 20 +--- 2 files changed, 32 insertions(+), 92 deletions(-) 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 7e6e9e89d02..c38ba19b572 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 @@ -215,10 +215,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -900,10 +897,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -1561,10 +1555,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -2222,10 +2213,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -2883,10 +2871,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -3492,10 +3477,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -4153,10 +4135,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -4444,20 +4423,20 @@ table.body h2 span { -
+ - \\"More -

More like this

+ \\"More +

More like this

-
+ - \\"Less -

Less like this

+ \\"Less +

Less like this

-
+ - \\"Comment\\" -

Comment

+ \\"Comment\\" +

Comment

@@ -4874,10 +4853,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -5165,10 +5141,10 @@ table.body h2 span { -
+ - \\"Comment\\" -

Comment

+ \\"Comment\\" +

Comment

@@ -6931,10 +6907,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -7737,10 +7710,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -8453,10 +8423,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -9169,10 +9136,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -9885,10 +9849,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -10601,10 +10562,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -11317,10 +11275,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -11980,10 +11935,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { 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 20df17b2510..fecf8d6afa8 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 @@ -215,10 +215,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -876,10 +873,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -1537,10 +1531,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -2733,10 +2724,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { From 1b08b27454e62464a3fc48bd25f744ab62e2272e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?= Date: Thu, 28 Nov 2024 15:35:13 +0100 Subject: [PATCH 5/5] Updated snapshots (e2e) --- .../__snapshots__/email-previews.test.js.snap | 35 ++++++------------- 1 file changed, 10 insertions(+), 25 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 cc5d7cf83d6..1894f17c700 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 @@ -322,10 +322,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -782,7 +779,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": "24870", + "content-length": "24766", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -1018,10 +1015,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -1500,7 +1494,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": "29650", + "content-length": "29546", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -1767,10 +1761,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -2234,7 +2225,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": "24624", + "content-length": "24520", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -2830,10 +2821,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -3311,7 +3299,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": "25407", + "content-length": "25303", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -3933,10 +3921,7 @@ table.body .footer a { } table.body .feedback-button-text { - display: block !important; - padding-top: 4px !important; - padding-left: 0px !important; - font-size: 13px !important; + display: none!important; } table.body .latest-posts-header { @@ -4414,7 +4399,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": "25407", + "content-length": "25303", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,