From f5495d64a9b819a3939bd01f0546197d87fa2879 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 6 Aug 2022 08:25:31 -0500
Subject: [PATCH] Update:Show resolution under covers in covers tab #885

---
 client/components/covers/BookCover.vue       | 3 +++
 client/components/covers/PreviewCover.vue    | 9 +++++++--
 client/components/modals/item/tabs/Cover.vue | 6 +++---
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/client/components/covers/BookCover.vue b/client/components/covers/BookCover.vue
index 069650ef..838611ea 100644
--- a/client/components/covers/BookCover.vue
+++ b/client/components/covers/BookCover.vue
@@ -125,6 +125,9 @@ export default {
     },
     userToken() {
       return this.$store.getters['user/getToken']
+    },
+    resolution() {
+      return `${this.naturalWidth}x${this.naturalHeight}px`
     }
   },
   methods: {
diff --git a/client/components/covers/PreviewCover.vue b/client/components/covers/PreviewCover.vue
index 4d513620..4803d5b8 100644
--- a/client/components/covers/PreviewCover.vue
+++ b/client/components/covers/PreviewCover.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="relative rounded-sm overflow-hidden" :style="{ height: width * bookCoverAspectRatio + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }" @mouseover="isHovering = true" @mouseleave="isHovering = false">
-    <div class="w-full h-full relative">
+  <div class="relative rounded-sm" :style="{ height: width * bookCoverAspectRatio + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }" @mouseover="isHovering = true" @mouseleave="isHovering = false">
+    <div class="w-full h-full relative overflow-hidden">
       <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
         <div class="absolute cover-bg" ref="coverBg" />
       </div>
@@ -17,6 +17,8 @@
         <p class="text-center font-book text-error" :style="{ fontSize: sizeMultiplier + 'rem' }">Invalid Cover</p>
       </div>
     </div>
+
+    <p v-if="!imageFailed" class="absolute -bottom-5 left-0 right-0 mx-auto text-xs text-gray-300 text-center">{{ resolution }}</p>
   </div>
 </template>
 
@@ -54,6 +56,9 @@ export default {
     },
     placeholderCoverPadding() {
       return 0.8 * this.sizeMultiplier
+    },
+    resolution() {
+      return `${this.naturalWidth}x${this.naturalHeight}px`
     }
   },
   methods: {
diff --git a/client/components/modals/item/tabs/Cover.vue b/client/components/modals/item/tabs/Cover.vue
index 52b2759f..beb34dbb 100644
--- a/client/components/modals/item/tabs/Cover.vue
+++ b/client/components/modals/item/tabs/Cover.vue
@@ -31,9 +31,9 @@
 
           <div v-if="showLocalCovers" class="flex items-center justify-center">
             <template v-for="cover in localCovers">
-              <div :key="cover.path" class="m-0.5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(cover)">
+              <div :key="cover.path" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(cover)">
                 <div class="h-24 bg-primary" :style="{ width: 96 / bookCoverAspectRatio + 'px' }">
-                  <img :src="`${cover.localPath}?token=${userToken}`" class="h-full w-full object-contain" />
+                  <covers-preview-cover :src="`${cover.localPath}?token=${userToken}`" :width="96 / bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
                 </div>
               </div>
             </template>
@@ -58,7 +58,7 @@
     <div v-if="hasSearched" class="flex items-center flex-wrap justify-center max-h-80 overflow-y-scroll mt-2 max-w-full">
       <p v-if="!coversFound.length">No Covers Found</p>
       <template v-for="cover in coversFound">
-        <div :key="cover" class="m-0.5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === imageUrl ? 'border-yellow-300' : ''" @click="updateCover(cover)">
+        <div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === imageUrl ? 'border-yellow-300' : ''" @click="updateCover(cover)">
           <covers-preview-cover :src="cover" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
         </div>
       </template>