Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-02-19 00:18:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update skeleton card to have box shadow, fix last row of skeleton cards

Browse Source
This commit is contained in:
advplyr 2024-12-26 16:34:25 -06:00
parent 780c0dcb99
commit 4d8501c347
1 changed files with 2 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/components/app/LazyBookshelf.vue
View File

@ -4,7 +4,7 @@
<div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4e sm:px-8e relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }"> <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4e sm:px-8e relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
<!-- Card skeletons --> <!-- Card skeletons -->
<template v-for="entityIndex in entitiesInShelf(shelf)"> <template v-for="entityIndex in entitiesInShelf(shelf)">
<div :key="entityIndex" class="w-full h-full absolute rounded z-5 top-0 left-0 bg-primary" :style="{ transform: entityTransform(entityIndex), width: cardWidth + 'px', height: coverHeight + 'px' }" /> <div :key="entityIndex" class="w-full h-full absolute rounded z-5 top-0 left-0 bg-primary box-shadow-book" :style="{ transform: entityTransform(entityIndex), width: cardWidth + 'px', height: coverHeight + 'px' }" />
</template> </template>
<div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20 h-6e" /> <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20 h-6e" />
</div> </div>
@ -181,9 +181,6 @@ export default {
bookWidth() { bookWidth() {
return this.cardWidth return this.cardWidth
}, },
bookHeight() {
return this.cardHeight
},
shelfPadding() { shelfPadding() {
if (this.bookshelfWidth < 640) return 32 * this.sizeMultiplier if (this.bookshelfWidth < 640) return 32 * this.sizeMultiplier
return 64 * this.sizeMultiplier return 64 * this.sizeMultiplier
@ -194,9 +191,6 @@ export default {
entityWidth() { entityWidth() {
return this.cardWidth return this.cardWidth
}, },
entityHeight() {
return this.cardHeight
},
shelfPaddingHeight() { shelfPaddingHeight() {
return 16 return 16
}, },
@ -840,7 +834,7 @@ export default {
}) })
}, },
entitiesInShelf(shelf) { entitiesInShelf(shelf) {
return shelf == this.totalShelves ? this.totalEntities % this.entitiesPerShelf : this.entitiesPerShelf return shelf == this.totalShelves ? this.totalEntities % this.entitiesPerShelf || this.entitiesPerShelf : this.entitiesPerShelf
}, },
entityTransform(entityIndex) { entityTransform(entityIndex) {
const shelfOffsetY = this.shelfPaddingHeight * this.sizeMultiplier const shelfOffsetY = this.shelfPaddingHeight * this.sizeMultiplier