TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-09-11 20:57:21 +03:00
Code Issues Projects Releases Wiki Activity

🎨 Updated editor layout to be more mobile friendly (#19327)

Browse Source 
Refs https://github.com/TryGhost/Ghost/issues/18690
This commit is contained in:
Sanne de Vries 2023-12-12 11:51:59 +01:00 committed by GitHub
parent 5c19249473
commit 98ff45647c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 176 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/gh-editor-feature-image.hbs
View File

@ -89,7 +89,7 @@
</div>
{{else}}
{{!-- no-image state --}}
<div class="flex flex-row items-center">
<div class="gh-editor-feature-image-add">
{{#if this.canDrop}}
<div class="gh-editor-feature-image-add-button"><span>Drop to upload feature image</span></div>
{{else}}

2
ghost/admin/app/components/gh-koenig-editor-lexical.hbs
View File

@ -22,7 +22,7 @@
@onTKCountChange={{@updateFeatureImageTkCount}}
/>
<div class="gh-editor-title-container page-improvements">
<div class="gh-editor-title-container">
{{#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"}}

10
ghost/admin/app/styles/components/koenig.css
View File

@ -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;
}
}

21
ghost/admin/app/styles/components/publishmenu.css
View File

@ -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;

21
ghost/admin/app/styles/components/settings-menu.css
View File

@ -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;
}
}

1
ghost/admin/app/styles/layouts/content.css
View File

@ -271,6 +271,7 @@
}
.gh-post-list-title .gh-featured-post {
flex-shrink: 0;
width: 11px;
height: 11px;
margin: -2px 6px 0 0;

135
ghost/admin/app/styles/layouts/editor.css
View File

@ -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;

34
ghost/admin/app/templates/lexical-editor.hbs
View File

@ -19,17 +19,13 @@
{{#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>
<span>
{{svg-jar "arrow-left"}}
Analytics
</span>
{{svg-jar "arrow-left"}}
<span>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>
<span>
{{svg-jar "arrow-left"}}
{{capitalize (pluralize this.post.displayName)}}
</span>
{{svg-jar "arrow-left"}}
<span>{{capitalize (pluralize this.post.displayName)}}</span>
</LinkTo>
{{/if}}
{{/if}}
@ -48,7 +44,7 @@
{{/if}}
</div>
<section class="flex items-center pe-auto h-100">
<section class="gh-editor-publish-buttons">
{{#unless this.post.isNew}}
<Editor::PublishButtons @publishManagement={{publishManagement}} />
{{#unless this.showSettingsMenu}}
@ -106,6 +102,26 @@
<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}}

8
ghost/core/test/e2e-browser/admin/publishing.spec.js
View File

@ -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');

3
ghost/core/test/e2e-browser/admin/site-settings.spec.js
View File

@ -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);
});