Refined mobile email preview

TryGhost · Nov 6, 2019 · d4845e9 · d4845e9
1 parent f82b994
commit d4845e9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/app/styles/layouts/preview-email.css b/app/styles/layouts/preview-email.css
@@ -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;
 }
diff --git a/app/templates/components/modal-post-email-preview.hbs b/app/templates/components/modal-post-email-preview.hbs
@@ -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>