fix(panel): adjust margin and loading indicators

Author: dvcol

src/components/common/buttons/TitleLink.vue

@@ -26,7 +26,7 @@ const onTitleClick = (e: MouseEvent) => {
 
 <template>
   <a class="anchor-link" @click="onTitleClick">
-    <component :is="component" :class="{ 'hover-link': !!$attrs.href }">
+    <component :is="component" class="content" :class="{ 'hover-link': !!$attrs.href }">
       <slot />
     </component>
   </a>
@@ -39,6 +39,10 @@ const onTitleClick = (e: MouseEvent) => {
   z-index: layers.$in-front;
   color: inherit;
   text-decoration: none;
+
+  .content {
+    margin: 0;
+  }
 }
 
 .hover-link {

src/components/views/panel/MoviePanel.vue

@@ -79,11 +79,6 @@ const { openTab } = useExtensionSettingsStore();
 </template>
 
 <style lang="scss" scoped>
-‡ .show-title:deep(h2),
-.show-title-skeleton {
-  margin-bottom: 1rem;
-}
-
 .show-title-skeleton {
   height: 1.5rem;
   margin-top: 0.625rem;

src/components/views/panel/MoviePanelDetails.vue

@@ -40,17 +40,17 @@ const genres = computed(() => {
 
 const year = computed(() => {
   if (!movie?.value) return;
-  return movie.value?.year ?? '-';
+  return movie.value?.year || '-';
 });
 
 const status = computed(() => {
   if (!movie?.value) return;
-  return capitalizeEachWord(movie.value?.status) ?? '-';
+  return capitalizeEachWord(movie.value?.status) || '-';
 });
 
 const country = computed(() => {
   if (!movie?.value) return;
-  return movie.value?.country ?? '-';
+  return movie.value?.country || '-';
 });
 </script>
 
@@ -91,16 +91,18 @@ const country = computed(() => {
       />
     </NFlex>
 
-    <!--  Genres  -->
-    <PanelDetail
-      :label="i18n('genres')"
-      :values="genres"
-      :skeleton="{ width: '3rem' }"
-      array
-    />
+    <NFlex class="lists" vertical size="large">
+      <!--  Genres  -->
+      <PanelDetail
+        :label="i18n('genres')"
+        :values="genres"
+        :skeleton="{ width: '3rem' }"
+        array
+      />
 
-    <!--  links  -->
-    <PanelLinks :ids="movie?.ids" mode="movie" />
+      <!--  links  -->
+      <PanelLinks :ids="movie?.ids" mode="movie" />
+    </NFlex>
   </NFlex>
 </template>
 
@@ -110,4 +112,8 @@ const country = computed(() => {
   flex: 1 1 auto;
   width: 100%;
 }
+
+.lists {
+  margin: 1.25rem 0 1rem;
+}
 </style>

src/components/views/panel/MoviePanelOverview.vue

@@ -23,7 +23,7 @@ const title = computed(() => {
 
 const overview = computed(() => {
   if (!movie?.value) return;
-  return movie?.value?.overview ?? '-';
+  return movie?.value?.overview || '-';
 });
 </script>
 

src/components/views/panel/PanelPoster.vue

@@ -95,7 +95,7 @@ const key = computed(() => {
   }
 
   position: relative;
-  margin-bottom: 1.25rem;
+  margin: 1.75rem 0;
   border: 1px solid var(--border-white);
   box-shadow: var(--image-box-shadow);
 }

src/components/views/panel/PersonPanel.vue

@@ -79,11 +79,6 @@ const { openTab } = useExtensionSettingsStore();
 </template>
 
 <style lang="scss" scoped>
-‡ .show-title:deep(h2),
-.show-title-skeleton {
-  margin-bottom: 1rem;
-}
-
 .show-title-skeleton {
   height: 1.5rem;
   margin-top: 0.625rem;

src/components/views/panel/PersonPanelDetails.vue

@@ -56,7 +56,7 @@ const knownFor = computed(() => {
 
 const birthplace = computed(() => {
   if (!person?.value) return;
-  return person.value?.birthplace ?? '-';
+  return person.value?.birthplace || '-';
 });
 
 const socials = computed(() => {
@@ -139,16 +139,18 @@ const socials = computed(() => {
       />
     </NFlex>
 
-    <!--  socials  -->
-    <PanelDetail
-      :label="i18n('socials')"
-      :values="socials"
-      :skeleton="{ width: '3rem' }"
-      array
-    />
+    <NFlex class="lists" vertical size="large">
+      <!--  socials  -->
+      <PanelDetail
+        :label="i18n('socials')"
+        :values="socials"
+        :skeleton="{ width: '3rem' }"
+        array
+      />
 
-    <!--  links  -->
-    <PanelLinks :ids="person?.ids" mode="person" />
+      <!--  links  -->
+      <PanelLinks :ids="person?.ids" mode="person" />
+    </NFlex>
   </NFlex>
 </template>
 
@@ -158,4 +160,8 @@ const socials = computed(() => {
   flex: 1 1 auto;
   width: 100%;
 }
+
+.lists {
+  margin: 1.5rem 0 0.5rem;
+}
 </style>

src/components/views/panel/PersonPanelOverview.vue

@@ -16,7 +16,7 @@ const { person } = toRefs(props);
 
 const biography = computed(() => {
   if (!person?.value) return;
-  return person?.value?.biography ?? '-';
+  return person?.value?.biography || '-';
 });
 </script>
 

src/components/views/panel/ShowPanel.vue

@@ -178,11 +178,6 @@ const { openTab } = useExtensionSettingsStore();
 </template>
 
 <style lang="scss" scoped>
-.show-title:deep(h2),
-.show-title-skeleton {
-  margin-bottom: 1rem;
-}
-
 .show-title-skeleton {
   height: 1.5rem;
   margin-top: 0.625rem;

src/components/views/panel/ShowPanelDetails.vue

@@ -70,12 +70,12 @@ const genres = computed(() => {
 
 const year = computed(() => {
   if (!show?.value) return;
-  return show.value?.year ?? '-';
+  return show.value?.year || '-';
 });
 
 const status = computed(() => {
   if (!show?.value) return;
-  return capitalizeEachWord(show.value?.status) ?? '-';
+  return capitalizeEachWord(show.value?.status) || '-';
 });
 
 const airedEpisodes = computed(() => {
@@ -92,12 +92,12 @@ const episodeType = computed(() => {
 
 const network = computed(() => {
   if (!show?.value && !season?.value) return;
-  return show?.value?.network ?? season?.value?.network ?? '-';
+  return (show?.value?.network ?? season?.value?.network) || '-';
 });
 
 const country = computed(() => {
   if (!show?.value) return;
-  return show.value?.country ?? '-';
+  return show.value?.country || '-';
 });
 
 const ids = computed(() => {
@@ -183,21 +183,23 @@ const ids = computed(() => {
       />
     </NFlex>
 
-    <!--  Genres  -->
-    <PanelDetail
-      :label="i18n('genres')"
-      :values="genres"
-      :skeleton="{ width: '3rem' }"
-      array
-    />
-
-    <!--  links  -->
-    <PanelLinks
-      :ids="ids"
-      :mode="mode"
-      :season="episode?.season ?? season?.number"
-      :episode="episode?.number"
-    />
+    <NFlex class="lists" vertical size="large">
+      <!--  Genres  -->
+      <PanelDetail
+        :label="i18n('genres')"
+        :values="genres"
+        :skeleton="{ width: '3rem' }"
+        array
+      />
+
+      <!--  links  -->
+      <PanelLinks
+        :ids="ids"
+        :mode="mode"
+        :season="episode?.season ?? season?.number"
+        :episode="episode?.number"
+      />
+    </NFlex>
   </NFlex>
 </template>
 
@@ -207,4 +209,8 @@ const ids = computed(() => {
   flex: 1 1 auto;
   width: 100%;
 }
+
+.lists {
+  margin: 0.25rem 0 0.5rem;
+}
 </style>

src/components/views/panel/ShowPanelOverview.vue

@@ -77,14 +77,14 @@ const url = computed(() => {
 const overview = computed(() => {
   if (mode.value === 'show') {
     if (!show?.value) return;
-    return show?.value?.overview ?? '-';
+    return show?.value?.overview || '-';
   }
   if (mode.value === 'season') {
     if (!season?.value) return;
-    return season?.value?.overview ?? show?.value?.overview ?? '-';
+    return (season?.value?.overview ?? show?.value?.overview) || '-';
   }
   if (!episode?.value) return;
-  return episode?.value?.overview ?? '-';
+  return episode?.value?.overview || '-';
 });
 </script>