mirror of
https://github.com/gotson/komga.git
synced 2025-01-09 04:08:00 +08:00
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:
parent
a3c6872954
commit
d6e4b807db
@ -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>
|
||||
|
@ -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() } }
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user