From 513d946faae61b5a542c00461caa220276af4cb8 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 4 Aug 2022 18:06:39 -0500
Subject: [PATCH] Update:Updates to collections page for mobile screen sizes

---
 .../components/tables/CollectionBooksTable.vue  |  9 +++++----
 .../tables/collection/BookTableRow.vue          | 17 ++++++++++-------
 client/pages/collection/_id.vue                 |  4 ++--
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/client/components/tables/CollectionBooksTable.vue b/client/components/tables/CollectionBooksTable.vue
index 4eaff721..63af8544 100644
--- a/client/components/tables/CollectionBooksTable.vue
+++ b/client/components/tables/CollectionBooksTable.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="w-full bg-primary bg-opacity-40">
-    <div class="w-full h-14 flex items-center px-4 bg-primary">
-      <p>Collection List</p>
-      <div class="w-6 h-6 bg-white bg-opacity-10 flex items-center justify-center rounded-full ml-2">
-        <p class="font-mono text-sm">{{ books.length }}</p>
+    <div class="w-full h-14 flex items-center px-4 md:px-6 py-2 bg-primary">
+      <p class="pr-4">Collection List</p>
+
+      <div class="w-6 h-6 md:w-7 md:h-7 bg-white bg-opacity-10 rounded-full flex items-center justify-center">
+        <span class="text-xs md:text-sm font-mono leading-none">{{ books.length }}</span>
       </div>
       <div class="flex-grow" />
       <!-- <p v-if="totalDuration">{{ totalDurationPretty }}</p> -->
diff --git a/client/components/tables/collection/BookTableRow.vue b/client/components/tables/collection/BookTableRow.vue
index a4bcff00..c4203741 100644
--- a/client/components/tables/collection/BookTableRow.vue
+++ b/client/components/tables/collection/BookTableRow.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="w-full px-2 py-2 overflow-hidden relative" @mouseover="mouseover" @mouseleave="mouseleave" :class="isHovering ? 'bg-white bg-opacity-5' : ''">
-    <div v-if="book" class="flex h-20">
-      <div class="w-16 max-w-16 h-full">
+  <div class="w-full px-1 md:px-2 py-2 overflow-hidden relative" @mouseover="mouseover" @mouseleave="mouseleave" :class="isHovering ? 'bg-white bg-opacity-5' : ''">
+    <div v-if="book" class="flex h-16 md:h-20">
+      <div class="w-10 min-w-10 md:w-16 md:max-w-16 h-full">
         <div class="flex h-full items-center justify-center">
-          <span class="material-icons drag-handle text-xl">menu</span>
+          <span class="material-icons drag-handle text-lg md:text-xl">menu</span>
         </div>
       </div>
-      <div class="h-full relative" :style="{ width: coverWidth + 'px' }">
+      <div class="h-full relative" :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">
@@ -107,9 +107,12 @@ export default {
     userIsFinished() {
       return this.itemProgress ? !!this.itemProgress.isFinished : false
     },
+    coverSize() {
+      return this.$store.state.globals.isMobile ? 40 : 50
+    },
     coverWidth() {
-      if (this.bookCoverAspectRatio === 1) return 50 * 1.6
-      return 50
+      if (this.bookCoverAspectRatio === 1) return this.coverSize * 1.6
+      return this.coverSize
     }
   },
   methods: {
diff --git a/client/pages/collection/_id.vue b/client/pages/collection/_id.vue
index 02be207c..22b63703 100644
--- a/client/pages/collection/_id.vue
+++ b/client/pages/collection/_id.vue
@@ -8,8 +8,8 @@
           </div>
         </div>
         <div class="flex-grow px-2 py-6 md:py-0 md:px-10">
-          <div class="flex sm:items-end flex-col sm:flex-row">
-            <h1 class="text-2xl md:text-3xl font-sans">
+          <div class="flex items-end flex-row flex-wrap md:flex-nowrap">
+            <h1 class="text-2xl md:text-3xl font-sans w-full md:w-fit mb-4 md:mb-0">
               {{ collectionName }}
             </h1>
             <div class="flex-grow" />