From 98ff45647c498f13d039b021f97fe46f01c184c5 Mon Sep 17 00:00:00 2001 From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com> Date: Tue, 12 Dec 2023 11:51:59 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Updated=20editor=20layout=20to?= =?UTF-8?q?=20be=20more=20mobile=20friendly=20(#19327)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refs https://github.com/TryGhost/Ghost/issues/18690 --- .../components/gh-editor-feature-image.hbs | 2 +- .../components/gh-koenig-editor-lexical.hbs | 2 +- ghost/admin/app/styles/components/koenig.css | 10 +- .../app/styles/components/publishmenu.css | 21 ++- .../app/styles/components/settings-menu.css | 21 +-- ghost/admin/app/styles/layouts/content.css | 1 + ghost/admin/app/styles/layouts/editor.css | 135 +++++++++++++++--- ghost/admin/app/templates/lexical-editor.hbs | 34 +++-- .../test/e2e-browser/admin/publishing.spec.js | 8 +- .../e2e-browser/admin/site-settings.spec.js | 3 +- 10 files changed, 176 insertions(+), 61 deletions(-) diff --git a/ghost/admin/app/components/gh-editor-feature-image.hbs b/ghost/admin/app/components/gh-editor-feature-image.hbs index ddda57309c..66775bb48d 100644 --- a/ghost/admin/app/components/gh-editor-feature-image.hbs +++ b/ghost/admin/app/components/gh-editor-feature-image.hbs @@ -89,7 +89,7 @@ {{else}} {{!-- no-image state --}} -
+
{{#if this.canDrop}}
Drop to upload feature image
{{else}} diff --git a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs index 12b88c3032..e8c702924d 100644 --- a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs +++ b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs @@ -22,7 +22,7 @@ @onTKCountChange={{@updateFeatureImageTkCount}} /> -
+
{{#if (and (not @cardOptions.post.showTitleAndFeatureImage) (not @featureImage))}} {{svg-jar "eye-closed"}} diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css index b0fe69b499..0ee47a2803 100644 --- a/ghost/admin/app/styles/components/koenig.css +++ b/ghost/admin/app/styles/components/koenig.css @@ -18,15 +18,9 @@ padding: 11vw 92px; } -@media (min-width: 500px) and (max-width: 960px) { +@media (max-width: 768px) { .gh-koenig-editor-pane { - padding: 15vw 92px; - } -} - -@media (max-width: 500px) { - .gh-koenig-editor-pane { - padding: 20vw 32px; + padding: 56px 32px; } } diff --git a/ghost/admin/app/styles/components/publishmenu.css b/ghost/admin/app/styles/components/publishmenu.css index f913477383..6249845030 100644 --- a/ghost/admin/app/styles/components/publishmenu.css +++ b/ghost/admin/app/styles/components/publishmenu.css @@ -18,6 +18,13 @@ outline: 0; } +@media (max-width: 500px) { + .publish-modal .gh-publish-trigger, + .publish-modal .gh-unpublish-trigger { + display: none; + } +} + .gh-date-time-picker { position: relative; display: flex; @@ -350,12 +357,18 @@ line-height: 1.2em; } -@media (max-width: 560px) { +@media (max-width: 1024px) { .gh-publish-title { font-size: 3.6rem; } } +@media (max-width: 500px) { + .gh-publish-title { + font-size: 3rem; + } +} + .gh-publish-settings { margin: 1rem 0 5.2rem; width: 100%; @@ -721,6 +734,12 @@ white-space: nowrap; } +@media (max-width: 500px) { + .gh-publish-confirmation { + font-size: 1.6rem; + } +} + .gh-publish-confirmation + .gh-box-error { margin: -4rem 0 4.8rem; padding: 16px 20px; diff --git a/ghost/admin/app/styles/components/settings-menu.css b/ghost/admin/app/styles/components/settings-menu.css index 29f3440976..fa2e25f10f 100644 --- a/ghost/admin/app/styles/components/settings-menu.css +++ b/ghost/admin/app/styles/components/settings-menu.css @@ -18,13 +18,13 @@ @media (min-width: 500px) and (max-width: 1024px) { .settings-menu-toggle { - top: 16px; + top: 12px; } } @media (max-width: 500px) { .settings-menu-toggle { - top: 15px; + top: 11px; right: 20px; } } @@ -70,12 +70,6 @@ } } -@media (max-width: 800px) { - .settings-menu-container { - padding-bottom: 64px; - } -} - @media (max-width: 500px) { .settings-menu-container { width: 100vw; @@ -123,7 +117,6 @@ position: fixed; display: flex; width: 100%; - max-width: 364px; padding: 36px 24px 24px; justify-content: space-between; align-items: center; @@ -131,15 +124,9 @@ background: var(--white); } -@media (min-width: 500px) and (max-width: 1024px) { +@media (max-width: 1024px) { .settings-menu-header { - padding-top: 17px; - } -} - -@media (max-width: 500px) { - .settings-menu-header { - padding-top: 19px; + padding-top: 15px; } } diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css index 5dabcf8bfa..03a9e4e0d7 100644 --- a/ghost/admin/app/styles/layouts/content.css +++ b/ghost/admin/app/styles/layouts/content.css @@ -271,6 +271,7 @@ } .gh-post-list-title .gh-featured-post { + flex-shrink: 0; width: 11px; height: 11px; margin: -2px 6px 0 0; diff --git a/ghost/admin/app/styles/layouts/editor.css b/ghost/admin/app/styles/layouts/editor.css index be44f97f09..8c990f7bb6 100644 --- a/ghost/admin/app/styles/layouts/editor.css +++ b/ghost/admin/app/styles/layouts/editor.css @@ -320,7 +320,7 @@ @media (max-width: 1024px) { .gh-editor-header { z-index: 100; - height: 64px; + height: 56px; margin: 0; padding: 0; padding-left: 15px; @@ -329,12 +329,6 @@ } } -@media (max-width: 500px) { - .gh-editor-header .mobile { - margin-left: 5px; - } -} - .gh-btn-editor { background: var(--white) !important; } @@ -379,6 +373,57 @@ stroke: var(--midgrey-l2); } +@media (max-width: 500px) { + .gh-editor-wordcount-container { + display: none; + } +} + +.gh-editor-mobile-menu { + display: none; +} + +@media (max-width: 500px) { + .gh-editor-mobile-menu { + position: absolute; + bottom: 0; + left: 0; + right: 0; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.2rem; + height: 48px; + padding: 0 32px; + background: var(--white); + } + + .gh-editor-mobile-menu .gh-editor-wordcount { + padding: 0; + } + + .gh-editor-mobile-menu svg { + width: 16px; + height: 16px; + } + + .gh-editor-mobile-menu .gh-editor-publish-buttons { + display: flex; + align-items: center; + gap: 1.6rem; + } + + .gh-editor-mobile-menu .gh-btn-editor:hover { + background: none !important; + } + + .gh-editor-mobile-menu .gh-btn-editor span { + height: 100%; + padding: 0; + font-size: 1.3rem; + } +} + .gh-editor-wordcount { padding: 0 4px 0 14px; color: var(--midgrey-l2); @@ -562,6 +607,18 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone { fill: var(--darkgrey); } +.gh-editor-feature-image-add { + display: flex; + flex-direction: row; + align-items: center; +} + +@media (max-width: 768px) { + .gh-editor-feature-image-add { + padding-top: 1.6rem; + } +} + .gh-editor-feature-image-add-button { display: flex; align-items: center; @@ -701,8 +758,10 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone { } .gh-editor-back-button { + display: flex; + align-items: center; height: 34px; - margin-right: 8px; + gap: 8px; padding: 0 12px; outline: none; border: none; @@ -724,23 +783,24 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone { background: var(--whitegrey); } -.gh-editor-back-button span { - display: flex; - justify-content: center; - align-items: center; -} - .gh-editor-back-button svg { - width: .8em; - height: .8em; + width: 1.2rem; + height: 1.2rem; margin-right: .5em; padding-top: 2px; fill: var(--darkgrey); } @media (max-width: 500px) { - .gh-editor-back-button { + .gh-editor-back-button span { + display: none; + } + + .gh-editor-back-button svg { + width: 1.3rem; + height: 1.3rem; margin-right: 0; + fill: var(--midgrey-l1); } } @@ -758,6 +818,12 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone { border-radius: 3px; } +@media (max-width: 500px) { + .gh-editor-post-status { + padding: 0 8px; + } +} + .gh-editor-post-status-btn { position: relative; } @@ -802,6 +868,19 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone { font-weight: 500; } +.gh-editor-publish-buttons { + display: flex; + align-items: center; + height: 100%; + pointer-events: auto; +} + +@media (max-width: 500px) { + .gh-editor-publish-buttons { + display: none; + } +} + .gh-lexical-indicator { margin: 1px 0 0 8px; padding: 1px 8px; @@ -816,6 +895,12 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone { margin-right: 8px; } +@media (max-width: 500px) { + .gh-editor-save-trigger { + margin-right: 0; + } +} + .gh-editor-preview-trigger { background: var(--white); font-size: 1.35rem; @@ -1083,7 +1168,7 @@ figure { /* Labs /* ---------------------------------------------------------- */ -.gh-editor-title-container.page-improvements { +.gh-editor-title-container { position: relative; max-width: 740px; width: 100%; @@ -1093,7 +1178,7 @@ figure { background: transparent; } -.gh-editor .page-improvements .gh-editor-title { +.gh-editor .gh-editor-title { display: block; width: 100%; max-width: unset; @@ -1110,6 +1195,18 @@ figure { box-shadow: none; } +@media (min-width: 500px) and (max-width: 768px) { + .gh-editor .gh-editor-title { + font-size: 3.6rem; + } +} + +@media (max-width: 500px) { + .gh-editor .gh-editor-title { + font-size: 2.8rem; + } +} + .gh-editor-hidden-indicator { position: absolute; top: -1px; diff --git a/ghost/admin/app/templates/lexical-editor.hbs b/ghost/admin/app/templates/lexical-editor.hbs index 3d7cd95c9a..29a48b347b 100644 --- a/ghost/admin/app/templates/lexical-editor.hbs +++ b/ghost/admin/app/templates/lexical-editor.hbs @@ -19,17 +19,13 @@ {{#if this.ui.isFullScreen}} {{#if this.fromAnalytics }} - - {{svg-jar "arrow-left"}} - Analytics - + {{svg-jar "arrow-left"}} + Analytics {{else}} - - {{svg-jar "arrow-left"}} - {{capitalize (pluralize this.post.displayName)}} - + {{svg-jar "arrow-left"}} + {{capitalize (pluralize this.post.displayName)}} {{/if}} {{/if}} @@ -48,7 +44,7 @@ {{/if}}
-
+
{{#unless this.post.isNew}} {{#unless this.showSettingsMenu}} @@ -106,6 +102,26 @@ {{svg-jar "help"}}
+
+ +
+ {{gh-pluralize this.wordCount "word"}} +
+
+ {{#unless this.post.isNew}} + + {{/unless}} +
+ +
+ {{#if this.showSettingsMenu}} diff --git a/ghost/core/test/e2e-browser/admin/publishing.spec.js b/ghost/core/test/e2e-browser/admin/publishing.spec.js index b3c4548297..736a00b2d3 100644 --- a/ghost/core/test/e2e-browser/admin/publishing.spec.js +++ b/ghost/core/test/e2e-browser/admin/publishing.spec.js @@ -91,7 +91,7 @@ const createPage = async (page, {title = 'Hello world', body = 'This is my post * @param {import('@playwright/test').Page} page */ const openPublishFlow = async (page) => { - await page.locator('[data-test-button="publish-flow"]').click(); + await page.locator('[data-test-button="publish-flow"]').first().click(); }; /** @@ -314,7 +314,7 @@ test.describe('Publishing', () => { await adminPage.fill('[data-test-field="custom-excerpt"]', 'Short description and meta'); // save - await adminPage.locator('[data-test-button="publish-save"]').click(); + await adminPage.locator('[data-test-button="publish-save"]').first().click(); // check front-end has new text after reloading await frontendPage.waitForTimeout(300); // let save go through @@ -447,7 +447,7 @@ test.describe('Publishing', () => { await checkPostNotPublished(testsharedPage, postData); // Now unschedule this post - await sharedPage.locator('[data-test-button="update-flow"]').click(); + await sharedPage.locator('[data-test-button="update-flow"]').first().click(); await sharedPage.locator('[data-test-button="revert-to-draft"]').click(); // Check status @@ -620,7 +620,7 @@ test.describe('Updating post access', () => { // go to publish a post await createPostDraft(page, {title: 'Published in timezones', body: 'Published in timezones'}); - await page.locator('[data-test-button="publish-flow"]').click(); + await page.locator('[data-test-button="publish-flow"]').first().click(); await expect(page.locator('[data-test-setting="publish-type"] [data-test-setting-title]')).toContainText('Publish'); diff --git a/ghost/core/test/e2e-browser/admin/site-settings.spec.js b/ghost/core/test/e2e-browser/admin/site-settings.spec.js index 6269576e41..7b512e4bd9 100644 --- a/ghost/core/test/e2e-browser/admin/site-settings.spec.js +++ b/ghost/core/test/e2e-browser/admin/site-settings.spec.js @@ -66,7 +66,8 @@ test.describe('Site Settings', () => { title: 'Test post', body: 'Test post content' }); - await sharedPage.locator('[data-test-button="publish-flow"]').click(); + await sharedPage.locator('[data-test-button="publish-flow"]').first().click(); + await expect(sharedPage.locator('[data-test-setting="publish-type"] > button')).toHaveCount(0); await expect(sharedPage.locator('[data-test-setting="email-recipients"]')).toHaveCount(0); });