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 
no refs.
Issue was that the ratio of email mobile preview UI was completely off on higher screen resolutions.

- set the email mobile preview UI to fixed size
This commit is contained in:
Peter Zimon 2019-12-03 11:18:02 +01:00
parent 02fe1591e5
commit 137f8eae7c
2 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,8 +4,9 @@
} }
.fullscreen-modal-email-preview .modal-content { .fullscreen-modal-email-preview .modal-content {
position: relative;
padding-bottom: 0; padding-bottom: 0;
overflow: hidden; overflow: scroll;
height: 100%; height: 100%;
} }
@ -19,7 +20,10 @@
} }
.gh-pe-header { .gh-pe-header {
position: relative; position: sticky;
top: -32px;
left: 0;
right: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -32,6 +36,7 @@
background-size: cover; background-size: cover;
background: var(--white); background: var(--white);
padding: 18px 32px; padding: 18px 32px;
z-index: 9999;
} }
.gh-pe-header h2 { .gh-pe-header h2 {
@ -79,8 +84,8 @@
} }
.fullscreen-modal-email-preview .gh-pe-mobile-container { .fullscreen-modal-email-preview .gh-pe-mobile-container {
height: calc(100% - 64px); height: 702px;
max-height: 812px; padding-bottom: 32px;
} }
.fullscreen-modal-email-preview .gh-pe-desktop-container { .fullscreen-modal-email-preview .gh-pe-desktop-container {
@ -88,8 +93,7 @@
} }
.gh-pe-mobile-bezel { .gh-pe-mobile-bezel {
width: 100%; width: 346px;
max-width: 43vh;
border: 1px solid var(--midgrey-l2); border: 1px solid var(--midgrey-l2);
border-radius: 40px; border-radius: 40px;
display: flex; display: flex;
@ -97,16 +101,16 @@
.gh-pe-mobile-screen { .gh-pe-mobile-screen {
width: 100%; width: 100%;
margin: 18px; margin: 12px;
border: 1px solid var(--midgrey-l2); border: 1px solid var(--midgrey-l2);
border-radius: 23px; border-radius: 28px;
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
} }
.gh-pe-mobile-container .gh-pe-iframe { .gh-pe-mobile-container .gh-pe-iframe {
height: 100%; height: 100%;
width: calc(43vh - 40px); width: 318px;
overflow-x: hidden; overflow-x: hidden;
padding: 0; padding: 0;
} }

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

@ -12,7 +12,7 @@
</header> </header>
{{#if (eq type "mobile")}} {{#if (eq type "mobile")}}
<div class="modal-body modal-preview-email-content gh-pe-mobile-container" 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;">
<div class="gh-pe-mobile-bezel"> <div class="gh-pe-mobile-bezel">
<div class="gh-pe-mobile-screen"> <div class="gh-pe-mobile-screen">
<iframe class="bn gh-pe-iframe" {{did-insert this.renderEmailPreview}}></iframe> <iframe class="bn gh-pe-iframe" {{did-insert this.renderEmailPreview}}></iframe>