UI: Adjust footer nav bar size in iOS app

This commit is contained in:
Penar Musaraj 2019-05-13 10:23:59 -04:00
parent 1bff81419e
commit f1b0782624
1 changed files with 10 additions and 4 deletions

View File

@ -2,7 +2,7 @@
// Footer nav bar (displayed in DiscourseHub app and PWAs) // Footer nav bar (displayed in DiscourseHub app and PWAs)
// -------------------------------------------------- // --------------------------------------------------
$footer-nav-height: 55px; $footer-nav-height: 49px;
body.footer-nav-visible { body.footer-nav-visible {
#main-outlet { #main-outlet {
@ -37,8 +37,6 @@ body.footer-nav-visible {
&.visible { &.visible {
bottom: 0px; bottom: 0px;
padding-bottom: env(safe-area-inset-bottom);
} }
.footer-nav-widget { .footer-nav-widget {
@ -47,7 +45,9 @@ body.footer-nav-visible {
@include unselectable; @include unselectable;
button { button {
flex: 1; flex: 1;
margin: 12px; margin: 4px;
border-radius: 2px;
padding: 14px 18px;
&:disabled { &:disabled {
opacity: 0.6; opacity: 0.6;
} }
@ -55,6 +55,12 @@ body.footer-nav-visible {
} }
} }
@supports (padding: max(0px)) {
.footer-nav.visible {
padding-bottom: unquote("max(5px, env(safe-area-inset-bottom))");
}
}
@supports (-webkit-backdrop-filter: blur(10px)) { @supports (-webkit-backdrop-filter: blur(10px)) {
body:not(.footer-nav-ipad) .footer-nav { body:not(.footer-nav-ipad) .footer-nav {
background-color: rgba($header_background, 0.7); background-color: rgba($header_background, 0.7);