fix(iOS): QDialog top/bottom padding when phone has notch #3899

quasarframework · Apr 18, 2019 · 09e384d · 09e384d
1 parent 6ba5da2
commit 09e384d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 19 deletions.
diff --git a/quasar/src/body.js b/quasar/src/body.js
@@ -27,12 +27,14 @@ function getBodyClasses ({ is, has, within }, cfg) {
       is.ios === true &&
       (cfg.cordova === void 0 || cfg.cordova.iosStatusBarPadding !== false)
     ) {
-      cls.push('q-ios-statusbar-padding')
+      cls.push('q-ios-padding')
     }
   }
+  else if (is.electron === true) {
+    cls.push('electron')
+  }
 
   within.iframe === true && cls.push('within-iframe')
-  is.electron === true && cls.push('electron')
 
   return cls
 }

diff --git a/quasar/src/components/dialog/dialog.styl b/quasar/src/components/dialog/dialog.styl
@@ -32,12 +32,6 @@
       > div
         max-height calc(100vh - 48px)
 
-      body.q-ios-statusbar-padding &
-        padding-top $ios-statusbar-height
-        padding-top env(safe-area-inset-top)
-        padding-bottom env(safe-area-inset-bottom)
-        max-height "calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))"
-
     &--maximized
       > div
         height 100%
@@ -80,6 +74,13 @@
     pointer-events all
     background $dimmed-background
 
+body.q-ios-padding .q-dialog__inner
+  padding-top $ios-statusbar-height !important
+  padding-top env(safe-area-inset-top) !important
+  padding-bottom env(safe-area-inset-bottom) !important
+  > div
+    // quotes are stylus workaround to not error when parsing env()
+    max-height "calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important" % $ios-statusbar-height
 
 @media (max-width $breakpoint-xs-max)
   .q-dialog__inner

diff --git a/quasar/src/components/layout/layout.styl b/quasar/src/components/layout/layout.styl
@@ -132,26 +132,19 @@ $layout-transition = all .12s ease-in
     display inline-block
     pointer-events auto
 
-body.q-ios-statusbar-padding
+body.q-ios-padding
   .q-layout--standard .q-header > .q-toolbar:nth-child(2),
   .q-layout--standard .q-header > .q-tabs:nth-child(2) .q-tabs-head
-  .q-layout--standard .q-drawer--top-padding .q-drawer__content,
-  .q-dialog__inner--maximized .q-header > .q-toolbar:nth-child(2)
+  .q-layout--standard .q-drawer--top-padding .q-drawer__content
     padding-top $ios-statusbar-height
     min-height ($toolbar-min-height + $ios-statusbar-height)
     padding-top env(safe-area-inset-top)
     min-height "calc(env(safe-area-inset-top) + %s)" % $toolbar-min-height
-  .q-dialog__inner--maximized .q-drawer--top-padding .q-drawer__content
-    padding-top $ios-statusbar-height
-    padding-top env(safe-area-inset-top)
   .q-layout--standard .q-footer > .q-toolbar:last-child,
   .q-layout--standard .q-footer > .q-tabs:last-child .q-tabs-head
-  .q-layout--standard .q-drawer--top-padding .q-drawer__content,
-  .q-dialog__inner--maximized .q-footer > .q-toolbar:last-child
+  .q-layout--standard .q-drawer--top-padding .q-drawer__content
     padding-bottom env(safe-area-inset-bottom)
     min-height "calc(env(safe-area-inset-bottom) + %s)" % $toolbar-min-height
-  .q-dialog__inner--maximized .q-drawer--top-padding .q-drawer__content
-    padding-bottom env(safe-area-inset-bottom)
 
 .q-body--layout-animate .q-layout__section--animate
   transition $layout-transition !important

diff --git a/quasar/src/plugins/notify.styl b/quasar/src/plugins/notify.styl
@@ -14,7 +14,7 @@
   &--bottom
     bottom 0
 
-body.q-ios-statusbar-padding .q-notifications__list
+body.q-ios-padding .q-notifications__list
   &--center, &--top
     top $ios-statusbar-height
     top env(safe-area-inset-top)