From 8810f90226b96b417582234de6c72be67451667a Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Wed, 3 Aug 2022 18:27:38 -0500
Subject: [PATCH] Update:Cleanup edit modal match tab for mobile screens

---
 client/components/cards/BookMatchCard.vue    | 20 +++++++++++---------
 client/components/modals/item/tabs/Match.vue | 20 ++++++++++++--------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/client/components/cards/BookMatchCard.vue b/client/components/cards/BookMatchCard.vue
index 22ff0e63..ca169e92 100644
--- a/client/components/cards/BookMatchCard.vue
+++ b/client/components/cards/BookMatchCard.vue
@@ -1,16 +1,18 @@
 <template>
   <div v-if="book" class="w-full border-b border-gray-700 pb-2">
     <div class="flex py-1 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer" @click="selectMatch">
-      <div class="h-24 bg-primary" :style="{ minWidth: 96 / bookCoverAspectRatio + 'px' }">
-        <img v-if="selectedCover" :src="selectedCover" class="h-full w-full object-contain" />
-      </div>
-      <div v-if="!isPodcast" class="px-4 flex-grow">
-        <div class="flex items-center">
-          <h1 class="text-base">{{ book.title }}</h1>
-          <div class="flex-grow" />
-          <p>{{ book.publishedYear }}</p>
+      <div class="min-w-12 max-w-12 md:min-w-20 md:max-w-20">
+        <div class="w-full bg-primary">
+          <img v-if="selectedCover" :src="selectedCover" class="h-full w-full object-contain" />
         </div>
-        <p class="text-gray-300 text-sm">by {{ book.author }}</p>
+      </div>
+      <div v-if="!isPodcast" class="px-2 md:px-4 flex-grow">
+        <div class="flex items-center">
+          <h1 class="text-sm md:text-base">{{ book.title }}</h1>
+          <div class="flex-grow" />
+          <p class="text-sm md:text-base">{{ book.publishedYear }}</p>
+        </div>
+        <p class="text-gray-300 text-xs md:text-sm">by {{ book.author }}</p>
         <p v-if="book.narrator" class="text-gray-400 text-xs">Narrated by {{ book.narrator }}</p>
         <p v-if="book.duration" class="text-gray-400 text-xs">Runtime: {{ $elapsedPrettyExtended(book.duration) }}</p>
         <div v-if="book.series && book.series.length" class="flex py-1 -mx-1">
diff --git a/client/components/modals/item/tabs/Match.vue b/client/components/modals/item/tabs/Match.vue
index 6ef3495f..d3ed50ec 100644
--- a/client/components/modals/item/tabs/Match.vue
+++ b/client/components/modals/item/tabs/Match.vue
@@ -1,14 +1,14 @@
 <template>
-  <div id="match-wrapper" class="w-full h-full overflow-hidden px-4 py-6 relative">
+  <div id="match-wrapper" class="w-full h-full overflow-hidden px-2 md:px-4 py-4 md:py-6 relative">
     <form @submit.prevent="submitSearch">
-      <div class="flex items-center justify-start -mx-1 h-20">
-        <div class="w-40 px-1">
+      <div class="flex flex-wrap md:flex-nowrap items-center justify-start -mx-1">
+        <div class="w-36 px-1">
           <ui-dropdown v-model="provider" :items="providers" label="Provider" small />
         </div>
-        <div class="w-72 px-1">
+        <div class="flex-grow md:w-72 px-1">
           <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" placeholder="Search" />
         </div>
-        <div v-show="provider != 'itunes'" class="w-72 px-1">
+        <div v-show="provider != 'itunes'" class="w-60 md:w-72 px-1">
           <ui-text-input-with-label v-model="searchAuthor" label="Author" />
         </div>
         <ui-btn class="mt-5 ml-1" type="submit">Search</ui-btn>
@@ -20,7 +20,7 @@
     <div v-show="!processing && !searchResults.length && hasSearched" class="flex h-full items-center justify-center">
       <p>No Results</p>
     </div>
-    <div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden matchListWrapper">
+    <div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden matchListWrapper mt-4">
       <template v-for="(res, index) in searchResults">
         <cards-book-match-card :key="index" :book="res" :is-podcast="isPodcast" :book-cover-aspect-ratio="bookCoverAspectRatio" @select="selectMatch" />
       </template>
@@ -319,7 +319,6 @@ export default {
       }
 
       this.searchResults = results || []
-      console.log('Results', results)
       this.isProcessing = false
       this.hasSearched = true
     },
@@ -502,6 +501,11 @@ export default {
 
 <style>
 .matchListWrapper {
-  height: calc(100% - 80px);
+  height: calc(100% - 124px);
+}
+@media (min-width: 768px) {
+  .matchListWrapper {
+    height: calc(100% - 80px);
+  }
 }
 </style>