From 089ac70cd3025805430e534ee67fbeabae8d4fe2 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Thu, 30 Jan 2020 18:53:01 +0700
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7?=
 =?UTF-8?q?=D1=83=D0=B5=D0=BC=20css-=D0=BA=D0=BB=D0=B0=D1=81=D1=81=D1=8B?=
 =?UTF-8?q?=20quasar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Reader/LoaderPage/LoaderPage.vue          | 58 ++++---------------
 1 file changed, 10 insertions(+), 48 deletions(-)

diff --git a/client/components/Reader/LoaderPage/LoaderPage.vue b/client/components/Reader/LoaderPage/LoaderPage.vue
index 69b127e6..bb32e71b 100644
--- a/client/components/Reader/LoaderPage/LoaderPage.vue
+++ b/client/components/Reader/LoaderPage/LoaderPage.vue
@@ -1,31 +1,30 @@
 <template>
-    <div ref="main" class="main">
+    <div ref="main" class="fit column no-wrap" style="min-height: 480px">
         <GithubCorner url="https://github.com/bookpauk/liberama" cornerColor="#1B695F" gitColor="EBE2C9"></GithubCorner>
-        <div class="part top">
-            <span class="greeting bold-font">{{ title }}</span>
-            <div class="space"></div>
+        <div class="col column justify-center items-center no-wrap" style="min-height: 150px">
+            <span class="greeting"><b>{{ title }}</b></span>
+            <div class="q-my-md"></div>
             <span class="greeting">Добро пожаловать!</span>
             <span class="greeting">Поддерживаются форматы: <b>fb2, html, txt</b> и сжатие: <b>zip, bz2, gz</b></span>
             <span v-if="isExternalConverter" class="greeting">...а также форматы: <b>rtf, doc, docx, pdf, epub, mobi</b></span>
         </div>
 
-        <div class="part center">
+        <div class="col column justify-start items-center" style="min-height: 250px">
             <el-input ref="input" placeholder="URL книги" v-model="bookUrl">
                 <el-button slot="append" icon="el-icon-check" @click="submitUrl"></el-button>
             </el-input>
-            <div class="space"></div>
+            <div class="q-my-sm"></div>
             <input type="file" id="file" ref="file" @change="loadFile" style='display: none;'/>
 
             <el-button size="mini" @click="loadFileClick">
                 Загрузить файл с диска
             </el-button>
-            <div class="space"></div>
+            <div class="q-my-sm"></div>
             <el-button size="mini" @click="loadBufferClick">
                 Из буфера обмена
             </el-button>
 
-            <div class="space"></div>
-            <div class="space"></div>
+            <div class="q-my-md"></div>
             <div v-if="mode == 'omnireader'">
                 <div ref="yaShare2" class="ya-share2" 
                     data-services="collections,vkontakte,facebook,odnoklassniki,twitter,telegram"
@@ -34,12 +33,12 @@
                     data-url="https://omnireader.ru">
                 </div>
             </div>
-            <div class="space"></div>
+            <div class="q-my-sm"></div>
             <span v-if="mode == 'omnireader'" class="bottom-span clickable" @click="openComments">Отзывы о читалке</span>
             <span v-if="mode == 'omnireader'" class="bottom-span clickable" @click="openOldVersion">Старая версия</span>
         </div>
 
-        <div class="part bottom">
+        <div class="col column justify-end items-center">
             <span class="bottom-span clickable" @click="openHelp">Справка</span>
             <span class="bottom-span clickable" @click="openDonate">Помочь проекту</span>
 
@@ -188,50 +187,17 @@ class LoaderPage extends Vue {
 //-----------------------------------------------------------------------------
 </script>
 <style scoped>
-.main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 480px;
-}
-
-.part {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
 .greeting {
     font-size: 120%;
     line-height: 160%;
 }
 
-.bold-font {
-    font-weight: bold;
-}
-
 .clickable {
     color: blue;
     text-decoration: underline;
     cursor: pointer;
 }
 
-.top {
-    min-height: 120px;
-}
-
-.center {
-    justify-content: flex-start;
-    padding: 0 10px 0 10px;
-    min-height: 250px;
-}
-
-.bottom {
-    justify-content: flex-end;
-}
-
 .bottom-span {
     font-size: 70%;
     margin-bottom: 10px;
@@ -240,8 +206,4 @@ class LoaderPage extends Vue {
 .el-input {
     max-width: 700px;
 }
-
-.space {
-    height: 20px;
-}
 </style>
\ No newline at end of file