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

Refined mobile email preview

Browse source
This commit is contained in:
Peter Zimon 2019-11-06 12:36:39 +07:00
parent 2ef9ade0ae
commit 96cdab64d4
2 changed files with 33 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
ghost/admin/app/styles/layouts/preview-email.css
View file

@ -56,4 +56,33 @@
border-left: none; border-left: none;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
}
.fullscreen-modal-email-preview .gh-pe-mobile-container {
height: calc(100% - 64px);
max-height: 812px;
}
.gh-pe-mobile-bezel {
width: 100%;
max-width: 43vh;
border: 1px solid var(--midgrey-l2);
border-radius: 40px;
display: flex;
}
.gh-pe-mobile-screen {
width: 100%;
margin: 18px;
border: 1px solid var(--midgrey-l2);
border-radius: 23px;
flex-grow: 1;
overflow: hidden;
}
.gh-pe-iframe {
height: 100%;
width: calc(43vh - 40px);
overflow-x: hidden;
padding: 0;
} }

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

@ -10,10 +10,10 @@
{{svg-jar "close"}} {{svg-jar "close"}}
</button> </button>
{{#if (eq type "mobile")}} {{#if (eq type "mobile")}}
<div class="modal-body modal-preview-email-content" style="display: flex;justify-content: center;padding-top: 12px;"> <div class="modal-body modal-preview-email-content gh-pe-mobile-container" style="display: flex;justify-content: center;padding-top: 12px;">
<div style="width: 350px;border: 1px solid black;border-radius: 16px;display: flex;"> <div class="gh-pe-mobile-bezel">
<div style="margin: 12px;border: 1px solid black;border-radius: 16px;flex-grow:1"> <div class="gh-pe-mobile-screen">
<iframe class="bn" style="height:100%;width:320px;overflow-x:hidden;padding:6px" {{did-insert this.renderEmailPreview}}></iframe> <iframe class="bn gh-pe-iframe" {{did-insert this.renderEmailPreview}}></iframe>
</div> </div>
</div> </div>
</div> </div>