diff --git a/client/assets/app.css b/client/assets/app.css index c823af2f..b7b8499d 100644 --- a/client/assets/app.css +++ b/client/assets/app.css @@ -112,7 +112,7 @@ input[type=number] { background-color: #373838; } -.tracksTable tr:hover { +.tracksTable tr:hover:not(:has(th)) { background-color: #474747; } @@ -232,6 +232,20 @@ Bookshelf Label -webkit-box-orient: vertical; } +.episode-subtitle-long { + word-break: break-word; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + line-height: 16px; + /* fallback */ + max-height: 72px; + /* fallback */ + -webkit-line-clamp: 6; + /* number of lines to show */ + -webkit-box-orient: vertical; +} + /* Padding for toastification toasts in the top right to not cover appbar/toolbar */ .app-bar-and-toolbar .Vue-Toastification__container.top-right { diff --git a/client/components/app/SideRail.vue b/client/components/app/SideRail.vue index 25350d24..995f4c23 100644 --- a/client/components/app/SideRail.vue +++ b/client/components/app/SideRail.vue @@ -49,6 +49,14 @@
+{{ $strings.ButtonPlaylists }}
+ + +{{ $strings.LabelNarrators }}
+ + +{{ $strings.ButtonPlaylists }}
- - -{{ title }}
-{{ matchHtml }}
+by {{ authorName }}
@@ -61,7 +61,6 @@ export default { }, matchHtml() { if (!this.matchText || !this.search) return '' - if (this.matchKey === 'subtitle') return '' // This used to highlight the part of the search found // but with removing commas periods etc this is no longer plausible @@ -69,6 +68,7 @@ export default { if (this.matchKey === 'episode') return `${this.$strings.LabelEpisode}: ${html}
` if (this.matchKey === 'tags') return `${this.$strings.LabelTags}: ${html}
` + if (this.matchKey === 'subtitle') return `${html}
` if (this.matchKey === 'authors') return `by ${html}` if (this.matchKey === 'isbn') return `ISBN: ${html}
` if (this.matchKey === 'asin') return `ASIN: ${html}
` diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue index 42a3be4e..a6d79c32 100644 --- a/client/components/cards/LazyBookCard.vue +++ b/client/components/cards/LazyBookCard.vue @@ -76,6 +76,10 @@{{ displayTitle }}
@@ -85,13 +85,13 @@ export default { case 'addedAt': return `${this.$strings.LabelAdded} ${this.$formatDate(this.addedAt, this.dateFormat)}` case 'totalDuration': - return `${this.$strings.LabelDuration} ${this.$elapsedPrettyExtended(this.totalDuration, false)}` + return `${this.$strings.LabelDuration} ${this.$elapsedPrettyExtended(this.totalDuration, false)}` case 'lastBookUpdated': - const lastUpdated = Math.max(...(this.books).map(x => x.updatedAt), 0) + const lastUpdated = Math.max(...this.books.map((x) => x.updatedAt), 0) return `${this.$strings.LabelLastBookUpdated} ${this.$formatDate(lastUpdated, this.dateFormat)}` case 'lastBookAdded': - const lastBookAdded = Math.max(...(this.books).map(x => x.addedAt), 0) - return `${this.$strings.LabelLastBookAdded} ${this.$formatDate(lastBookAdded, this.dateFormat)}` + const lastBookAdded = Math.max(...this.books.map((x) => x.addedAt), 0) + return `${this.$strings.LabelLastBookAdded} ${this.$formatDate(lastBookAdded, this.dateFormat)}` default: return null } @@ -115,6 +115,14 @@ export default { seriesBooksFinished() { return this.seriesBookProgress.filter((p) => p.isFinished) }, + hasSeriesBookInProgress() { + return this.seriesBookProgress.some((p) => !p.isFinished && p.progress > 0) + }, + seriesPercentInProgress() { + let totalFinishedAndInProgress = this.seriesBooksFinished.length + if (this.hasSeriesBookInProgress) totalFinishedAndInProgress += 1 + return Math.min(1, Math.max(0, totalFinishedAndInProgress / this.books.length)) + }, isSeriesFinished() { return this.books.length === this.seriesBooksFinished.length }, diff --git a/client/components/cards/NarratorCard.vue b/client/components/cards/NarratorCard.vue index 9d3e5a30..7b8848cc 100644 --- a/client/components/cards/NarratorCard.vue +++ b/client/components/cards/NarratorCard.vue @@ -1,8 +1,8 @@