TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 05:37:34 +03:00
Code Issues Projects Releases Wiki Activity

Update post email preview design (#1767)

Browse Source 
Made post email preview design consistent with the new email settings design preview.

* changed background

* added fake container windows and faux sender/recipient content

* updated mobile and dark mode
This commit is contained in:
Peter Zimon 2020-11-16 12:16:51 +01:00 committed by GitHub
parent 96f096a839
commit c46198f728
4 changed files with 113 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ghost/admin/app/components/modal-post-email-preview.hbs
View File

@ -1,4 +1,4 @@
<header class="modal-header gh-pe-header {{if (eq this.type "desktop") "gh-pe-header-border"}}" data-test-modal="preview-email" style="display:flex">
<header class="modal-header gh-pe-header gh-pe-header-border" data-test-modal="preview-email" style="display:flex">
<h2 class="f6 fw6">{{this.subject}}</h2>
<div class="gh-contentfilter gh-btn-group gh-pe-btn-group" style="display:flex;flex-grow:1;justify-content:center">
<button class="gh-btn {{if (eq this.type "desktop") "gh-btn-group-selected"}}" {{action "changeType" "desktop"}}><span>Desktop</span></button>
@ -12,9 +12,15 @@
</header>
{{#if (eq this.type "mobile")}}
<div class="modal-body modal-preview-email-content gh-pe-mobile-container" style="display: flex;justify-content: center;">
<div class="modal-body modal-preview-email-content gh-pe-mobile-container">
<div class="gh-pe-mobile-bezel">
<div class="gh-pe-mobile-screen">
<div class="gh-pe-emailclient-sender">
<p>
<span class="strong">{{this.config.blogTitle}}</span> &lt;{{this.settings.membersFromAddress}}&gt;
</p>
<p><span class="dark">To:</span> Jamie Larson &lt;jamie@example.com&gt;</p>
</div>
<iframe class="bn gh-pe-iframe" {{did-insert this.renderEmailPreview}} sandbox="allow-same-origin"></iframe>
</div>
</div>
@ -23,6 +29,14 @@
{{#if (eq this.type "desktop")}}
<div class="modal-body modal-preview-email-content gh-pe-desktop-container">
<iframe class="bn miw-100 gh-pe-iframe" style="height:100%;" {{did-insert this.renderEmailPreview}} sandbox="allow-same-origin"></iframe>
<div class="gh-pe-emailclient-mockup">
<div class="gh-pe-emailclient-sender">
<p>
<span class="strong">{{this.config.blogTitle}}</span> &lt;{{this.settings.membersFromAddress}}&gt;
</p>
<p><span class="dark">To:</span> Jamie Larson &lt;jamie@example.com&gt;</p>
</div>
<iframe class="gh-pe-iframe" {{did-insert this.renderEmailPreview}} sandbox="allow-same-origin"></iframe>
</div>
</div>
{{/if}}

2
ghost/admin/app/components/modal-post-email-preview.js
View File

@ -17,6 +17,8 @@ html {
export default ModalComponent.extend({
ghostPaths: service(),
ajax: service(),
settings: service(),
config: service(),
type: 'desktop',
html: '',

8
ghost/admin/app/styles/app-dark.css
View File

@ -552,6 +552,12 @@ input:focus,
background: none !important;
}
.modal-fullsettings-preview-container {
.modal-fullsettings-preview-container,
.fullscreen-modal-email-preview .gh-pe-mobile-container,
.fullscreen-modal-email-preview .gh-pe-desktop-container {
background: #1D252B;
}
.gh-pe-mobile-bezel {
background: #2b373e;
}

96
ghost/admin/app/styles/layouts/preview-email.css
View File

@ -78,29 +78,97 @@
border-bottom-left-radius: 0;
}
.fullscreen-modal-email-preview .gh-pe-mobile-container {
.fullscreen-modal-email-preview .gh-pe-desktop-container {
height: calc(100vh - 135px);
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 0;
background: var(--whitegrey-l1);
padding: 30px 30px 45px;
}
.fullscreen-modal-email-preview .gh-pe-desktop-container {
height: calc(100vh - 130px);
.gh-pe-desktop-container .gh-pe-emailclient-mockup {
flex-grow: 1;
overflow: hidden;
max-width: 640px;
width: 100%;
padding: 0;
background: var(--white);
box-shadow:
0 0 0 1px rgba(0,0,0,0.02),
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
0 12.5px 10px rgba(0, 0, 0, 0.035),
0 22.3px 17.9px rgba(0, 0, 0, 0.042),
0 41.8px 33.4px rgba(0, 0, 0, 0.05),
0 100px 80px rgba(0, 0, 0, 0.07);
;
border-radius: 12px;
}
.gh-pe-desktop-container iframe {
border: none;
width: 100%;
height: calc(100% - 67px);
}
.gh-pe-emailclient-sender {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 72px;
border-bottom: 1px solid var(--whitegrey);
margin: 0;
padding: 0 20px;
}
.gh-pe-emailclient-sender p {
padding: 0;
margin: 0;
color: var(--midlightgrey);
line-height: 1.8em;
}
.gh-pe-emailclient-sender span {
color: var(--darkgrey);
}
.gh-pe-emailclient-sender span.strong {
font-weight: 600;
}
.fullscreen-modal-email-preview .gh-pe-mobile-container {
height: calc(100vh - 140px);
display: flex;
flex-direction: column;
align-items: center;
background: var(--whitegrey-l1);
padding: 30px 30px 45px;
}
.gh-pe-mobile-bezel {
width: 320px;
height: 657px;
border: 1px solid var(--midgrey-l2);
border-radius: 40px;
display: flex;
background: var(--whitegrey-l2);
box-shadow:
0 0 0 1px rgba(0,0,0,0.02),
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
0 12.5px 10px rgba(0, 0, 0, 0.035),
0 22.3px 17.9px rgba(0, 0, 0, 0.042),
0 41.8px 33.4px rgba(0, 0, 0, 0.05),
0 100px 80px rgba(0, 0, 0, 0.07);
;
}
.gh-pe-mobile-screen {
width: 100%;
margin: 12px;
border: 1px solid var(--midgrey-l2);
margin: 14px;
border: 1px solid var(--whitegrey-l1);
background: var(--white);
border-radius: 28px;
flex-grow: 1;
overflow: hidden;
@ -111,14 +179,24 @@
transform: scale(0.8);
transform-origin: 0 0;
overflow-x: hidden;
width: 365px;
height: 786px;
width: 361px;
height: 706px;
}
.gh-pe-mobile-container .gh-pe-iframe .left-col {
display: none;
}
.gh-pe-mobile-container .gh-pe-emailclient-sender {
height: 66px;
padding: 6px 12px 0;
}
.gh-pe-mobile-container .gh-pe-emailclient-sender p {
font-size: 1.1rem;
line-height: 1.6em;
}
@media (max-width: 850px) {
.gh-pe-header {
flex-direction: column;