Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Updated browser and email mockup in post-preview

Browse source
This commit is contained in:
Sanne de Vries 2021-02-08 13:14:46 +01:00
parent 37556aa432
commit 4ddfd3b3c6
2 changed files with 44 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin/app/components/modal-post-preview/email.hbs
View file

@ -1,5 +1,5 @@
<div class="modal-body modal-preview-email-content gh-pe-desktop-container h-auto overflow-auto">
<div class="gh-pe-emailclient-mockup">
<div class="gh-post-preview-email-container">
<div class="gh-post-preview-email-mockup">
<div class="gh-pe-emailclient-sender">
<p>
<span class="strong">{{this.config.blogTitle}}</span> &lt;{{this.settings.membersFromAddress}}&gt;

44
ghost/admin/app/styles/layouts/post-preview.css
View file

@ -61,7 +61,7 @@
flex-grow: 1;
overflow: auto;
margin: 0;
padding: 48px;
padding: 48px 48px 0;
background: var(--whitegrey-l1);
}
@ -77,7 +77,8 @@
width: 100%;
max-width: 1320px;
padding: 0;
border-radius: 12px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background: var(--white);
box-shadow:
0 0 0 1px rgba(0,0,0,0.02),
@ -152,6 +153,45 @@
}
/* Email preview */
.gh-post-preview-email-container {
position: relative;
height: calc(100vh - 135px);
display: flex;
flex-direction: column;
align-items: center;
background: var(--whitegrey-l1);
padding: 30px 30px 0;
overflow: auto;
}
.gh-post-preview-email-mockup {
flex-grow: 1;
overflow: hidden;
max-width: 740px;
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-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.gh-post-preview-email-container iframe {
border: none;
width: 100%;
height: calc(100% - 67px);
}
/* Social preview */
.gh-post-preview-social-container {
position: relative;