TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

🎨 Scaled email mobile preview

Browse Source 
no issue.

- scaled email mobile preview to resemble mobile proportions better
This commit is contained in:
Peter Zimon 2019-12-03 14:51:15 +01:00
parent a93fc6fd88
commit 97940742cf
1 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ghost/admin/app/styles/layouts/preview-email.css
View File

@ -5,29 +5,25 @@
.fullscreen-modal-email-preview .modal-content { .fullscreen-modal-email-preview .modal-content {
position: relative; position: relative;
padding-bottom: 0;
overflow: scroll; overflow: scroll;
height: 100%; height: 100%;
padding: 0;
} }
.fullscreen-modal-email-preview .modal-body { .fullscreen-modal-email-preview .modal-body {
height: 100%; margin: 0;
margin: 0 -32px;
}
.modal-preview-email-content {
height: calc(100vh - 170px);
} }
.gh-pe-header { .gh-pe-header {
position: sticky; position: sticky;
top: -32px; top: 0;
left: -32px; left: 0;
right: -32px; right: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: -32px -32px 0; margin: 0;
padding: 18px 32px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-top-right-radius: 6px; border-top-right-radius: 6px;
overflow: hidden; overflow: hidden;
@ -35,7 +31,6 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background: var(--white); background: var(--white);
padding: 18px 32px;
z-index: 9999; z-index: 9999;
} }
@ -84,8 +79,10 @@
} }
.fullscreen-modal-email-preview .gh-pe-mobile-container { .fullscreen-modal-email-preview .gh-pe-mobile-container {
height: 702px; display: flex;
padding-bottom: 32px; flex-direction: column;
align-items: center;
margin: 20px 0;
} }
.fullscreen-modal-email-preview .gh-pe-desktop-container { .fullscreen-modal-email-preview .gh-pe-desktop-container {
@ -93,7 +90,8 @@
} }
.gh-pe-mobile-bezel { .gh-pe-mobile-bezel {
width: 346px; width: 320px;
height: 657px;
border: 1px solid var(--midgrey-l2); border: 1px solid var(--midgrey-l2);
border-radius: 40px; border-radius: 40px;
display: flex; display: flex;
@ -109,10 +107,12 @@
} }
.gh-pe-mobile-container .gh-pe-iframe { .gh-pe-mobile-container .gh-pe-iframe {
height: 100%;
width: 318px;
overflow-x: hidden;
padding: 0; padding: 0;
transform: scale(0.8);
transform-origin: 0 0;
overflow-x: hidden;
width: 365px;
height: 786px;
} }
.gh-pe-mobile-container .gh-pe-iframe .left-col { .gh-pe-mobile-container .gh-pe-iframe .left-col {