tqt/Ghost-Admin
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost-Admin.git synced 2023-12-14 02:33:04 +01:00
Code Issues 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 4e9e415ee2
commit 4aea38d31b
1 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
app/styles/layouts/preview-email.css
View file

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