Переход на quasar

This commit is contained in:
Book Pauk
2020-02-02 23:15:59 +07:00
parent 6b077e67db
commit 4b270bce8b
9 changed files with 21 additions and 35 deletions

View File

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

View File

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

View File

@@ -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;
}

View File

@@ -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>

View File

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

View File

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

View File

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

View File

@@ -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"

View File

@@ -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>