Refined mobile email preview

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

View File

@ -56,4 +56,33 @@
border-left: none;
border-top-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;
}

View File

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