Revert "🎨 Updated editor layout to be more mobile friendly (#19103)" (#19108)

no refs This reverts commit 329488139a. - updates for mobile result in the locator queries finding two elements instead of one, causing tests to fail - reverting for now until we take a look closer with mobile, as it seems CI is running at a mobile size
2025-02-03 23:00:14 -05:00 · 2023-11-22 13:26:17 -06:00 · 2023-11-22 13:26:17 -06:00 · f981993ba4
commit f981993ba4
parent 4b1f61f947
8 changed files with 56 additions and 170 deletions
--- a/ghost/admin/app/components/gh-editor-feature-image.hbs
+++ b/ghost/admin/app/components/gh-editor-feature-image.hbs
@ -81,7 +81,7 @@
            </div>
        {{else}}
            {{!-- no-image state --}}
-            <div class="gh-editor-feature-image-add">
+            <div class="flex flex-row items-center">
                {{#if this.canDrop}}
                    <div class="gh-editor-feature-image-add-button"><span>Drop to upload feature image</span></div>
                {{else}}
--- a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
+++ b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
@ -21,7 +21,7 @@
            @isHidden={{or (not @cardOptions.post.showTitleAndFeatureImage) false}}
        />

-        <div class="gh-editor-title-container">
+        <div class="gh-editor-title-container page-improvements">
            {{#if (and (not @cardOptions.post.showTitleAndFeatureImage) (not @featureImage))}}
                <span class="gh-editor-hidden-indicator" data-tooltip="Post title is hidden on page">
                    {{svg-jar "eye-closed"}}
--- a/ghost/admin/app/styles/components/koenig.css
+++ b/ghost/admin/app/styles/components/koenig.css
@ -18,9 +18,15 @@
    padding: 11vw 92px;
 }

-@media (max-width: 768px) {
+@media (min-width: 500px) and (max-width: 960px) {
    .gh-koenig-editor-pane {
-        padding: 56px 32px;
+        padding: 15vw 92px;
+    }
+}
+
+@media (max-width: 500px) {
+    .gh-koenig-editor-pane {
+        padding: 20vw 32px;
    }
 }

--- a/ghost/admin/app/styles/components/publishmenu.css
+++ b/ghost/admin/app/styles/components/publishmenu.css
@ -18,13 +18,6 @@
    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;
@ -357,18 +350,12 @@
    line-height: 1.2em;
 }

-@media (max-width: 1024px) {
+@media (max-width: 560px) {
    .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%;
@ -734,12 +721,6 @@
    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;
--- 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: 12px;
+        top: 16px;
    }
 }

@media (max-width: 500px) {
    .settings-menu-toggle {
-        top: 11px;
+        top: 15px;
        right: 20px;
    }
 }
@ -70,6 +70,12 @@
    }
 }

+@media (max-width: 800px) {
+    .settings-menu-container {
+        padding-bottom: 64px;
+    }
+}
+
@media (max-width: 500px) {
    .settings-menu-container {
        width: 100vw;
@ -117,6 +123,7 @@
    position: fixed;
    display: flex;
    width: 100%;
+    max-width: 364px;
    padding: 36px 24px 24px;
    justify-content: space-between;
    align-items: center;
@ -124,9 +131,15 @@
    background: var(--white);
 }

-@media (max-width: 1024px) {
+@media (min-width: 500px) and (max-width: 1024px) {
    .settings-menu-header {
-        padding-top: 15px;
+        padding-top: 17px;
+    }
+}
+
+@media (max-width: 500px) {
+    .settings-menu-header {
+        padding-top: 19px;
    }
 }

--- a/ghost/admin/app/styles/layouts/content.css
+++ b/ghost/admin/app/styles/layouts/content.css
@ -271,7 +271,6 @@
 }

 .gh-post-list-title .gh-featured-post {
-    flex-shrink: 0;
    width: 11px;
    height: 11px;
    margin: -2px 6px 0 0;
--- 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: 56px;
+        height: 64px;
        margin: 0;
        padding: 0;
        padding-left: 15px;
@ -329,6 +329,12 @@
    }
 }

+@media (max-width: 500px) {
+    .gh-editor-header .mobile {
+        margin-left: 5px;
+    }
+}
+
 .gh-btn-editor {
    background: var(--white) !important;
 }
@ -373,57 +379,6 @@
    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);
@ -607,18 +562,6 @@ 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;
@ -741,10 +684,8 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
 }

 .gh-editor-back-button {
-    display: flex;
-    align-items: center;
    height: 34px;
-    gap: 8px;
+    margin-right: 8px;
    padding: 0 12px;
    outline: none;
    border: none;
@ -766,24 +707,23 @@ 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: 1.2rem;
-    height: 1.2rem;
+    width: .8em;
+    height: .8em;
    margin-right: .5em;
    padding-top: 2px;
    fill: var(--darkgrey);
 }

@media (max-width: 500px) {
-    .gh-editor-back-button span {
-        display: none;
-    }
-
-    .gh-editor-back-button svg {
-        width: 1.3rem;
-        height: 1.3rem;
+    .gh-editor-back-button {
        margin-right: 0;
-        fill: var(--midgrey-l1);
    }
 }

@ -801,12 +741,6 @@ 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;
 }
@ -851,19 +785,6 @@ 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;
@ -878,12 +799,6 @@ 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;
@ -1147,7 +1062,7 @@ figure {
 /* Labs
 /* ---------------------------------------------------------- */

-.gh-editor-title-container {
+.gh-editor-title-container.page-improvements {
    position: relative;
    max-width: 740px;
    width: 100%;
@ -1157,7 +1072,7 @@ figure {
    background: transparent;
 }

-.gh-editor .gh-editor-title {
+.gh-editor .page-improvements .gh-editor-title {
    display: block;
    width: 100%;
    max-width: unset;
@ -1174,18 +1089,6 @@ 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;
--- a/ghost/admin/app/templates/lexical-editor.hbs
+++ b/ghost/admin/app/templates/lexical-editor.hbs
@ -19,13 +19,17 @@
                        {{#if this.ui.isFullScreen}}
                            {{#if this.fromAnalytics }}
                                <LinkTo @route="posts.analytics" @model={{this.post}} class="gh-btn-editor gh-editor-back-button" data-test-breadcrumb>
-                                    {{svg-jar "arrow-left"}}
-                                    <span>Analytics</span>
+                                    <span>
+                                        {{svg-jar "arrow-left"}}
+                                        Analytics
+                                    </span>
                                </LinkTo>
                            {{else}}
                                <LinkTo @route={{pluralize this.post.displayName }} class="gh-btn-editor gh-editor-back-button" data-test-link={{pluralize this.post.displayName}} data-test-breadcrumb>
-                                    {{svg-jar "arrow-left"}}
-                                    <span>{{capitalize (pluralize this.post.displayName)}}</span>
+                                    <span>
+                                        {{svg-jar "arrow-left"}}
+                                        {{capitalize (pluralize this.post.displayName)}}
+                                    </span>
                                </LinkTo>
                            {{/if}}
                        {{/if}}
@ -44,7 +48,7 @@
                        {{/if}}
                    </div>

-                    <section class="gh-editor-publish-buttons">
+                    <section class="flex items-center pe-auto h-100">
                        {{#unless this.post.isNew}}
                            <Editor::PublishButtons @publishManagement={{publishManagement}} />
                            {{#unless this.showSettingsMenu}}
@ -100,26 +104,6 @@
                <a href="https://ghost.org/help/using-the-editor/" class="flex" target="_blank" rel="noopener noreferrer">{{svg-jar "help"}}</a>
            </div>

-            <div class="gh-editor-mobile-menu">
-                <Editor::PublishManagement
-                    @post={{this.post}}
-                    @hasUnsavedChanges={{this.hasDirtyAttributes}}
-                    @beforePublish={{perform this.beforeSaveTask}}
-                    @afterPublish={{this.afterSave}}
-                    @saveTask={{this.saveTask}}
-                    as |publishManagement|
-                >
-                    <div class="gh-editor-wordcount">
-                        {{gh-pluralize this.wordCount "word"}}
-                    </div>
-                    <section class="gh-editor-publish-buttons">
-                        {{#unless this.post.isNew}}
-                            <Editor::PublishButtons @publishManagement={{publishManagement}} />
-                        {{/unless}}
-                    </section>
-                </Editor::PublishManagement>
-            </div>
-
        </GhEditor>

        {{#if this.showSettingsMenu}}