feat: Improve iPhoneX statusbar handling

Author: rstoenescu

src/body.js

@@ -18,7 +18,10 @@ function getBodyClasses ({ is, has, within }, cfg) {
         width = window.screen.width * ratio,
         height = window.screen.height * ratio
 
-      if (width !== 1125 && height !== 2001 /* 2436 for iPhoneX fullscreen */) {
+      if (width === 1125 && height === 2436) { // iPhoneX fullscreen
+        cls.push('q-ios-statusbar-x')
+      }
+      if (width !== 1125 || height !== 2001) { // not iPhoneX on non-fullscreen
         cls.push('q-ios-statusbar-padding')
       }
     }

src/components/layout/layout.ios.styl

@@ -79,6 +79,17 @@ body.q-ios-statusbar-padding
     padding-top $ios-statusbar-height
     min-height ($toolbar-min-height + $ios-statusbar-height)
 
+body.q-ios-statusbar-x
+  .q-layout-header > .q-toolbar:nth-child(2),
+  .q-layout-header > .q-tabs:nth-child(2) .q-tabs-head
+  .q-layout-drawer.top-padding
+    padding-top env(safe-area-inset-top)
+  .q-layout-footer > .q-toolbar:last-child,
+  .q-layout-footer > .q-tabs:last-child .q-tabs-head
+  .q-layout-drawer.top-padding
+    padding-bottom env(safe-area-inset-bottom)
+    min-height ($toolbar-min-height + $ios-statusbar-height)
+
 /* body */
 .q-layout-animate .q-layout-transition
   transition $layout-transition

src/components/layout/layout.mat.styl

@@ -77,6 +77,17 @@ body.q-ios-statusbar-padding
     padding-top $ios-statusbar-height
     min-height ($toolbar-min-height + $ios-statusbar-height)
 
+body.q-ios-statusbar-x
+  .q-layout-header > .q-toolbar:nth-child(2),
+  .q-layout-header > .q-tabs:nth-child(2) .q-tabs-head
+  .q-layout-drawer.top-padding
+    padding-top env(safe-area-inset-top)
+  .q-layout-footer > .q-toolbar:last-child,
+  .q-layout-footer > .q-tabs:last-child .q-tabs-head
+  .q-layout-drawer.top-padding
+    padding-bottom env(safe-area-inset-bottom)
+    min-height ($toolbar-min-height + $ios-statusbar-height)
+
 /* body */
 .q-layout-animate .q-layout-transition
   transition $layout-transition

src/components/notify/notify.ios.styl

@@ -15,6 +15,12 @@
 .q-notification-list-bottom
   bottom 0
 
+body.q-ios-statusbar-x
+  .q-notification-list-center, .q-notification-list-top
+    top env(safe-area-inset-top)
+  .q-notification-list-center, .q-notification-list-bottom
+    bottom env(safe-area-inset-bottom)
+
 .q-notification
   border-radius 5px
   pointer-events all

src/components/notify/notify.mat.styl

@@ -15,6 +15,12 @@
 .q-notification-list-bottom
   bottom 0
 
+body.q-ios-statusbar-x
+  .q-notification-list-center, .q-notification-list-top
+    top env(safe-area-inset-top)
+  .q-notification-list-center, .q-notification-list-bottom
+    bottom env(safe-area-inset-bottom)
+
 .q-notification
   border-radius 5px
   pointer-events all