fix(mobile): fix floating and progress

Author: dvcol

src/components/AppComponent.vue

@@ -131,7 +131,11 @@ const onBack = () => {
           @mouseenter="footerOpen = true"
           @mouseleave="footerOpen = false"
         >
-          <CheckinComponent v-if="isAuthenticated" :parent-element="footerRef" />
+          <CheckinComponent
+            v-if="isAuthenticated"
+            :parent-element="footerRef"
+            :reverse="reverse"
+          />
         </footer>
         <DebugProvider />
       </RouterView>

src/components/common/buttons/FloatingButton.vue

@@ -77,19 +77,13 @@ const emit = defineEmits<{
   }
 
   &.reverse {
-    $navbar-offset: calc(
-      #{layout.$header-navbar-height} + #{layout.$safe-area-inset-bottom / 1.5}
-    );
-
     right: 1.5rem;
-    bottom: calc(1rem + #{$navbar-offset});
+    bottom: calc(1rem + #{layout.$header-navbar-height});
     transition-delay: 0.5s;
 
     &.open {
-      $navbar-open-offset: calc(#{layout.$header-drawer-height} + #{$navbar-offset});
-
       right: 1.5rem;
-      bottom: calc(1rem + #{$navbar-open-offset});
+      bottom: calc(1rem + #{layout.$header-open-drawer-height});
       transition-delay: 0s;
     }
   }

src/components/container/ContainerComponent.ce.vue

@@ -151,7 +151,7 @@ onBeforeMount(() => addCustomProgressProperty());
   top: layout.$safe-navbar-height;
 
   &.drawer-visible {
-    top: layout.$header-open-drawer-height;
+    top: layout.$safe-header-open-drawer-height;
   }
 
   &.floating {
@@ -186,7 +186,7 @@ onBeforeMount(() => addCustomProgressProperty());
   top: calc(#{layout.$safe-navbar-height} + 12px);
 
   &.drawer-visible {
-    top: calc(#{layout.$header-open-drawer-height} + 12px);
+    top: calc(#{layout.$safe-header-open-drawer-height} + 12px);
   }
 
   &.floating {

src/components/views/checkin/CheckinComponent.vue

@@ -24,6 +24,11 @@ const props = defineProps({
     type: HTMLElement,
     required: false,
   },
+  reverse: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const i18n = useI18n('watching');
@@ -146,7 +151,11 @@ const onClick = () => {
 
 <template>
   <div class="wrapper">
-    <div class="container" :class="{ watching: isWatching, offset }" @click="onClick">
+    <div
+      class="container"
+      :class="{ watching: isWatching, offset, reverse }"
+      @click="onClick"
+    >
       <span class="left">
         <NIcon class="icon" :component="icon" />
         <div class="column">
@@ -401,6 +410,17 @@ const onClick = () => {
         }
       }
     }
+
+    &.reverse {
+      height: layout.$watching-height;
+      padding-top: calc(#{layout.$safe-area-inset-top / 1.5});
+
+      &:active,
+      &:focus-within,
+      &:hover {
+        height: layout.$watching-open-height;
+      }
+    }
   }
 
   @media (width <= 600px) {

src/components/views/history/HistoryNavbar.vue

@@ -128,7 +128,7 @@ const open = ref(false);
     flex-wrap: wrap;
     justify-content: center;
     max-width: min(36.5rem, 100dvw);
-    max-height: calc(var(--full-height) - #{layout.$header-open-drawer-height});
+    max-height: calc(var(--full-height) - #{layout.$safe-header-open-drawer-height});
     overflow: auto;
     scrollbar-width: thin;
   }

src/components/views/settings/SettingsComponent.vue

@@ -237,7 +237,7 @@ onDeactivated(() => {
       margin-bottom: layout.$header-navbar-height;
 
       .card:first-child {
-        margin-top: 0.5rem;
+        margin-top: calc(#{layout.$safe-area-inset-top / 2});
       }
     }
   }

src/styles/layout.scss

@@ -6,9 +6,10 @@ $safe-area-inset-left: var(--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(#{$safe-navbar-height} + #{$header-drawer-height});
+$header-open-drawer-height: calc(#{$header-navbar-height} + #{$header-drawer-height});
+$safe-navbar-height: calc(#{$header-navbar-height} + #{$safe-area-inset-top});
+$safe-header-open-drawer-height: calc(#{$safe-navbar-height} + #{$header-drawer-height});
 $safe-content-height: calc(var(--full-height) - #{$safe-navbar-height});
 $safe-full-height: calc(var(--full-height) - #{$safe-area-inset-top});