groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-02-08 03:09:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change: UI to display correctly on mobile #162

Browse source
This commit is contained in:
advplyr 2021-11-04 17:35:59 -05:00
parent b0ea2f8008
commit b827667a72
30 changed files with 239 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

3
client/components/cards/BookCard.vue
View file

@ -13,7 +13,8 @@
<div class="w-full relative box-shadow-book" :style="{ height: height + 'px' }" @click="clickCard" @mouseover="isHovering = true" @mouseleave="isHovering = false">
<cards-book-cover :audiobook="audiobook" :author-override="authorFormat" :width="width" />
<div v-show="isHovering || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black rounded" :class="overlayWrapperClasslist">
<!-- Hidden SM and DOWN -->
<div v-show="isHovering || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black rounded hidden md:block" :class="overlayWrapperClasslist">
<div v-show="showPlayButton" class="h-full flex items-center justify-center">
<div class="hover:text-gray-200 hover:scale-110 transform duration-200" @click.stop.prevent="play">
<span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>

18
client/components/cards/GroupCover.vue
View file

@ -29,7 +29,8 @@ export default {
offsetIncrement: 0,
isFannedOut: false,
isDetached: false,
isAttaching: false
isAttaching: false,
windowWidth: 0
}
},
watch: {
@ -49,14 +50,17 @@ export default {
},
showExperimentalFeatures() {
return this.$store.state.showExperimentalFeatures
},
showCoverFan() {
return this.showExperimentalFeatures && this.windowWidth > 1024
}
},
methods: {
mouseoverCover() {
if (this.showExperimentalFeatures) this.setHover(true)
if (this.showCoverFan) this.setHover(true)
},
mouseleaveCover() {
if (this.showExperimentalFeatures) this.setHover(false)
if (this.showCoverFan) this.setHover(false)
},
detchCoverWrapper() {
if (!this.coverWrapperEl || !this.$refs.wrapper || this.isDetached) return
@ -82,7 +86,7 @@ export default {
this.coverWrapperEl.style.width = this.$refs.wrapper.clientWidth + 'px'
this.$refs.wrapper.appendChild(this.coverWrapperEl)
console.log('Appended to wrapper', this.$refs.wrapper.children)
this.isDetached = false
},
updatePosition() {
@ -310,7 +314,7 @@ export default {
coverImageEls.push(img)
}
if (this.showExperimentalFeatures) {
if (this.showCoverFan) {
var seriesNameCover = this.createSeriesNameCover(offsetLeft)
outerdiv.appendChild(seriesNameCover)
coverImageEls.push(seriesNameCover)
@ -324,7 +328,9 @@ export default {
}
}
},
mounted() {},
mounted() {
this.windowWidth = window.innerWidth
},
beforeDestroy() {
if (this.coverWrapperEl) this.coverWrapperEl.remove()
}