From a580b1eb6d989c7f6325289b5375551bec37714c Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Mon, 14 Nov 2022 16:37:11 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=BE=D1=81=D1=82=D0=B5=D1=80=D0=B0?=
 =?UTF-8?q?=20=D0=B2=20=D0=BE=D1=82=D0=B4=D0=B5=D0=BB=D1=8C=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=BC=20=D0=BE=D0=BA=D0=BD=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Search/BookInfoDialog/BookInfoDialog.vue  | 51 +++++++++++++++++--
 1 file changed, 47 insertions(+), 4 deletions(-)

diff --git a/client/components/Search/BookInfoDialog/BookInfoDialog.vue b/client/components/Search/BookInfoDialog/BookInfoDialog.vue
index a7bca77..ee8b9bc 100644
--- a/client/components/Search/BookInfoDialog/BookInfoDialog.vue
+++ b/client/components/Search/BookInfoDialog/BookInfoDialog.vue
@@ -17,10 +17,12 @@
             </div>
 
             <div class="row q-mt-sm no-wrap">
-                <div class="column justify-center" style="height: 300px; width: 200px; min-width: 100px">
-                    <img v-if="coverSrc" :src="coverSrc" class="fit row justify-center items-center" style="object-fit: contain" @error="coverSrc = ''" />
-                    <div v-if="!coverSrc" class="fit row justify-center items-center text-grey-5" style="border: 1px solid #ccc; font-size: 300%">
-                        <i>{{ book.ext }}</i>
+                <div class="poster-size">
+                    <div class="poster-size column justify-center items-center" :class="{poster: coverSrc}" @click.stop.prevent="posterClick">
+                        <img v-if="coverSrc" :src="coverSrc" class="fit row justify-center items-center" style="object-fit: contain" @error="coverSrc = ''" />
+                        <div v-if="!coverSrc" class="fit row justify-center items-center text-grey-5" style="border: 1px solid #ccc; font-size: 300%">
+                            <i>{{ book.ext }}</i>
+                        </div>
                     </div>
                 </div>
 
@@ -71,6 +73,19 @@
                 OK
             </q-btn>
         </template>
+
+
+        <Dialog v-model="posterDialogVisible">
+            <template #header>
+                <div class="row items-center">
+                    <div style="font-size: 110%">
+                        Обложка
+                    </div>
+                </div>
+            </template>
+
+            <img :src="coverSrc" class="fit q-pb-sm" style="height: 100%; max-height: calc(100vh - 140px); object-fit: contain" />
+        </Dialog>
     </Dialog>
 </template>
 
@@ -106,6 +121,7 @@ class BookInfoDialog {
     };
 
     dialogVisible = false;
+    posterDialogVisible = false;
     selectedTab = 'fb2';
 
     //info props
@@ -276,6 +292,13 @@ class BookInfoDialog {
             this.book = bookInfo.book;
     }
 
+    posterClick() {
+        if (!this.coverSrc)
+            return;
+
+        this.posterDialogVisible = true;
+    }
+
     okClick() {
         this.dialogVisible = false;
     }
@@ -286,6 +309,26 @@ export default vueComponent(BookInfoDialog);
 </script>
 
 <style scoped>
+.poster-size {
+    height: 300px;
+    width: 200px;
+    min-width: 100px;
+}
+
+.poster {
+    width: 100%;
+    height: 100%;
+}
+
+.poster:hover {
+    position: relative;
+    top: -1%;
+    left: -1%;
+    width: 102%;
+    height: 102%;
+    cursor: pointer;
+}
+
 </style>
 
 <style>