From 95a4895e8f049e1a393359733abf8a2d56df73ea Mon Sep 17 00:00:00 2001 From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com> Date: Mon, 1 Jul 2024 10:43:26 +0200 Subject: [PATCH] Center aligned feature image in email template (#20491) REF DES-380 - Center aligned feature image in email template - Updated feature image css in editor to better display image overlay and improve caption spacing --- .../components/gh-editor-feature-image.hbs | 2 +- ghost/admin/app/styles/layouts/editor.css | 51 ++++++++++++------- .../__snapshots__/email-previews.test.js.snap | 4 +- .../__snapshots__/batch-sending.test.js.snap | 2 +- .../email-templates/partials/styles-old.hbs | 1 + .../lib/email-templates/partials/styles.hbs | 1 + .../lib/email-templates/template-old.hbs | 2 +- .../lib/email-templates/template.hbs | 2 +- 8 files changed, 41 insertions(+), 24 deletions(-) diff --git a/ghost/admin/app/components/gh-editor-feature-image.hbs b/ghost/admin/app/components/gh-editor-feature-image.hbs index c6390324a2..0d934a7d87 100644 --- a/ghost/admin/app/components/gh-editor-feature-image.hbs +++ b/ghost/admin/app/components/gh-editor-feature-image.hbs @@ -50,7 +50,7 @@ {{svg-jar "koenig/kg-trash"}} -
+
{{#if this.isEditingAlt}} section.gh-editor-fullscreen { +.gh-main>section.gh-editor-fullscreen { position: fixed; top: 0; left: 0; @@ -449,7 +449,7 @@ .gh-editor-feedback-dropdown { min-width: 400px; border-radius: 3px; - box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 20px -3px rgba(0,0,0,.2); + box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 8px 20px -3px rgba(0, 0, 0, .2); padding: 20px; background-color: #fff; background-clip: padding-box; @@ -553,13 +553,20 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone { height: 4px; } +.gh-editor-feature-image { + position: relative; +} + +.gh-editor-feature-image img { + display: block; +} .gh-editor-feature-image-overlay { position: absolute; top: 0; left: 0; right: 0; - bottom: 100px; - background-image: linear-gradient(180deg,rgba(0,0,0,.2),transparent 40%,transparent); + bottom: 0; + background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 40%, transparent); transition: all .1s ease-in; opacity: 0; } @@ -677,12 +684,19 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone { stroke: var(--midgrey-l2); } +.gh-editor-feature-image-caption-container { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding: .8rem 0; +} .gh-editor-feature-image-alttext, .gh-editor-feature-image-caption { width: 100%; min-height: 24px; - margin: 0 0 1.2rem 0; - padding: 0; + margin: 0; + padding: 0 3.6rem 0 0; outline: none; border-width: 0; border-style: none; @@ -1058,7 +1072,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone { width: 100%; height: 100%; border: 2px solid var(--blue); - background-color: rgba(255,255,255,0.6); + background-color: rgba(255, 255, 255, 0.6); } .gh-editor-drop-target .drop-target-message { @@ -1109,6 +1123,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone { position: relative; vertical-align: bottom; } + .editor-toolbar .fa-check:before { position: absolute; right: 3px; @@ -1197,8 +1212,8 @@ figure { left: -20px; width: 20px; height: 100%; - background: rgb(255,255,255); - background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); + background: rgb(255, 255, 255); + background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); z-index: 999; opacity: 0; transition: all 250ms ease-out; @@ -1211,22 +1226,22 @@ figure { right: 0; width: 20px; height: 100%; - background: rgb(255,255,255); - background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); + background: rgb(255, 255, 255); + background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); z-index: 999; } .ember-power-select-option[aria-current="true"] .kg-settings-link-url.scroller::before { opacity: 1; left: 0; - background: linear-gradient(90deg, rgba(244,245,245,1) 0%, rgba(244,245,245,0) 100%); + background: linear-gradient(90deg, rgba(244, 245, 245, 1) 0%, rgba(244, 245, 245, 0) 100%); } .ember-power-select-option[aria-current="true"] .kg-settings-link-url::after { - background: linear-gradient(90deg, rgba(244,245,245,0) 0%, rgba(244,245,245,1) 100%); + background: linear-gradient(90deg, rgba(244, 245, 245, 0) 0%, rgba(244, 245, 245, 1) 100%); } -.kg-settings-link-url > span { +.kg-settings-link-url>span { display: inline-block; font-weight: 400; font-size: 1.2rem; @@ -1251,4 +1266,4 @@ figure { color: var(--red); font-weight: 300; letter-spacing: 0.3px; -} +} \ No newline at end of file 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 c36be50fb4..456afd4202 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 @@ -1148,7 +1148,7 @@ table.body h2 span { + \\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; vertical-align: top; color: #000000; padding-bottom: 30px; width: 100%; text-align: center;\\" width=\\"100%\\" valign=\\"top\\"> @@ -1360,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": "28343", + "content-length": "28380", "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 842178e287..82664a983f 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 @@ -422,7 +422,7 @@ table.body h2 span { \\"Testing + \\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; vertical-align: top; color: #000000; width: 100%; text-align: center; padding-bottom: 10px;\\" width=\\"100%\\" valign=\\"top\\">\\"Testing Testing feature image caption 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 ccf76f8693..4b2ba31394 100644 --- a/ghost/email-service/lib/email-templates/partials/styles-old.hbs +++ b/ghost/email-service/lib/email-templates/partials/styles-old.hbs @@ -463,6 +463,7 @@ figure blockquote p { .feature-image { padding-bottom: 30px; width: 100%; + text-align: center; } .feature-image-row:first-child > td, diff --git a/ghost/email-service/lib/email-templates/partials/styles.hbs b/ghost/email-service/lib/email-templates/partials/styles.hbs index 34e0533eb3..8b27fd6522 100644 --- a/ghost/email-service/lib/email-templates/partials/styles.hbs +++ b/ghost/email-service/lib/email-templates/partials/styles.hbs @@ -454,6 +454,7 @@ figure blockquote p { .feature-image { padding-bottom: 30px; width: 100%; + text-align: center; } .feature-image-with-caption { diff --git a/ghost/email-service/lib/email-templates/template-old.hbs b/ghost/email-service/lib/email-templates/template-old.hbs index aee60dbeea..15d0b5705e 100644 --- a/ghost/email-service/lib/email-templates/template-old.hbs +++ b/ghost/email-service/lib/email-templates/template-old.hbs @@ -115,7 +115,7 @@ {{#if post.feature_image_caption }} feature-image-with-caption {{/if}} - ">