Переход на quasar

client/components/App.vue

@@ -243,6 +243,15 @@ body, html, #app {
     font: normal 12pt ReaderDefault;
 }
 
+.xyfit {
+    height: 100%;
+    width: 100%;
+}
+
+.flexfit {
+    flex: 1;
+}
+
 .dborder {
     border: 2px solid yellow;
 }

client/components/Reader/HelpPage/CommonHelpPage/CommonHelpPage.vue

@@ -70,7 +70,6 @@ class CommonHelpPage extends Vue {
 
 <style scoped>
 .page {
-    flex: 1;
     padding: 15px;
     overflow-y: auto;
     font-size: 120%;

client/components/Reader/HelpPage/DonateHelpPage/DonateHelpPage.vue

@@ -88,12 +88,10 @@ class DonateHelpPage extends Vue {
 
 <style scoped>
 .page {
-    flex: 1;
     padding: 15px;
     overflow-y: auto;
     font-size: 120%;
     line-height: 130%;
-    display: flex;
 }
 
 .p {
@@ -103,7 +101,6 @@ class DonateHelpPage extends Vue {
 }
 
 .box {
-    flex: 1;
     max-width: 550px;
     overflow-wrap: break-word;
 }

client/components/Reader/HelpPage/HelpPage.vue

@@ -4,7 +4,7 @@
             Справка
         </template>
 
-        <div class="fit" style="min-width: 600px">
+        <div class="col" style="min-width: 600px; display: grid">
             <q-btn-toggle
                 v-model="selectedTab"
                 toggle-color="primary"
@@ -18,7 +18,8 @@
                 ]"
             />
             <q-separator />
-            <q-tab-panels class="fit" v-model="selectedTab">
+
+            <q-tab-panels v-model="selectedTab">
                 <q-tab-panel name="common">
                     <CommonHelpPage></CommonHelpPage>
                 </q-tab-panel>

client/components/Reader/HelpPage/HotkeysHelpPage/HotkeysHelpPage.vue

@@ -42,7 +42,6 @@ class HotkeysHelpPage extends Vue {
 
 <style scoped>
 .page {
-    flex: 1;
     padding: 15px;
     overflow-y: auto;
     font-size: 120%;

client/components/Reader/HelpPage/MouseHelpPage/MouseHelpPage.vue

@@ -49,7 +49,6 @@ class MouseHelpPage extends Vue {
 
 <style scoped>
 .page {
-    flex: 1;
     padding: 15px;
     overflow-y: auto;
     font-size: 120%;

client/components/Reader/HelpPage/VersionHistoryPage/VersionHistoryPage.vue

@@ -58,7 +58,6 @@ class VersionHistoryPage extends Vue {
 
 <style scoped>
 .page {
-    flex: 1;
     padding: 15px;
     overflow-y: auto;
     font-size: 120%;

client/components/Reader/Reader.vue

@@ -59,7 +59,7 @@
             </div>
         </div>
 
-        <div class="col row main">
+        <div class="main col row relative-position">
             <keep-alive>
                 <component ref="page" :is="activePage"
                     @load-book="loadBook"

client/components/share/Window.vue

@@ -1,12 +1,13 @@
 <template>
-    <div ref="main" class="main" @click="close" @mouseup="onMouseUp" @mousemove="onMouseMove">
-        <div ref="windowBox" class="windowBox" @click.stop>
-            <div class="window">
-                <div ref="header" class="header" @mousedown.prevent.stop="onMouseDown"
+    <div ref="main" class="main xyfit absolute" @click="close" @mouseup="onMouseUp" @mousemove="onMouseMove">
+        <div ref="windowBox" class="xyfit absolute flex no-wrap" @click.stop>
+            <div class="window flexfit column no-wrap">
+                <div ref="header" class="header row justify-end" @mousedown.prevent.stop="onMouseDown"
                     @touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchmove.stop="onTouchMove">
-                    <span class="header-text"><slot name="header"></slot></span>
-                    <span class="close-button" @mousedown.stop @click="close"><i class="el-icon-close"></i></span>
+                    <span class="header-text col"><slot name="header"></slot></span>
+                    <span class="close-button row justify-center items-center" @mousedown.stop @click="close"><q-icon name="o_close" size="18px"/></span>
                 </div>
+
                 <slot></slot>
             </div>
         </div>
@@ -116,23 +117,10 @@ class Window extends Vue {
 
 <style scoped>
 .main {
-    position: absolute;
-    width: 100%;
-    height: 100%;
     z-index: 50;
 }
 
-.windowBox {
-    position: absolute;
-    display: flex;
-    height: 100%;
-    width: 100%;
-}
-
 .window {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
     margin: 10px;
     background-color: #ffffff;
     border: 3px double black;
@@ -141,15 +129,12 @@ class Window extends Vue {
 }
 
 .header {
-    display: flex;
-    justify-content: flex-end;
     background: linear-gradient(to bottom right, green, #59B04F);
     align-items: center;
     height: 30px;
 }
 
 .header-text {
-    flex: 1;
     margin-left: 10px;
     margin-right: 10px;
     color: #E8E8E8;
@@ -157,9 +142,6 @@ class Window extends Vue {
 }
 
 .close-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: 30px;
     height: 30px;
     cursor: pointer;
@@ -168,4 +150,5 @@ class Window extends Vue {
 .close-button:hover {
     background-color: #69C05F;
 }
+
 </style>