TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-28 21:33:24 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Refs https://github.com/TryGhost/Product/issues/3712
This commit is contained in:
Sanne de Vries 2023-11-22 17:55:25 +01:00 committed by GitHub
parent 82a775086c
commit 329488139a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 170 additions and 56 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

@ -81,7 +81,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

@ -21,7 +21,7 @@
@isHidden={{or (not @cardOptions.post.showTitleAndFeatureImage) false}}
/>
<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;
@ -684,8 +741,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;
@ -707,23 +766,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);
}
}
@ -741,6 +801,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;
}
@ -785,6 +851,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;
@ -799,6 +878,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;
@ -1062,7 +1147,7 @@ figure {
/* Labs
/* ---------------------------------------------------------- */
.gh-editor-title-container.page-improvements {
.gh-editor-title-container {
position: relative;
max-width: 740px;
width: 100%;
@ -1072,7 +1157,7 @@ figure {
background: transparent;
}
.gh-editor .page-improvements .gh-editor-title {
.gh-editor .gh-editor-title {
display: block;
width: 100%;
max-width: unset;
@ -1089,6 +1174,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

@ -18,17 +18,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}}
@ -47,7 +43,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}}
@ -102,6 +98,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}}