diff --git a/komga-webui/src/App.vue b/komga-webui/src/App.vue index 2c3cec5f1..bc7388d1c 100644 --- a/komga-webui/src/App.vue +++ b/komga-webui/src/App.vue @@ -3,3 +3,6 @@ + diff --git a/komga-webui/src/components/ItemCard.vue b/komga-webui/src/components/ItemCard.vue index f2fa71fb8..0c212ff1c 100644 --- a/komga-webui/src/components/ItemCard.vue +++ b/komga-webui/src/components/ItemCard.vue @@ -285,13 +285,4 @@ export default Vue.extend({ right: 0; z-index: 2; } - -.link-underline { - text-decoration: none; -} - -.link-underline:hover { - text-decoration: underline; - text-decoration-color: black; -} diff --git a/komga-webui/src/styles/global.css b/komga-webui/src/styles/global.css new file mode 100644 index 000000000..39314e654 --- /dev/null +++ b/komga-webui/src/styles/global.css @@ -0,0 +1,8 @@ +.link-underline { + text-decoration: none; +} + +.link-underline:hover { + text-decoration: underline; + text-decoration-color: black; +} diff --git a/komga-webui/src/views/BrowseBook.vue b/komga-webui/src/views/BrowseBook.vue index 08989b49a..4054b26fe 100644 --- a/komga-webui/src/views/BrowseBook.vue +++ b/komga-webui/src/views/BrowseBook.vue @@ -1,24 +1,59 @@ - - - mdi-arrow-left - - - + + mdi-pencil - - + + + + mdi-chevron-left + + + + + + mdi-menu + + + + + + + {{ book.metadata.number }} - {{ book.metadata.title }} + + + + + + + + mdi-chevron-right + @@ -36,8 +71,15 @@ - - {{ book.metadata.title }} + + + {{ series.metadata.title }} + + + + + + {{ book.metadata.title }} @@ -165,6 +207,9 @@ export default Vue.extend({ return { book: {} as BookDto, series: {} as SeriesDto, + siblings: [] as BookDto[], + siblingPrevious: {} as BookDto, + siblingNext: {} as BookDto, } }, async created () { @@ -176,14 +221,6 @@ export default Vue.extend({ this.$eventHub.$off(BOOK_CHANGED, this.reloadBook) this.$eventHub.$off(LIBRARY_DELETED, this.libraryDeleted) }, - watch: { - async book (val) { - if (this.$_.has(val, 'metadata.title')) { - this.series = await this.$komgaSeries.getOneSeries(val.seriesId) - document.title = `Komga - ${getBookTitleCompact(val.metadata.title, this.series.metadata.title)}` - } - }, - }, props: { bookId: { type: String, @@ -234,6 +271,12 @@ export default Vue.extend({ readingDirection (): string { return this.$_.capitalize(this.book.metadata.readingDirection.replace(/_/g, ' ')) }, + previousId (): string { + return this.siblingPrevious?.id?.toString() || '0' + }, + nextId (): string { + return this.siblingNext?.id?.toString() || '0' + }, }, methods: { libraryDeleted (event: EventLibraryDeleted) { @@ -246,6 +289,23 @@ export default Vue.extend({ }, async loadBook (bookId: string) { this.book = await this.$komgaBooks.getBook(bookId) + this.series = await this.$komgaSeries.getOneSeries(this.book.seriesId) + this.siblings = (await this.$komgaSeries.getBooks(this.book.seriesId, { unpaged: true } as PageRequest)).content + + if (this.$_.has(this.book, 'metadata.title')) { + document.title = `Komga - ${getBookTitleCompact(this.book.metadata.title, this.series.metadata.title)}` + } + + try { + this.siblingNext = await this.$komgaBooks.getBookSiblingNext(bookId) + } catch (e) { + this.siblingNext = {} as BookDto + } + try { + this.siblingPrevious = await this.$komgaBooks.getBookSiblingPrevious(bookId) + } catch (e) { + this.siblingPrevious = {} as BookDto + } }, analyze () { this.$komgaBooks.analyzeBook(this.book)