Updated post preview navigation

Refs https://github.com/TryGhost/Team/issues/1621
This commit is contained in:
Sanne de Vries 2022-05-12 14:27:01 +01:00
parent f137aaea5c
commit 6f498035ea
5 changed files with 17 additions and 23 deletions

View File

@ -1,5 +1,5 @@
<div class="flex flex-column h-100">
<header class="modal-header gh-post-preview-header gh-post-preview-header-border" data-test-modal="preview-email">
<header class="modal-header gh-post-preview-header" data-test-modal="preview-email">
<div>
<button class="gh-editor-back-button" title="Close" type="button" {{on "click" @close}}>
<span>{{svg-jar "arrow-left"}} Editor</span>
@ -20,7 +20,7 @@
<div class="flex">
<button
type="button"
class="gh-btn gh-btn-editor darkgrey gh-publish-trigger"
class="gh-btn gh-editor-preview-trigger active"
{{on "click" @close}}
>
<span>Preview</span>

View File

@ -1,6 +1,6 @@
<div class="modal-content">
<div class="flex flex-column h-100">
<header class="modal-header gh-post-preview-header gh-post-preview-header-border" data-test-modal="preview-email">
<header class="modal-header gh-post-preview-header" data-test-modal="preview-email">
<div>
<button class="gh-editor-back-button" title="Close" type="button" {{on "click" @close}}>
<span>{{svg-jar "arrow-left"}} Back</span>

View File

@ -872,10 +872,6 @@ input:focus,
background: var(--main-color-content-greybg);
}
.gh-post-preview-header-border {
border-bottom: 1px solid var(--hairline-color-1);
}
.gh-post-preview-browser-footer {
border-top: 1px solid var(--hairline-color-1);
}

View File

@ -641,6 +641,10 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
background: var(--whitegrey);
}
.gh-editor-preview-trigger.active {
background: var(--whitegrey);
}
@media (max-width: 500px) {
.gh-editor-preview-trigger {
display: none;

View File

@ -8,16 +8,10 @@
justify-content: center;
align-items: center;
flex-shrink: 0;
min-height: 72px;
height: 34px;
overflow: hidden;
margin: 0;
padding: 18px 32px 16px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
margin: 30px;
background: var(--white);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.gh-post-preview-header h2 {
@ -26,24 +20,24 @@
margin-right: auto;
}
.gh-post-preview-header-border {
border-bottom: 1px solid var(--whitegrey);
}
.gh-post-preview-btn-group {
display: flex;
flex-grow: 1;
justify-content: center;
}
.gh-post-preview-btn-group button {
width: 64px;
.gh-post-preview-btn-group .gh-btn-group {
background: transparent;
}
.gh-post-preview-btn-group .gh-btn-group span {
height: 36px;
height: 34px;
line-height: 34px;
border-radius: 3px;
box-shadow: none;
}
.gh-post-preview-btn-group button {
width: 64px;
}
.gh-post-preview-mode svg {