refactor(webui): use itemcard for series thumbnail

komga-webui/src/components/ItemCard.vue

@@ -4,6 +4,7 @@
       <v-card
         :width="width"
         @click="onClick"
+        :class="noLink ? 'no-link' : ''"
         :ripple="false"
       >
         <!--      Thumbnail-->
@@ -12,7 +13,7 @@
           lazy-src="../assets/cover.svg"
           aspect-ratio="0.7071"
         >
-          <!-- unread tick for books -->
+          <!-- unread tick for book -->
           <div class="unread" v-if="isUnread"/>
 
           <!-- unread count for series -->
@@ -23,6 +24,7 @@
             {{ unreadCount }}
           </span>
 
+          <!-- Thumbnail overlay -->
           <v-fade-transition>
             <v-overlay
               v-if="hover || selected || preselect"
@@ -55,15 +57,18 @@
             style="position: absolute; bottom: 0"
           />
         </v-img>
+
         <!--      Description-->
-        <v-card-subtitle
-          v-line-clamp="2"
-          v-bind="subtitleProps"
-          v-html="title"
-        >
-        </v-card-subtitle>
-        <v-card-text class="px-2" v-html="body">
-        </v-card-text>
+        <template v-if="!thumbnailOnly">
+          <v-card-subtitle
+            v-line-clamp="2"
+            v-bind="subtitleProps"
+            v-html="title"
+          >
+          </v-card-subtitle>
+          <v-card-text class="px-2" v-html="body">
+          </v-card-text>
+        </template>
       </v-card>
     </template>
   </v-hover>
@@ -82,6 +87,14 @@ export default Vue.extend({
       type: Object as () => BookDto | SeriesDto,
       required: true,
     },
+    thumbnailOnly: {
+      type: Boolean,
+      default: false,
+    },
+    noLink: {
+      type: Boolean,
+      default: false,
+    },
     width: {
       type: [String, Number],
       required: false,
@@ -152,7 +165,7 @@ export default Vue.extend({
     onClick () {
       if (this.preselect && this.onSelected !== undefined) {
         this.selectItem()
-      } else {
+      } else if (!this.noLink) {
         this.goto()
       }
     },
@@ -176,6 +189,10 @@ export default Vue.extend({
 <style>
 @import "../styles/unread-triangle.css";
 
+.no-link * {
+  cursor: default;
+}
+
 .item-border {
   border: 3px solid var(--v-secondary-base);
 }

komga-webui/src/views/BrowseSeries.vue

@@ -101,11 +101,13 @@
     <v-container fluid class="px-6">
       <v-row>
         <v-col cols="4" sm="4" md="auto" lg="auto" xl="auto">
-          <v-img :src="thumbnailUrl"
-                 lazy-src="../assets/cover.svg"
-                 max-height="300"
-                 max-width="212"
-          />
+          <item-card
+            v-if="series.hasOwnProperty('id')"
+            width="212"
+            :item="series"
+            thumbnail-only
+            no-link
+          ></item-card>
 
         </v-col>
         <v-col cols="8">
@@ -145,6 +147,7 @@ import Badge from '@/components/Badge.vue'
 import EditBooksDialog from '@/components/EditBooksDialog.vue'
 import EditSeriesDialog from '@/components/EditSeriesDialog.vue'
 import ItemBrowser from '@/components/ItemBrowser.vue'
+import ItemCard from '@/components/ItemCard.vue'
 import PageSizeSelect from '@/components/PageSizeSelect.vue'
 import SortMenuButton from '@/components/SortMenuButton.vue'
 import ToolbarSticky from '@/components/ToolbarSticky.vue'
@@ -156,7 +159,16 @@ const cookiePageSize = 'pagesize'
 
 export default Vue.extend({
   name: 'BrowseSeries',
-  components: { ToolbarSticky, SortMenuButton, Badge, EditSeriesDialog, EditBooksDialog, ItemBrowser, PageSizeSelect },
+  components: {
+    ToolbarSticky,
+    SortMenuButton,
+    Badge,
+    EditSeriesDialog,
+    EditBooksDialog,
+    ItemBrowser,
+    PageSizeSelect,
+    ItemCard,
+  },
   data: () => {
     return {
       series: {} as SeriesDto,