Переход на quasar
This commit is contained in:
@@ -243,6 +243,15 @@ body, html, #app {
|
||||
font: normal 12pt ReaderDefault;
|
||||
}
|
||||
|
||||
.xyfit {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flexfit {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dborder {
|
||||
border: 2px solid yellow;
|
||||
}
|
||||
|
||||
@@ -70,7 +70,6 @@ class CommonHelpPage extends Vue {
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
font-size: 120%;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -42,7 +42,6 @@ class HotkeysHelpPage extends Vue {
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
font-size: 120%;
|
||||
|
||||
@@ -49,7 +49,6 @@ class MouseHelpPage extends Vue {
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
font-size: 120%;
|
||||
|
||||
@@ -58,7 +58,6 @@ class VersionHistoryPage extends Vue {
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
font-size: 120%;
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user