fix(pwa): update header offset

dvcol · Aug 30, 2024 · 7b1340f · 7b1340f
1 parent 0c647a7
commit 7b1340f
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 13 deletions.
diff --git a/src/components/AppComponent.vue b/src/components/AppComponent.vue
@@ -183,15 +183,15 @@ const onBack = () => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    min-height: calc(var(--full-height) - #{layout.$header-navbar-height});
-    margin-top: layout.$header-navbar-height;
+    min-height: layout.$main-content-height;
+    margin-top: layout.$safe-navbar-height;
 
     &.full-height {
       min-height: var(--full-height);
       margin-top: 0;
 
       :deep(.loading-container) {
-        padding-top: layout.$header-navbar-height;
+        padding-top: layout.$safe-navbar-height;
       }
     }
   }
@@ -205,7 +205,7 @@ const onBack = () => {
 
   .panel {
     position: relative;
-    max-height: calc(100% - #{layout.$header-navbar-height});
+    max-height: calc(100% - #{layout.$safe-navbar-height});
     overflow: auto;
 
     &-header {

diff --git a/src/components/common/list/ListScroll.vue b/src/components/common/list/ListScroll.vue
@@ -229,7 +229,7 @@ const isEmpty = computed(() => !items.value.length && !loading.value);
 
 .list-scroll {
   height: calc(var(--full-height) - 8px);
-  margin-top: -#{layout.$header-navbar-height};
+  margin-top: calc(0% - #{layout.$header-navbar-height});
   margin-bottom: 8px;
 
   .load-more {

diff --git a/src/components/container/ContainerComponent.ce.vue b/src/components/container/ContainerComponent.ce.vue
@@ -135,7 +135,7 @@ onBeforeMount(() => addCustomProgressProperty());
     layout.$navbar-transition-delay-visible}
   );
 
-  top: layout.$header-navbar-height;
+  top: layout.$safe-navbar-height;
 
   &.drawer-visible {
     top: layout.$header-open-drawer-height;
@@ -156,7 +156,7 @@ onBeforeMount(() => addCustomProgressProperty());
     layout.$navbar-transition-delay-visible}
   );
 
-  top: calc(#{layout.$header-navbar-height} + 12px);
+  top: calc(#{layout.$safe-navbar-height} + 12px);
 
   &.drawer-visible {
     top: calc(#{layout.$header-open-drawer-height} + 12px);

diff --git a/src/components/views/about/AboutComponent.vue b/src/components/views/about/AboutComponent.vue
@@ -127,7 +127,7 @@ const openRelease = (url?: string) => {
 
 .container {
   width: 100%;
-  height: calc(var(--full-height) - #{layout.$header-navbar-height});
+  height: layout.$main-content-height;
   background: transparent;
 
   .card {

diff --git a/src/components/views/settings/SettingsComponent.vue b/src/components/views/settings/SettingsComponent.vue
@@ -136,14 +136,14 @@ onDeactivated(() => {
 .container {
   width: 100%;
   height: var(--full-height);
-  margin-top: -#{layout.$header-navbar-height};
+  margin-top: calc(0% - #{layout.$safe-navbar-height});
   background: transparent;
 
   .card {
     @include mixin.hover-background($from: var(--bg-black-50), $to: var(--bg-color-80));
 
     z-index: var(--length);
-    scroll-margin-top: calc(#{layout.$header-navbar-height} + 1rem);
+    scroll-margin-top: calc(#{layout.$safe-navbar-height} + 1rem);
 
     &:not(:last-child) {
       z-index: calc(var(--length) - var(--index));
@@ -164,7 +164,7 @@ onDeactivated(() => {
   .menu {
     @include mixin.hover-background;
 
-    height: calc(var(--full-height) - #{layout.$header-navbar-height});
+    height: layout.$main-content-height;
     padding: 0.5rem;
   }
 
@@ -175,7 +175,7 @@ onDeactivated(() => {
 
   .menu,
   .content .card:first-child {
-    margin-top: layout.$header-navbar-height;
+    margin-top: layout.$safe-navbar-height;
   }
 }
 </style>
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
@@ -1,6 +1,17 @@
+// Pwa safe areas
+$safe-area-inset-top: env(safe-area-inset-top);
+$safe-area-inset-right: env(safe-area-inset-right);
+$safe-area-inset-bottom: env(safe-area-inset-bottom);
+$safe-area-inset-left: env(safe-area-inset-left);
+
+// Element heights
 $header-navbar-height: 2.75rem;
+$safe-navbar-height: calc(#{$header-navbar-height} + #{$safe-area-inset-top});
 $header-drawer-height: 3.5rem;
-$header-open-drawer-height: calc(#{$header-navbar-height} + #{$header-drawer-height});
+$header-open-drawer-height: calc(#{$safe-navbar-height} + #{$header-drawer-height});
+$main-content-height: calc(var(--full-height) - #{$safe-navbar-height});
+
+// Navbar transition
 $navbar-transition: 0.5s var(--n-bezier);
 $navbar-transition-visible: 0.25s var(--n-bezier);
 $navbar-transition-delay: 0.5s;