fix(checkin): adds watching offset in about and settings

Author: dvcol

src/components/views/about/AboutComponent.vue

@@ -10,6 +10,7 @@ import IconGithub from '~/components/icons/IconGithub.vue';
 import IconStar from '~/components/icons/IconStar.vue';
 import { ExternaLinks, ResolveExternalLinks } from '~/settings/external.links';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
+import { useWatchingStoreRefs } from '~/stores/data/watching.store';
 import { useLinksStore } from '~/stores/settings/links.store';
 import { useI18n } from '~/utils/i18n.utils';
 
@@ -22,6 +23,7 @@ const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 const { openTab } = useLinksStore();
 
 const { floating, reverse } = useAppStateStoreRefs();
+const { watching } = useWatchingStoreRefs();
 
 const openRelease = (url?: string) => {
   if (!url) return;
@@ -32,7 +34,7 @@ const openRelease = (url?: string) => {
 <template>
   <NLayout
     class="container"
-    :class="{ floating, reverse }"
+    :class="{ floating, reverse, watching }"
     :content-style="{
       padding: '0.75rem 1rem',
     }"
@@ -135,19 +137,29 @@ const openRelease = (url?: string) => {
   background: transparent;
   transition: padding 0.5s var(--n-bezier);
 
-  &.floating {
-    height: layout.$floating-content-height;
-    padding-top: layout.$floating-navbar-height;
+  &.watching {
+    padding-bottom: layout.$safe-watching-height;
   }
 
   &.reverse {
-    padding-bottom: layout.$header-navbar-height;
+    margin-bottom: layout.$header-navbar-height;
+
+    &.watching {
+      padding-top: layout.$top-safe-watching-height;
+      padding-bottom: 0;
+    }
   }
 
   .card {
     @include mixin.hover-background($from: var(--bg-black-50), $to: var(--bg-color-80));
   }
 
+  &.floating {
+    .card {
+      margin-top: layout.$floating-navbar-height;
+    }
+  }
+
   .link {
     :deep(.label) {
       padding: 0.15rem;

src/components/views/checkin/CheckinComponent.vue

@@ -412,8 +412,8 @@ const onClick = () => {
     }
 
     &.reverse {
-      height: layout.$watching-height;
-      padding-top: calc(#{layout.$safe-area-inset-top / 1.5});
+      height: layout.$top-safe-watching-height;
+      padding-top: calc(#{layout.$safe-area-inset-top} / 1.5);
 
       &:active,
       &:focus-within,

src/components/views/settings/SettingsComponent.vue

@@ -8,6 +8,7 @@ import type { Component, Ref } from 'vue';
 import PageLoading from '~/components/common/loading/PageLoading.vue';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useSimklStoreRefs } from '~/stores/data/simkl.store';
+import { useWatchingStoreRefs } from '~/stores/data/watching.store';
 import { useI18n } from '~/utils/i18n.utils';
 import lazyComponent from '~/utils/lazy.utils';
 import { watchMedia } from '~/utils/window.utils';
@@ -104,6 +105,7 @@ const onLeave = (section: Section) => {
 const isCompact = watchMedia('(max-width: 600px)');
 
 const { floating, reverse } = useAppStateStoreRefs();
+const { isWatching } = useWatchingStoreRefs();
 
 onDeactivated(() => {
   target.value = undefined;
@@ -112,7 +114,11 @@ onDeactivated(() => {
 </script>
 
 <template>
-  <NLayout class="container" :class="{ floating, reverse }" has-sider>
+  <NLayout
+    class="container"
+    :class="{ floating, reverse, watching: isWatching }"
+    has-sider
+  >
     <NLayoutSider
       class="menu"
       bordered
@@ -226,6 +232,10 @@ onDeactivated(() => {
     margin-top: layout.$safe-navbar-height;
   }
 
+  &.watching {
+    padding-bottom: layout.$safe-watching-height;
+  }
+
   &.reverse {
     margin-top: 0;
 
@@ -240,6 +250,11 @@ onDeactivated(() => {
         margin-top: calc(#{layout.$safe-area-inset-top / 2});
       }
     }
+
+    &.watching {
+      padding-top: layout.$top-safe-watching-height;
+      padding-bottom: 0;
+    }
   }
 
   &.floating {