mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-07-25 13:14:33 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update:Cleanup chapters modal & increase width

Browse source
This commit is contained in:
advplyr 2023-06-13 17:15:28 -05:00
parent db3c5396e9
commit 4f03c2a35d
2 changed files with 12 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
components/modals/ChaptersModal.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<modals-modal v-model="show" :width="350" height="100%"> <modals-modal v-model="show" :width="400" height="100%">
<template #outer> <template #outer>
<div v-if="currentChapter" class="absolute top-8 left-4 z-40 pt-0.5" style="max-width: 80%"> <div v-if="currentChapter" class="absolute top-10 left-4 z-40 pt-1" style="max-width: 80%">
<p class="text-white text-lg truncate">Current: {{ currentChapterTitle }}</p> <p class="text-white text-lg truncate">{{ chapters.length }} Chapters</p>
</div> </div>
</template> </template>
@ -46,7 +46,9 @@ export default {
}, },
watch: { watch: {
value(newVal) { value(newVal) {
this.$nextTick(this.scrollToChapter) if (newVal) {
this.$nextTick(this.scrollToChapter)
}
} }
}, },
computed: { computed: {
@ -63,7 +65,7 @@ export default {
return this.playbackRate return this.playbackRate
}, },
currentChapterId() { currentChapterId() {
return this.currentChapter?.id || null return this.currentChapter?.id
}, },
currentChapterTitle() { currentChapterTitle() {
return this.currentChapter?.title || null return this.currentChapter?.title || null
@ -76,12 +78,12 @@ export default {
scrollToChapter() { scrollToChapter() {
if (!this.currentChapterId) return if (!this.currentChapterId) return
var container = this.$refs.container const container = this.$refs.container
if (container) { if (container) {
var currChapterEl = document.getElementById(`chapter-row-${this.currentChapterId}`) const currChapterEl = document.getElementById(`chapter-row-${this.currentChapterId}`)
if (currChapterEl) { if (currChapterEl) {
var offsetTop = currChapterEl.offsetTop const offsetTop = currChapterEl.offsetTop
var containerHeight = container.clientHeight const containerHeight = container.clientHeight
container.scrollTo({ top: offsetTop - containerHeight / 2 }) container.scrollTo({ top: offsetTop - containerHeight / 2 })
} }
} }

2
components/modals/Modal.vue
View file

@ -2,7 +2,7 @@
<div ref="wrapper" class="modal modal-bg w-full h-full max-h-screen fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-50 opacity-0"> <div ref="wrapper" class="modal modal-bg w-full h-full max-h-screen fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-50 opacity-0">
<div class="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-black to-transparent opacity-90 pointer-events-none" /> <div class="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-black to-transparent opacity-90 pointer-events-none" />
<div class="absolute z-40 top-10 right-4 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false"> <div class="absolute z-40 top-10 right-4 h-10 w-10 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">
<span class="material-icons text-4xl">close</span> <span class="material-icons text-4xl">close</span>
</div> </div>
<slot name="outer" /> <slot name="outer" />