Fixed publishing flow responsive issues

No ref
This commit is contained in:
Sanne de Vries 2022-05-16 15:22:14 +02:00
parent 3b088cbd77
commit 5a6066d064
8 changed files with 82 additions and 37 deletions

View File

@ -5,16 +5,14 @@
</button>
{{#if (and (not this.emailErrorMessage) (not this.isComplete))}}
<div class="flex">
<div>
<button
type="button"
class="gh-btn gh-btn-editor gh-editor-preview-trigger"
{{on "click" @data.togglePreviewPublish}}
>
<span>Preview</span>
</button>
</div>
<div class="flex items-center pe-auto h-100">
<button
type="button"
class="gh-btn gh-btn-editor gh-editor-preview-trigger"
{{on "click" @data.togglePreviewPublish}}
>
<span>Preview</span>
</button>
<button class="gh-btn gh-btn-editor darkgrey gh-publish-trigger active" title="Close" type="button" {{on "click" @close}}>
<span>Publish</span>
</button>

View File

@ -1,15 +1,14 @@
{{#if this.publishOptions.user.isContributor}}
{{#if @post.isDraft}}
<div {{on-key "cmd+p" this.togglePreview}}>
<button
type="button"
class="gh-btn gh-btn-editor gh-editor-preview-trigger"
{{on "click" this.openPreview}}
data-test-button="contributor-preview"
>
<span>Preview</span>
</button>
</div>
<button
type="button"
class="gh-btn gh-btn-editor gh-editor-preview-trigger"
{{on "click" this.openPreview}}
{{on-key "cmd+p" this.togglePreview}}
data-test-button="contributor-preview"
>
<span>Preview</span>
</button>
{{/if}}
<GhTaskButton
@ -20,16 +19,15 @@
data-test-button="contributor-save" />
{{else}}
{{#if @post.isDraft}}
<div {{on-key "cmd+p" this.togglePreview}}>
<button
type="button"
class="gh-btn gh-editor-preview-trigger"
{{on "click" this.openPreview}}
data-test-button="publish-preview"
>
<span>Preview</span>
</button>
</div>
<button
type="button"
class="gh-btn gh-editor-preview-trigger"
{{on "click" this.openPreview}}
{{on-key "cmd+p" this.togglePreview}}
data-test-button="publish-preview"
>
<span>Preview</span>
</button>
<button
type="button"

View File

@ -13,7 +13,6 @@ export default class Error404Route extends Route {
buildRouteInfoMetadata() {
return {
titleToken: 'Error',
mainClasses: ['gh-main-white']
};
}
}

View File

@ -82,7 +82,7 @@
}
@media (max-width: 900px) {
.epm-modal {
.epm-modal:not(.fullscreen-modal-total-overlay) {
padding: 10px;
}
}

View File

@ -471,6 +471,8 @@
@media (max-width: 1024px) {
.gh-publish-header {
z-index: 100;
display: flex;
align-items: center;
height: 64px;
margin: 0;
padding: 0;
@ -524,10 +526,17 @@
display: flex;
flex-direction: column;
height: 100%;
width: 640px;
width: 100%;
max-width: 688px;
margin: 0 auto 8rem;
padding-top: 11vw;
margin-bottom: 11vw;
padding: 11vw 24px 0;
}
@media (max-width: 1024px) {
.gh-publish-settings-container {
padding-top: 10vh;
}
}
.gh-publish-title {
@ -539,11 +548,23 @@
line-height: 1.2em;
}
@media (max-width: 560px) {
.gh-publish-title {
font-size: 3.6rem;
}
}
.gh-publish-settings {
margin: 1rem 0 5.2rem;
width: 100%;
}
@media (max-width: 560px) {
.gh-publish-settings {
margin: 1rem 0 3.2rem;
}
}
.gh-publish-setting {
display: flex;
flex-direction: column;
@ -600,12 +621,19 @@
.gh-publish-setting-trigger {
width: max-content;
text-align: left;
color: var(--black);
font-size: 1.8rem;
font-weight: 400;
line-height: 1.35em;
}
@media (max-width: 560px) {
.gh-publish-setting-trigger {
font-size: 1.7rem;
}
}
.gh-publish-setting-trigger .gh-selected-newsletter {
font-weight: 600;
}
@ -615,8 +643,10 @@
}
.gh-publish-setting-form {
margin: 1.6rem 0 4rem;
margin: 1.6rem 0;
padding-bottom: 2.4rem;
background-color: var(--white);
overflow-x: auto;
}
.gh-publish-setting-form.last {
@ -692,6 +722,7 @@
cursor: pointer;
background: none;
border-radius: 21px;
white-space: nowrap;
}
.gh-publish-types .gh-radio-button:checked + label,
@ -726,6 +757,7 @@
.gh-publish-setting-form .gh-date-time-picker-date {
height: 38px;
min-width: 120px;
margin: 0;
padding: 8px 12px;
font-size: 1.4rem;
@ -734,6 +766,7 @@
.gh-publish-setting-form .gh-date-time-picker-time {
width: unset;
height: 38px;
min-width: 120px;
margin: 0;
padding: 8px 12px;
font-size: 1.4rem;

View File

@ -22,7 +22,7 @@
@media (min-width: 500px) and (max-width: 1024px) {
.settings-menu-toggle {
top: 12px;
top: 16px;
}
}

View File

@ -25,6 +25,23 @@
display: flex;
}
@media (max-width: 1024px) {
.gh-post-preview-header {
z-index: 100;
height: 64px;
margin: 0;
padding: 0;
padding-left: 15px;
background-color: var(--white);
border-radius: 0;
}
.gh-post-preview-header .left {
position: absolute;
left: 15px;
}
}
.gh-post-preview-btn-group .gh-btn-group {
background: transparent;
}

View File

@ -26,7 +26,7 @@
</div>
</div>
<section class="flex" style="pointer-events: auto">
<section class="flex items-center pe-auto h-100">
{{#unless this.post.isNew}}
<EditorLabs::PublishManagement
@post={{this.post}}