mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-09-11 20:57:21 +03:00
🎨 Updated editor layout to be more mobile friendly (#19327)
Refs https://github.com/TryGhost/Ghost/issues/18690
This commit is contained in:
parent
5c19249473
commit
98ff45647c
@ -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}}
|
||||
|
@ -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"}}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -271,6 +271,7 @@
|
||||
}
|
||||
|
||||
.gh-post-list-title .gh-featured-post {
|
||||
flex-shrink: 0;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin: -2px 6px 0 0;
|
||||
|
@ -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;
|
||||
|
@ -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}}
|
||||
|
@ -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');
|
||||
|
||||
|
@ -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);
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user