From 6a8d901ce1ee0a1dc4b9a3287b44dcd186d861a5 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Mon, 4 Jul 2022 14:59:56 -0500
Subject: [PATCH] Update:Collections table row UI updates and include book
 duration #240

---
 components/tables/collection/BookTableRow.vue | 22 +++++++++++++------
 pages/collection/_id.vue                      |  6 ++---
 plugins/init.client.js                        | 11 ++++++----
 tailwind.config.js                            |  3 +++
 4 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/components/tables/collection/BookTableRow.vue b/components/tables/collection/BookTableRow.vue
index 841d01c6..54db2cbf 100644
--- a/components/tables/collection/BookTableRow.vue
+++ b/components/tables/collection/BookTableRow.vue
@@ -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>
\ No newline at end of file
+</script>
+
+<style>
+.book-table-content {
+  width: calc(100% - 50px);
+  max-width: calc(100% - 50px);
+}
+</style>
\ No newline at end of file
diff --git a/pages/collection/_id.vue b/pages/collection/_id.vue
index 1347f3cc..5d439c38 100644
--- a/pages/collection/_id.vue
+++ b/pages/collection/_id.vue
@@ -6,8 +6,8 @@
           <covers-collection-cover :book-items="bookItems" :width="240" :height="120 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
         </div>
       </div>
-      <div class="flex-grow px-2 py-6 md:py-0 md:px-10">
-        <div class="flex items-center">
+      <div class="flex-grow py-6">
+        <div class="flex items-center px-2">
           <h1 class="text-xl font-sans">
             {{ collectionName }}
           </h1>
@@ -18,7 +18,7 @@
           </ui-btn>
         </div>
 
-        <div class="my-8 max-w-2xl">
+        <div class="my-8 max-w-2xl px-2">
           <p class="text-base text-gray-100">{{ description }}</p>
         </div>
 
diff --git a/plugins/init.client.js b/plugins/init.client.js
index dc89edc8..ce773ecc 100644
--- a/plugins/init.client.js
+++ b/plugins/init.client.js
@@ -52,17 +52,20 @@ Vue.prototype.$bytesPretty = (bytes, decimals = 2) => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }
 
-Vue.prototype.$elapsedPretty = (seconds) => {
+Vue.prototype.$elapsedPretty = (seconds, useFullNames = false) => {
+  if (seconds < 60) {
+    return `${Math.floor(seconds)} sec${useFullNames ? 'onds' : ''}`
+  }
   var minutes = Math.floor(seconds / 60)
   if (minutes < 70) {
-    return `${minutes} min`
+    return `${minutes} min${useFullNames ? `ute${minutes === 1 ? '' : 's'}` : ''}`
   }
   var hours = Math.floor(minutes / 60)
   minutes -= hours * 60
   if (!minutes) {
-    return `${hours} hr`
+    return `${hours} ${useFullNames ? 'hours' : 'hr'}`
   }
-  return `${hours} hr ${minutes} min`
+  return `${hours} ${useFullNames ? `hour${hours === 1 ? '' : 's'}` : 'hr'} ${minutes} ${useFullNames ? `minute${minutes === 1 ? '' : 's'}` : 'min'}`
 }
 
 Vue.prototype.$secondsToTimestamp = (seconds) => {
diff --git a/tailwind.config.js b/tailwind.config.js
index 5ab4c04e..368e3bfd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -33,6 +33,9 @@ module.exports = {
         sans: ['Source Sans Pro', ...defaultTheme.fontFamily.sans],
         mono: ['Ubuntu Mono', ...defaultTheme.fontFamily.mono],
         book: ['Gentium Book Basic', 'serif']
+      },
+      fontSize: {
+        xxs: '0.625rem'
       }
     }
   },