extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-10-05 17:52:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update:Collections page book list show authors and update UI for mobile #943

Browse Source
This commit is contained in:
advplyr 2022-10-27 17:46:51 -05:00
parent 8127ee7e56
commit 76d55e72df
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client/components/tables/collection/BookTableRow.vue
View File

@ -6,7 +6,7 @@
<span class="material-icons drag-handle text-lg md:text-xl">menu</span>
</div>
</div>
<div class="h-full relative" :style="{ width: coverWidth + 'px', minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }">
<div class="h-full relative flex items-center" :style="{ width: coverWidth + 'px', minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }">
<covers-book-cover :library-item="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">
@ -14,18 +14,20 @@
</div>
</div>
</div>
<div class="flex-grow max-w-md h-full px-2 flex items-center">
<div class="truncate px-1">
<nuxt-link :to="`/item/${book.id}`" class="truncate hover:underline">{{ bookTitle }}</nuxt-link>
<div class="flex-grow overflow-hidden max-w-48 md:max-w-md h-full flex items-center px-2 md:px-3">
<div>
<div class="truncate max-w-48 md:max-w-md">
<nuxt-link :to="`/item/${book.id}`" class="truncate hover:underline text-sm md:text-base">{{ bookTitle }}</nuxt-link>
</div>
<div class="truncate max-w-48 md:max-w-md text-xs md:text-sm text-gray-300">
<template v-for="(author, index) in bookAuthors">
<nuxt-link :key="author.id" :to="`/author/${author.id}`" class="truncate hover:underline">{{ author.name }}</nuxt-link
><span :key="author.id + '-comma'" v-if="index < bookAuthors.length - 1">,&nbsp;</span>
</template>
</div>
<p class="text-xs md:text-sm text-gray-400">{{ bookDuration }}</p>
</div>
</div>
<div class="w-20 flex items-center">
<p class="font-mono text-sm">{{ bookDuration }}</p>
</div>
<!-- <div class="w-12 flex items-center justify-center">
<span class="material-icons text-lg text-white text-opacity-70 hover:text-opacity-100 cursor-pointer">radio_button_unchecked</span>
</div> -->
</div>
<div class="w-40 absolute top-0 -right-24 h-full transform transition-transform" :class="!isHovering ? 'translate-x-0' : translateDistance">
<div class="flex h-full items-center">
@ -88,11 +90,11 @@ export default {
bookTitle() {
return this.mediaMetadata.title || ''
},
bookAuthor() {
return (this.mediaMetadata.authors || []).map((au) => au.name).join(', ')
bookAuthors() {
return this.mediaMetadata.authors || []
},
bookDuration() {
return this.$secondsToTimestamp(this.media.duration)
return this.$elapsedPretty(this.media.duration)
},
isMissing() {
return this.book.isMissing
@ -113,7 +115,7 @@ export default {
return this.itemProgress ? !!this.itemProgress.isFinished : false
},
coverSize() {
return this.$store.state.globals.isMobile ? 40 : 50
return this.$store.state.globals.isMobile ? 30 : 50
},
coverWidth() {
if (this.bookCoverAspectRatio === 1) return this.coverSize * 1.6