mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-07-12 15:04:43 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Update:Collections table row UI updates and include book duration #240

Browse source
This commit is contained in:
advplyr 2022-07-04 14:59:56 -05:00
parent 68f3f0e276
commit 6a8d901ce1
4 changed files with 28 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

22
components/tables/collection/BookTableRow.vue
View file

@ -1,13 +1,14 @@
<template>
<div class="w-full px-2 py-2 overflow-hidden relative">
<div v-if="book" class="flex h-20">
<div v-if="book" class="flex w-full">
<div class="h-full relative" :style="{ width: bookWidth + 'px' }">
<covers-book-cover :library-item="book" :width="bookWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
</div>
<div class="w-80 h-full px-2 flex items-center">
<div>
<nuxt-link :to="`/item/${book.id}`" class="truncate text-sm">{{ bookTitle }}</nuxt-link>
<div class="flex-grow book-table-content h-full px-2 flex items-center">
<div class="max-w-full">
<nuxt-link :to="`/item/${book.id}`" class="truncate block text-sm">{{ bookTitle }}</nuxt-link>
<p class="truncate block text-gray-400 text-xs">{{ bookAuthor }}</p>
<p class="text-xxs text-gray-500">{{ bookDuration }}</p>
</div>
</div>
</div>
@ -46,13 +47,13 @@ export default {
return this.mediaMetadata.authorName || ''
},
bookDuration() {
return this.$secondsToTimestamp(this.media.duration)
return this.$elapsedPretty(this.media.duration)
},
bookCoverAspectRatio() {
return this.$store.getters['getBookCoverAspectRatio']
},
bookWidth() {
if (this.bookCoverAspectRatio === 1) return 80
if (this.bookCoverAspectRatio === 1) return 50
return 50
},
isMissing() {
@ -78,4 +79,11 @@ export default {
},
mounted() {}
}
</script>
</script>
<style>
.book-table-content {
width: calc(100% - 50px);
max-width: calc(100% - 50px);
}
</style>