Переход на quasar

client/components/App.vue

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

client/components/Reader/HelpPage/HelpPage.vue

@@ -4,7 +4,7 @@
             Справка
         </template>
 
-        <div class="col" style="min-width: 600px; display: grid">
+        <div class="col column" style="min-width: 600px">
             <q-btn-toggle
                 v-model="selectedTab"
                 toggle-color="primary"
@@ -17,29 +17,13 @@
                     {label: 'Помочь проекту', value: 'donate'}
                 ]"
             />
-            <q-separator />
+            <div class="separator"></div>
 
-            <q-tab-panels v-model="selectedTab">
-                <q-tab-panel name="common">
-                    <CommonHelpPage></CommonHelpPage>
-                </q-tab-panel>
-
-                <q-tab-panel name="hotkeys">
-                    <HotkeysHelpPage></HotkeysHelpPage>
-                </q-tab-panel>
-
-                <q-tab-panel name="mouse">
-                    <MouseHelpPage></MouseHelpPage>
-                </q-tab-panel>
-
-                <q-tab-panel name="releases">
-                    <VersionHistoryPage></VersionHistoryPage>
-                </q-tab-panel>
-
-                <q-tab-panel name="donate">
-                    <DonateHelpPage></DonateHelpPage>
-                </q-tab-panel>
-            </q-tab-panels>
+            <CommonHelpPage v-if="selectedTab == 'common'" class="col"></CommonHelpPage>
+            <HotkeysHelpPage v-if="selectedTab == 'hotkeys'" class="col"></HotkeysHelpPage>
+            <MouseHelpPage v-if="selectedTab == 'mouse'" class="col"></MouseHelpPage>
+            <VersionHistoryPage v-if="selectedTab == 'releases'" class="col"></VersionHistoryPage>
+            <DonateHelpPage v-if="selectedTab == 'donate'" class="col"></DonateHelpPage>
         </div>
     </Window>
 </template>
@@ -92,4 +76,8 @@ class HelpPage extends Vue {
 </script>
 
 <style scoped>
+.separator {
+    height: 1px;
+    background-color: #E0E0E0;
+}
 </style>

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

@@ -62,6 +62,7 @@ class VersionHistoryPage extends Vue {
     overflow-y: auto;
     font-size: 120%;
     line-height: 130%;
+    position: relative;
 }
 
 h4 {

client/components/share/Window.vue

@@ -120,6 +120,15 @@ class Window extends Vue {
     z-index: 50;
 }
 
+.xyfit {
+    height: 100%;
+    width: 100%;
+}
+
+.flexfit {
+    flex: 1;
+}
+
 .window {
     margin: 10px;
     background-color: #ffffff;

client/quasar.js

@@ -19,7 +19,7 @@ import {QIcon} from 'quasar/src/components/icon';
 import {QSlider} from 'quasar/src/components/slider';
 //import {QTabs} from 'quasar/src/components/tabs';
 //import {QTab} from 'quasar/src/components/tab';
-import {QTabPanels, QTabPanel} from 'quasar/src/components/tab-panels';
+//import {QTabPanels, QTabPanel} from 'quasar/src/components/tab-panels';
 import {QSeparator} from 'quasar/src/components/separator';
 import {QList, QItem, QItemSection, QItemLabel} from 'quasar/src/components/item';
 import {QTooltip} from 'quasar/src/components/tooltip';
@@ -34,8 +34,7 @@ const components = {
     QSlider,
     //QTabs,
     //QTab
-    QTabPanels,
-    QTabPanel,
+    //QTabPanels, QTabPanel,
     QSeparator,
     QList, QItem, QItemSection, QItemLabel,
     QTooltip,