feat(web): parametrise full-height to allow override

Author: dvcol

package.json

@@ -54,7 +54,7 @@
     "@dvcol/base-http-client": "^1.10.0",
     "@dvcol/common-utils": "^1.4.0",
     "@dvcol/tmdb-http-client": "^1.2.3",
-    "@dvcol/trakt-http-client": "^1.4.1",
+    "@dvcol/trakt-http-client": "^1.4.3",
     "@dvcol/tvdb-http-client": "^1.1.3",
     "@dvcol/web-extension-utils": "^3.0.1",
     "@vue/devtools": "^7.0.15",

pnpm-lock.yaml

@@ -162,7 +162,7 @@ main {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: calc(100dvh - #{layout.$header-navbar-height});
+  min-height: calc(var(--full-height) - #{layout.$header-navbar-height});
   margin-top: layout.$header-navbar-height;
 }
 

src/components/AppComponent.vue

@@ -215,7 +215,7 @@ const onLoadMore = (payload: { page: number; pageCount: number; pageSize: number
 @include animation.fade-in;
 
 .list-scroll {
-  height: calc(100dvh - 8px);
+  height: calc(var(--full-height) - 8px);
   margin-top: -#{layout.$header-navbar-height};
   margin-bottom: 8px;
 

src/components/common/list/ListScroll.vue

@@ -90,7 +90,7 @@ const root = ref<HTMLElement>();
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
-  height: 100vh;
+  height: var(--full-height);
   overflow: auto;
   color: var(--color-text);
   font-weight: normal;

src/components/container/ContainerComponent.ce.vue

@@ -127,7 +127,7 @@ const openRelease = (url?: string) => {
 
 .container {
   width: 100%;
-  height: calc(100dvh - #{layout.$header-navbar-height});
+  height: calc(var(--full-height) - #{layout.$header-navbar-height});
   background: transparent;
 
   .card {

src/components/views/about/AboutComponent.vue

@@ -16,7 +16,15 @@ import {
   NText,
 } from 'naive-ui';
 
-import { computed, onDeactivated, onMounted, ref, Transition, watch } from 'vue';
+import {
+  computed,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  ref,
+  Transition,
+  watch,
+} from 'vue';
 
 import { useRoute, useRouter } from 'vue-router';
 
@@ -133,6 +141,9 @@ const onClick = () => {
   return onSignIn();
 };
 
+onActivated(() => {
+  if (useCode.value) getCodes();
+});
 onDeactivated(() => onCancel());
 </script>
 

src/components/views/login/LoginComponent.vue

@@ -274,7 +274,12 @@ onMounted(() => {
     >
       {{ title }}
     </TitleLink>
-    <NSkeleton v-else class="show-title-skeleton" style="width: 50dvh" round />
+    <NSkeleton
+      v-else
+      class="show-title-skeleton"
+      style="width: var(--half-height)"
+      round
+    />
 
     <PanelPoster :tmdb="movie?.ids.tmdb" mode="movie" />
 

src/components/views/panel/MoviePanel.vue

@@ -38,7 +38,7 @@ const { openTab } = useLinksStore();
     >
       {{ title }}
     </TitleLink>
-    <NSkeleton v-else class="title-skeleton" style="width: 40dvh" round />
+    <NSkeleton v-else class="title-skeleton" style="width: var(--height-40-dvh)" round />
 
     <div v-if="overview">{{ overview }}</div>
     <NSkeleton v-else style="width: 100%" :repeat="3" :sharp="false" />

src/components/views/panel/PanelOverview.vue

@@ -77,7 +77,12 @@ const { openTab } = useLinksStore();
     >
       {{ title }}
     </TitleLink>
-    <NSkeleton v-else class="show-title-skeleton" style="width: 50dvh" round />
+    <NSkeleton
+      v-else
+      class="show-title-skeleton"
+      style="width: var(--half-height)"
+      round
+    />
 
     <PanelPoster :tmdb="person?.ids.tmdb" mode="person" portait />
 

src/components/views/panel/PersonPanel.vue

@@ -380,7 +380,12 @@ const { openTab } = useLinksStore();
     >
       {{ title }}
     </TitleLink>
-    <NSkeleton v-else class="show-title-skeleton" style="width: 50dvh" round />
+    <NSkeleton
+      v-else
+      class="show-title-skeleton"
+      style="width: var(--half-height)"
+      round
+    />
 
     <PanelPoster
       :tmdb="show?.ids.tmdb"

src/components/views/panel/ShowPanel.vue

@@ -115,7 +115,7 @@ onDeactivated(() => {
 
 .container {
   width: 100%;
-  height: 100dvh;
+  height: var(--full-height);
   margin-top: -#{layout.$header-navbar-height};
   background: transparent;
 
@@ -142,12 +142,12 @@ onDeactivated(() => {
   .menu {
     @include mixin.hover-background;
 
-    height: calc(100dvh - #{layout.$header-navbar-height});
+    height: calc(var(--full-height) - #{layout.$header-navbar-height});
     padding: 0.5rem;
   }
 
   .content {
-    height: 100dvh;
+    height: var(--full-height);
     background: transparent;
   }
 

src/components/views/settings/SettingsComponent.vue

@@ -1,5 +1,10 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :host {
+  /* height */
+  --full-height: 100dvh;
+  --half-height: 50dvh;
+  --height-40-dvh: 40dvh;
+
   /* font variables */
   --font-size-xxs: 0.625rem;
   --font-size-xs: 0.75rem;