fix(webui): make card title as link

so it can be clicked using SHIFT or CTRL to open in new tab closes #224
gotson · Jul 2, 2020 · d6e4b80 · d6e4b80
1 parent a3c6872
commit d6e4b80
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/komga-webui/src/components/ItemCard.vue b/komga-webui/src/components/ItemCard.vue
@@ -94,12 +94,14 @@
 
         <!--      Description-->
         <template v-if="!thumbnailOnly">
-          <v-card-subtitle
-            v-line-clamp="2"
-            v-bind="subtitleProps"
-            v-html="title"
-          >
-          </v-card-subtitle>
+          <router-link :to="to">
+            <v-card-subtitle
+              v-line-clamp="2"
+              v-bind="subtitleProps"
+              v-html="title"
+            >
+            </v-card-subtitle>
+          </router-link>
           <v-card-text class="px-2" v-html="body">
           </v-card-text>
         </template>
@@ -116,6 +118,7 @@ import { getReadProgress, getReadProgressPercentage } from '@/functions/book-pro
 import { ReadStatus } from '@/types/enum-books'
 import { createItem, Item, ItemTypes } from '@/types/items'
 import Vue from 'vue'
+import { RawLocation } from 'vue-router'
 
 export default Vue.extend({
   name: 'ItemCard',
@@ -221,6 +224,9 @@ export default Vue.extend({
       }
       return false
     },
+    to (): RawLocation {
+      return this.computedItem.to()
+    },
   },
   methods: {
     onClick () {
@@ -231,7 +237,7 @@ export default Vue.extend({
       }
     },
     goto () {
-      this.computedItem.goto(this.$router)
+      this.$router.push(this.computedItem.to())
     },
     selectItem () {
       if (this.onSelected !== undefined) {
@@ -280,4 +286,12 @@ export default Vue.extend({
   z-index: 2;
 }
 
+.item-card a {
+  text-decoration: none;
+}
+
+.item-card a:hover {
+  text-decoration: underline;
+  text-decoration-color: black;
+}
 </style>
diff --git a/komga-webui/src/types/items.ts b/komga-webui/src/types/items.ts
@@ -1,5 +1,5 @@
 import { bookThumbnailUrl, collectionThumbnailUrl, seriesThumbnailUrl } from '@/functions/urls'
-import { VueRouter } from 'vue-router/types/router'
+import { RawLocation } from 'vue-router/types/router'
 
 function plural (count: number, singular: string, plural: string) {
   return `${count} ${count === 1 ? singular : plural}`
@@ -44,7 +44,7 @@ export abstract class Item<T> {
 
   abstract body (): string
 
-  abstract goto (router: VueRouter): void
+  abstract to (): RawLocation
 }
 
 export class BookItem extends Item<BookDto> {
@@ -66,8 +66,8 @@ export class BookItem extends Item<BookDto> {
     return `<span>${plural(c, 'Page', 'Pages')}</span>`
   }
 
-  goto (router: VueRouter): void {
-    router.push({ name: 'browse-book', params: { bookId: this.item.id.toString() } })
+  to (): RawLocation {
+    return { name: 'browse-book', params: { bookId: this.item.id.toString() } }
   }
 }
 
@@ -89,8 +89,8 @@ export class SeriesItem extends Item<SeriesDto> {
     return `<span>${plural(c, 'Book', 'Books')}</span>`
   }
 
-  goto (router: VueRouter): void {
-    router.push({ name: 'browse-series', params: { seriesId: this.item.id.toString() } })
+  to (): RawLocation {
+    return { name: 'browse-series', params: { seriesId: this.item.id.toString() } }
   }
 }
 
@@ -112,7 +112,7 @@ export class CollectionItem extends Item<CollectionDto> {
     return `<span>${c} Series</span>`
   }
 
-  goto (router: VueRouter): void {
-    router.push({ name: 'browse-collection', params: { collectionId: this.item.id.toString() } })
+  to (): RawLocation {
+    return { name: 'browse-collection', params: { collectionId: this.item.id.toString() } }
   }
 }