Add:Experimental authors page layout #187,Add:Square covers #210

This commit is contained in:
advplyr 2021-12-02 19:02:38 -06:00
parent 9a6ba3d0de
commit d544540454
24 changed files with 304 additions and 112 deletions

View file

@ -6,9 +6,9 @@
<span class="material-icons drag-handle text-xl">menu</span>
</div>
</div>
<div class="h-full relative" :style="{ width: '50px' }">
<covers-book-cover :audiobook="book" :width="50" />
<div class="absolute top-0 left-0 bg-black bg-opacity-50 flex items-center justify-center h-full w-full" v-show="isHovering && showPlayBtn">
<div class="h-full relative" :style="{ width: coverWidth + 'px' }">
<covers-book-cover :audiobook="book" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
<div class="absolute top-0 left-0 bg-black bg-opacity-50 flex items-center justify-center h-full w-full z-10" v-show="isHovering && showPlayBtn">
<div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-40 cursor-pointer" @click="playClick">
<span class="material-icons">play_arrow</span>
</div>
@ -57,7 +57,8 @@ export default {
type: Object,
default: () => {}
},
isDragging: Boolean
isDragging: Boolean,
bookCoverAspectRatio: Number
},
data() {
return {
@ -117,6 +118,10 @@ export default {
},
userIsRead() {
return this.userAudiobook ? !!this.userAudiobook.isRead : false
},
coverWidth() {
if (this.bookCoverAspectRatio === 1) return 50 * 1.6
return 50
}
},
methods: {