mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-07-25 21:24:42 +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

18
components/modals/ChaptersModal.vue
View file

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