tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Added margin to bottom of Admin when installed as PWA on newer iOS devices (#1667) 

no issue

On newer iOS devices with no home button, we have this bar at the bottom of the screen instead. When installed as a PWA, the mobile nav sits under that bar. I'm unsure how much Ghost is used this way, but this is a small QOL improvement for those who do.

This PR uses the native `env` CSS custom properties Safari has to add a propriety amount of `padding-bottom` to the mobile nav bar, and also the global container to prevent anything in the iframe from being hidden by the taller nav bar. If the device does not support these `env` vars, is has no adverse affect. In order for this to work, the `<meta name="viewport" />` tag needs `viewport-fit=cover` added to it.

MDN docs for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/env
This commit is contained in:
Paul Davis 2020-09-22 07:43:17 +01:00 committed by GitHub
parent d6bca3d1e8
commit eba9f0eac0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/index.html
View File

@ -11,7 +11,7 @@
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui, viewport-fit=cover" />
<meta name="pinterest" content="nopin" />
<meta http-equiv="cleartype" content="on" />

12
app/styles/layouts/main.css
View File

@ -635,6 +635,12 @@
padding-bottom: 55px;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.gh-viewport {
padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px));
}
}
.gh-mobile-nav-bar {
display: flex;
align-items: center;
@ -647,6 +653,12 @@
border-top: var(--lightgrey) 1px solid;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.gh-mobile-nav-bar {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
}
.gh-mobile-nav-bar a,
.gh-mobile-nav-bar-more {
height: 55px;