From 48a3159d3df437e22fe745a237aecf7815cb346e Mon Sep 17 00:00:00 2001 From: Sanne de Vries Date: Fri, 17 Mar 2023 15:57:32 +0100 Subject: [PATCH] Added mobile feedback buttons to email template Refs https://github.com/TryGhost/Team/issues/2740 --- .../modals/newsletters/edit/preview.hbs | 2 +- ghost/admin/app/styles/layouts/members.css | 4 + .../__snapshots__/email-previews.test.js.snap | 100 ++++- .../admin/__snapshots__/stats.test.js.snap | 8 +- .../__snapshots__/batch-sending.test.js.snap | 368 ++++++++++++++++-- ghost/email-service/lib/email-renderer.js | 3 + .../partials/feedback-button-mobile.hbs | 6 + .../partials/feedback-button.hbs | 2 +- .../lib/email-templates/partials/styles.hbs | 35 +- .../lib/email-templates/template.hbs | 23 +- 10 files changed, 490 insertions(+), 61 deletions(-) create mode 100644 ghost/email-service/lib/email-templates/partials/feedback-button-mobile.hbs diff --git a/ghost/admin/app/components/modals/newsletters/edit/preview.hbs b/ghost/admin/app/components/modals/newsletters/edit/preview.hbs index abab2aff79..92741a4f0a 100644 --- a/ghost/admin/app/components/modals/newsletters/edit/preview.hbs +++ b/ghost/admin/app/components/modals/newsletters/edit/preview.hbs @@ -36,7 +36,7 @@ {{/if}}

- View in browser + View in browser

diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index ee65e3a302..77b176f46c 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/ghost/admin/app/styles/layouts/members.css @@ -2067,6 +2067,10 @@ p.gh-members-import-errordetail:first-of-type { flex-direction: column; } +.gh-members-emailpreview-meta.center-aligned .gh-members-emailpreview-view-online { + text-decoration: underline; +} + .gh-members-emailpreview-title p { margin: 0; padding: 0 0 10px; 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 b0b0214ed0..56365cf354 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 @@ -258,6 +258,18 @@ table.body .footer a { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -419,10 +431,10 @@ table.body figcaption a { - - @@ -448,7 +460,7 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 1970 + View in browser
- +
@@ -617,7 +629,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": "20097", + "content-length": "20381", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -789,6 +801,18 @@ table.body .footer a { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -950,10 +974,10 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- - @@ -983,7 +1007,7 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2015 + View in browser
- +
@@ -1168,7 +1192,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": "24920", + "content-length": "25204", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -1371,6 +1395,18 @@ table.body .footer a { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -1532,10 +1568,10 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- - @@ -1561,7 +1597,7 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 1970 + View in browser
- +
@@ -1737,7 +1773,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": "19863", + "content-length": "20147", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -2269,6 +2305,18 @@ table.body .footer a { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -2435,10 +2483,10 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- - @@ -2464,7 +2512,7 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 1970 + View in browser
- +
@@ -2645,7 +2693,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": "20355", + "content-length": "20639", "content-type": "application/json; charset=utf-8", "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, @@ -3203,6 +3251,18 @@ table.body .footer a { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -3369,10 +3429,10 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- - @@ -3398,7 +3458,7 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 1970 + View in browser
- +
@@ -3579,7 +3639,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": "20355", + "content-length": "20639", "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/e2e-api/admin/__snapshots__/stats.test.js.snap b/ghost/core/test/e2e-api/admin/__snapshots__/stats.test.js.snap index 889157ee88..64cde87e06 100644 --- a/ghost/core/test/e2e-api/admin/__snapshots__/stats.test.js.snap +++ b/ghost/core/test/e2e-api/admin/__snapshots__/stats.test.js.snap @@ -242,7 +242,7 @@ Object { "totals": Array [ Object { "cadence": "month", - "count": 3, + "count": 2, "tier": StringMatching /\\[a-f0-9\\]\\{24\\}/, }, ], @@ -251,11 +251,11 @@ Object { Object { "cadence": "month", "cancellations": 0, - "count": 3, + "count": 2, "date": StringMatching /\\\\d\\{4\\}-\\\\d\\{2\\}-\\\\d\\{2\\}/, "negative_delta": 1, - "positive_delta": 6, - "signups": 6, + "positive_delta": 5, + "signups": 5, "tier": StringMatching /\\[a-f0-9\\]\\{24\\}/, }, Object { 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 d987bfcdf9..b191c72045 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 @@ -151,6 +151,18 @@ table.body .footer a { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -317,10 +329,10 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- - @@ -354,7 +366,7 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- +
@@ -662,6 +674,18 @@ table.body .footer a { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -828,10 +852,10 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- - @@ -853,13 +877,43 @@ table.body figcaption a { + + +
+ By Joe Bloggs • 1 Jan 2023 + View in browser
+ + + +
+ + \\"More + + + + \\"Less + +
+ + + +
+ + \\"More +

More like this

+ + 		+ + \\"Less +

Less like this

+ +
+
- +
- + @@ -983,7 +1037,49 @@ Hello world -Ghost © 2023 – Unsubscribe [unsubscribe_url] + +http://127.0.0.1:2369/#/feedback/post-id/1/?uuid=member-uuid + + + +http://127.0.0.1:2369/#/feedback/post-id/0/?uuid=member-uuid + + + + + + + + + + + +More like this + + +[http://127.0.0.1:2369/#/feedback/post-id/1/?uuid=member-uuid] + + + + + +Less like this + + +[http://127.0.0.1:2369/#/feedback/post-id/0/?uuid=member-uuid] + + + + + + + + + + + + +Ghost © 2023 – Unsubscribe [http://127.0.0.1:2369/unsubscribe/?uuid=member-uuid&newsletter=requested-newsletter-uuid] @@ -1159,6 +1255,18 @@ table.body .footer a { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -1325,10 +1433,10 @@ table.body figcaption a {
Ghost © 2023 – UnsubscribeGhost © 2023 – Unsubscribe
- - @@ -1350,13 +1458,43 @@ table.body figcaption a { + + +
+ By Joe Bloggs • 1 Jan 2023 + View in browser
+ + + +
+ + \\"More + + + + \\"Less + +
+ + + +
+ + \\"More +

More like this

+ + 		+ + \\"Less +

Less like this

+ +
+
- +
- + @@ -1480,7 +1618,49 @@ Hello world -Ghost © 2023 – Unsubscribe [unsubscribe_url] + +http://127.0.0.1:2369/this-is-a-test-post-title-6/#/feedback/post-id/1/?uuid=member-uuid + + + +http://127.0.0.1:2369/this-is-a-test-post-title-6/#/feedback/post-id/0/?uuid=member-uuid + + + + + + + + + + + +More like this + + +[http://127.0.0.1:2369/this-is-a-test-post-title-6/#/feedback/post-id/1/?uuid=member-uuid] + + + + + +Less like this + + +[http://127.0.0.1:2369/this-is-a-test-post-title-6/#/feedback/post-id/0/?uuid=member-uuid] + + + + + + + + + + + + +Ghost © 2023 – Unsubscribe [http://127.0.0.1:2369/unsubscribe/?uuid=member-uuid&newsletter=requested-newsletter-uuid] @@ -1656,6 +1836,18 @@ table.body .footer a { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -1822,10 +2014,10 @@ table.body figcaption a {
Ghost © 2023 – UnsubscribeGhost © 2023 – Unsubscribe
- - @@ -1847,13 +2039,43 @@ table.body figcaption a { + + +
+ By Joe Bloggs • 1 Jan 2023 + View in browser
+ + + +
+ + \\"More + + + + \\"Less + +
+ + + +
+ + \\"More +

More like this

+ + 		+ + \\"Less +

Less like this

+ +
+
- +
- + @@ -1977,7 +2199,49 @@ Hello world -Ghost © 2023 – Unsubscribe [unsubscribe_url] + +http://127.0.0.1:2369/this-is-a-test-post-title-7/#/feedback/post-id/1/?uuid=member-uuid + + + +http://127.0.0.1:2369/this-is-a-test-post-title-7/#/feedback/post-id/0/?uuid=member-uuid + + + + + + + + + + + +More like this + + +[http://127.0.0.1:2369/this-is-a-test-post-title-7/#/feedback/post-id/1/?uuid=member-uuid] + + + + + +Less like this + + +[http://127.0.0.1:2369/this-is-a-test-post-title-7/#/feedback/post-id/0/?uuid=member-uuid] + + + + + + + + + + + + +Ghost © 2023 – Unsubscribe [http://127.0.0.1:2369/unsubscribe/?uuid=member-uuid&newsletter=requested-newsletter-uuid] @@ -2153,6 +2417,18 @@ table.body .footer a { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -2329,7 +2605,7 @@ table.body figcaption a {
Ghost © 2023 – UnsubscribeGhost © 2023 – Unsubscribe
- +
@@ -2608,6 +2884,18 @@ table.body .footer a { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -2774,10 +3062,10 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- - @@ -2803,7 +3091,7 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- +
@@ -4708,6 +4996,18 @@ table.body .footer a { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -4874,10 +5174,10 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- - @@ -4903,7 +5203,7 @@ table.body figcaption a {
+ By Joe Bloggs • 1 Jan 2023 + View in browser
- +
@@ -5207,6 +5507,18 @@ table.body .footer a { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + table.body .kg-bookmark-card { width: 90vw; } @@ -5373,10 +5685,10 @@ table.body figcaption a {
Ghost © 2023 – Unsubscribe
- - @@ -5402,7 +5714,7 @@ 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 47e53d42f3..f1032e0410 100644 --- a/ghost/email-service/lib/email-renderer.js +++ b/ghost/email-service/lib/email-renderer.js @@ -509,6 +509,9 @@ class EmailRenderer { const feedbackButtonPartial = await fs.readFile(path.join(__dirname, './email-templates/partials/', `feedback-button.hbs`), 'utf8'); this.#handlebars.registerPartial('feedbackButton', feedbackButtonPartial); + const feedbackButtonMobilePartial = await fs.readFile(path.join(__dirname, './email-templates/partials/', `feedback-button-mobile.hbs`), 'utf8'); + this.#handlebars.registerPartial('feedbackButtonMobile', feedbackButtonMobilePartial); + // Actual template const htmlTemplateSource = await fs.readFile(path.join(__dirname, './email-templates/', `template.hbs`), 'utf8'); this.#renderTemplate = this.#handlebars.compile(Buffer.from(htmlTemplateSource).toString()); diff --git a/ghost/email-service/lib/email-templates/partials/feedback-button-mobile.hbs b/ghost/email-service/lib/email-templates/partials/feedback-button-mobile.hbs new file mode 100644 index 0000000000..dd97ea94b7 --- /dev/null +++ b/ghost/email-service/lib/email-templates/partials/feedback-button-mobile.hbs @@ -0,0 +1,6 @@ + \ No newline at end of file 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 c26ccd1a94..232f2f7f99 100644 --- a/ghost/email-service/lib/email-templates/partials/feedback-button.hbs +++ b/ghost/email-service/lib/email-templates/partials/feedback-button.hbs @@ -1,5 +1,5 @@ \ 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 206bd9a2b7..40b85148af 100644 --- a/ghost/email-service/lib/email-templates/partials/styles.hbs +++ b/ghost/email-service/lib/email-templates/partials/styles.hbs @@ -372,10 +372,14 @@ figure blockquote p { .post-meta-center, .post-meta-center.view-online { display: inline-block; - width: 100%; + width: 100% !important; text-align: center; } +.post-meta-center.view-online { + text-decoration: underline; +} + .post-meta-date { white-space: nowrap; } @@ -420,6 +424,23 @@ figure blockquote p { color: #738a94; } +.feedback-buttons { + width: auto !important; + margin: auto; +} + +.feedback-buttons-mobile { + display: none !important; + width: auto !important; + margin: auto !important; +} + +.feedback-button-mobile-text { + color: #15212A; + font-size: 13px !important; + font-weight: 500; +} + .post-content { max-width: 600px !important; font-family: Georgia, serif; @@ -1034,6 +1055,18 @@ a[data-flickr-embed] img { line-height: 1.15em !important; } + table.feedback-buttons { + display: none !important; + } + + table.feedback-buttons-mobile { + display: block !important; + } + + table.body .feedback-button-mobile-text { + font-size: 13px !important; + } + 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 97cf6a2e77..62f8772e36 100644 --- a/ghost/email-service/lib/email-templates/template.hbs +++ b/ghost/email-service/lib/email-templates/template.hbs @@ -139,15 +139,26 @@ {{#if (or feedbackButtons newsletter.showCommentCta) }} -
Ghost © 2023 – Unsubscribe
+ + {{buttonText}} + + + - {{buttonText}} + {{buttonText}}
- +
+ {{#if feedbackButtons }} - {{> feedbackButton feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this.png?v=1" width="145px" }} - {{> feedbackButton feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this.png?v=1" width="142px" }} + {{> feedbackButton feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this.png" width="145" height="36" }} + {{> feedbackButton feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this.png" width="142" height="36" }} {{/if}} {{#if newsletter.showCommentCta}} - {{> feedbackButton href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment.png?v=1" width="122px" }} + {{> feedbackButton href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment.png" width="122" height="36" }} + {{/if}} + + + + + {{#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" }} + {{> feedbackButtonMobile feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this-mobile.png" width="42" height="42" }} + {{/if}} + {{#if newsletter.showCommentCta}} + {{> feedbackButtonMobile href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment-mobile.png" width="42" height="42" }} {{/if}} @@ -170,7 +181,7 @@
- +
{{#if footerContent }} {{/if}}
{{{footerContent}}}