fix(webui): make card title as link

so it can be clicked using SHIFT or CTRL to open in new tab

closes #224
This commit is contained in:
Gauthier Roebroeck 2020-07-02 10:51:21 +08:00
parent a3c6872954
commit d6e4b807db
2 changed files with 29 additions and 15 deletions

View File

@ -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>

View File

@ -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() } }
}
}