From de13cfb555884a239e4aa767c9123026133545a8 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Wed, 28 Aug 2019 17:30:29 +0700
Subject: [PATCH] =?UTF-8?q?=D0=9A=20=D0=BF=D1=80=D0=B5=D0=B4=D1=8B=D0=B4?=
 =?UTF-8?q?=D1=83=D1=89=D0=B5=D0=BC=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Reader/SearchPage/SearchPage.vue          | 61 ++++++-------------
 client/components/share/Window.vue            |  6 +-
 2 files changed, 25 insertions(+), 42 deletions(-)

diff --git a/client/components/Reader/SearchPage/SearchPage.vue b/client/components/Reader/SearchPage/SearchPage.vue
index 6f021826..5c933c24 100644
--- a/client/components/Reader/SearchPage/SearchPage.vue
+++ b/client/components/Reader/SearchPage/SearchPage.vue
@@ -1,28 +1,24 @@
 <template>
-    <div ref="main" class="main" @click="close">
-        <div class="mainWindow" @click.stop>
-            <Window @close="close">
-                <template slot="header">
-                    {{ header }}
-                </template>
+    <Window ref="window" height="125px" max-width="600px" :top-shift="-50" @close="close">
+        <template slot="header">
+            {{ header }}
+        </template>
 
-                <div class="content">
-                    <span v-show="initStep">{{ initPercentage }}%</span>
+        <div class="content">
+            <span v-show="initStep">{{ initPercentage }}%</span>
 
-                    <div v-show="!initStep" class="input">
-                        <input ref="input" class="el-input__inner"
-                            placeholder="что ищем"
-                            :value="needle" @input="needle = $event.target.value"/>
-                        <div style="position: absolute; right: 10px; margin-top: 10px; font-size: 16px;">{{ foundText }}</div>
-                    </div>
-                    <el-button-group v-show="!initStep" class="button-group">
-                        <el-button @click="showNext"><i class="el-icon-arrow-down"></i></el-button>
-                        <el-button @click="showPrev"><i class="el-icon-arrow-up"></i></el-button>
-                    </el-button-group>
-                </div>
-            </Window>
+            <div v-show="!initStep" class="input">
+                <input ref="input" class="el-input__inner"
+                    placeholder="что ищем"
+                    :value="needle" @input="needle = $event.target.value"/>
+                <div style="position: absolute; right: 10px; margin-top: 10px; font-size: 16px;">{{ foundText }}</div>
+            </div>
+            <el-button-group v-show="!initStep" class="button-group">
+                <el-button @click="showNext"><i class="el-icon-arrow-down"></i></el-button>
+                <el-button @click="showPrev"><i class="el-icon-arrow-up"></i></el-button>
+            </el-button-group>
         </div>
-    </div>
+    </Window>
 </template>
 
 <script>
@@ -61,6 +57,8 @@ class SearchPage extends Vue {
     }
 
     async init(parsed) {
+        this.$refs.window.init();
+
         if (this.parsed != parsed) {
             this.initStep = true;
             this.stopInit = false;
@@ -178,32 +176,13 @@ class SearchPage extends Vue {
 </script>
 
 <style scoped>
-.main {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 40;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.mainWindow {
-    width: 100%;
-    max-width: 500px;
-    height: 125px;
-    display: flex;
-    position: relative;
-    top: -50px;
-}
-
 .content {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 10px;
+    min-width: 430px;
 }
 
 .input {
diff --git a/client/components/share/Window.vue b/client/components/share/Window.vue
index 6cf3adf2..0d8b377f 100644
--- a/client/components/share/Window.vue
+++ b/client/components/share/Window.vue
@@ -22,6 +22,8 @@ export default @Component({
     props: {
         height: { type: String, default: '100%' },
         width: { type: String, default: '100%' },
+        maxWidth: { type: String, default: '' },
+        topShift: { type: Number, default: 0 },
     }
 })
 class Window extends Vue {
@@ -29,9 +31,11 @@ class Window extends Vue {
         this.$nextTick(() => {
             this.$refs.windowBox.style.height = this.height;
             this.$refs.windowBox.style.width = this.width;
+            if (this.maxWidth)
+                this.$refs.windowBox.style.maxWidth = this.maxWidth;
 
             const left = (this.$refs.main.offsetWidth - this.$refs.windowBox.offsetWidth)/2;
-            const top = (this.$refs.main.offsetHeight - this.$refs.windowBox.offsetHeight)/2;
+            const top = (this.$refs.main.offsetHeight - this.$refs.windowBox.offsetHeight)/2 + this.topShift;
             this.$refs.windowBox.style.left = (left > 0 ? left : 0) + 'px';
             this.$refs.windowBox.style.top = (top > 0 ? top : 0) + 'px';
         });