Fix safe-area issues (#2910)

This fixes safe-area issues all over the UI:

- Issues where the safe area was applied to elements where it should
not, e.g. the settings menus' entries.
- Issues where the safe area was missing, e.g. model cards, which were
hidden under the notch.

Due to webpack's CssMinimizerPlugin minimizing `0px` to `0` when
overriding the Framework7 safe area CSS vars, which then broke the
calculation, a new .css file has been introduced.

---------

Signed-off-by: Florian Hotze <dev@florianhotze.com>

bundles/org.openhab.ui/web/src/components/addons/addons-section.vue

@@ -38,6 +38,9 @@
 
 <style lang="stylus">
 .addons-section
+  .block
+    padding-left var(--f7-safe-area-left)
+    padding-right var(--f7-safe-area-right)
   margin-top 2rem
   .see-all-button
     float right
@@ -63,7 +66,6 @@
     align-content flex-start
     flex-wrap wrap
     overflow auto
-    padding-left calc(var(--f7-safe-area-left) + var(--f7-list-item-padding-horizontal))
     scroll-snap-type x mandatory
     scrollbar-width none
     &::-webkit-scrollbar

bundles/org.openhab.ui/web/src/components/app.vue

@@ -3,12 +3,12 @@
     <!-- Left Panel -->
     <f7-panel v-show="ready" left :cover="showSidebar" class="sidebar" :visible-breakpoint="1024">
       <f7-page>
-        <f7-link href="/overview" class="logo no-ripple" panel-close v-if="themeOptions.dark === 'dark'">
+        <f7-link href="/overview" class="openhab-logo no-ripple" panel-close v-if="themeOptions.dark === 'dark'">
           <div class="logo-inner">
             <img src="@/images/openhab-logo-white.svg" type="image/svg+xml" width="196px">
           </div>
         </f7-link>
-        <f7-link href="/overview" class="logo no-ripple" panel-close v-else>
+        <f7-link href="/overview" class="openhab-logo no-ripple" panel-close v-else>
           <div class="logo-inner">
             <img src="@/images/openhab-logo.svg" type="image/svg+xml" width="196px">
           </div>
@@ -178,7 +178,7 @@
   </f7-app>
 </template>
 
-<style lang="stylus" scoped>
+<style lang="stylus">
 .panel-left::-webkit-scrollbar /* WebKit */
   width 0
   height 0
@@ -187,16 +187,28 @@
   scrollbar-width none /* Firefox */
   -ms-overflow-style none  /* IE 10+ */
 
+  .block-title
+    margin-left var(--f7-block-padding-horizontal)
+
   .page
     background #f5f5f5 !important
     padding-bottom calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom))
-  .logo
+    padding-left var(--f7-safe-area-left)
+    width calc(var(--f7-panel-width) + var(--f7-safe-area-left))
+  .openhab-logo
     margin-top var(--f7-safe-area-top)
     .logo-inner
       background-color #fff
       padding 2.25rem 2rem
   .list
     margin-top 0
+    .item-link
+      .item-content
+        padding-left var(--f7-list-item-padding-horizontal)
+      .item-inner
+        padding-right var(--f7-list-chevron-icon-area) !important
+      .item-inner:before // chevron
+        right var(--f7-list-item-padding-horizontal)
   .currentsection
     background-color var(--f7-color-blue-tint)
     color var(--f7-color-white)
@@ -208,7 +220,7 @@
     height calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom))
     background #f5f5f5 !important
     position fixed
-    bottom calc(var(--f7-safe-area-bottom))
+    bottom 0
     width 100%
     .hint-signin
       position absolute
@@ -240,7 +252,7 @@
       background #232323 !important
     .currentsection
       background-color var(--f7-color-blue-shade)
-  .logo
+  .openhab-logo
     .logo-inner
       background #111111 !important
 

bundles/org.openhab.ui/web/src/css/app.styl

@@ -211,8 +211,9 @@ html
 
 @media (max-width 1023px)
   .block-narrow
-    padding-left var(--f7-safe-area-left)
-    padding-right var(--f7-safe-area-right)
+    // use insets from env because f7-safe-area CSS vars are not available due the fix in nomini.css
+    padding-left env(safe-area-inset-left)
+    padding-right env(safe-area-inset-right)
 
 .md .panel-in-breakpoint
   box-shadow 0 1px 10px 0 rgba(0, 0, 0, 0.3)
@@ -327,3 +328,7 @@ html
   margin-bottom var(--f7-card-expandable-margin-vertical)
   margin-left var(--f7-card-expandable-margin-horizontal)
   margin-right var(--f7-card-expandable-margin-horizontal)
+
+// Fix safe area issues inside block-narrow, where safe areas are already respected by the wrapping block-narrow
+// Fix is in nomini.css due to CssMinimizerPlugin minimizing app.styl and removing the unit px from 0px,
+// which breaks calculcations using the overwritten CSS variables.

bundles/org.openhab.ui/web/src/css/nomini.css

@@ -0,0 +1,8 @@
+/* CSS that shouldn't get minimized */
+/* e.g. due to CssMinimizerPlugin removing unit from 0px, which breaks calculations */
+.block-narrow {
+  --f7-safe-area-left: 0px;
+  --f7-safe-area-outer-left: 0px;
+  --f7-safe-area-right: 0px;
+  --f7-safe-area-outer-right: 0px;
+}

bundles/org.openhab.ui/web/src/js/app.js

@@ -22,6 +22,7 @@ import 'framework7/css/framework7.bundle.css'
 
 // Import Icons and App Custom Styles
 import '../css/icons.css'
+import '../css/nomini.css'
 import '../css/app.styl'
 
 // Import App Component

bundles/org.openhab.ui/web/src/pages/home/model-tab.vue

@@ -25,6 +25,14 @@
 .model-cards-section
   justify-content center
   margin-top 2rem
+  .card
+    margin-left calc(0.5 * var(--f7-card-expandable-margin-horizontal))
+    margin-right calc(0.5 * var(--f7-card-expandable-margin-horizontal))
+
+@media (max-width 1023px)
+  .model-cards-section
+    padding-left var(--f7-safe-area-left)
+    padding-right var(--f7-safe-area-right)
 
 @media (min-width 768px)
   .model-cards-section
@@ -40,13 +48,6 @@
     width 340px
     margin-top 0
 
-  // .model-cards-section .card
-  //   width calc((100% - var(--f7-card-expandable-margin-horizontal) * 3) / 2)
-  //
-  .model-cards-section .card:nth-child(n),
-  .model-cards-section .card:nth-child(n + 1)
-    margin-left 0
-
   .model-cards-section .card:nth-child(n + 3)
     margin-top 0
 
@@ -56,10 +57,6 @@
       width 340px
       margin-top 0
 
-  .model-cards-section .card:nth-child(n),
-  .model-cards-section .card:nth-child(n + 1)
-    margin-left 0
-
   .model-cards-section .card:nth-child(n + 3)
     margin-top 0
 

bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue

@@ -23,8 +23,8 @@
 
     <f7-tabs>
       <f7-tab id="thing" :tab-active="currentTab === 'thing'">
-        <f7-block v-if="ready && thing.statusInfo" class="block-narrow padding-left padding-right" strong>
-          <f7-col>
+        <f7-block v-if="ready && thing.statusInfo" class="block-narrow" strong>
+          <f7-col class="padding-horizontal">
             <div v-show="!error" class="float-right align-items-flex-start align-items-center">
               <f7-link :icon-color="(thing.statusInfo.statusDetail === 'DISABLED') ? 'orange' : 'gray'" :tooltip="((thing.statusInfo.statusDetail === 'DISABLED') ? 'Enable' : 'Disable') + (($device.desktop) ? ' (Ctrl-D)' : '')" icon-ios="f7:pause_circle" icon-md="f7:pause_circle" icon-aurora="f7:pause_circle" icon-size="32" color="orange" @click="toggleDisabled" />
             </div>
@@ -42,8 +42,8 @@
           </f7-col>
         </f7-block>
         <!-- skeletons for not ready -->
-        <f7-block v-else class="block-narrow padding-left padding-right skeleton-text skeleton-effect-blink" strong>
-          <f7-col>
+        <f7-block v-else class="block-narrow skeleton-text skeleton-effect-blink" strong>
+          <f7-col class="padding-horizontal">
             ______:
             <f7-chip class="margin-left" text="________" />
             <div>