aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
authorZero~Informatique2021-07-03 05:06:44 +0200
committerpacien2021-07-04 16:31:41 +0200
commitcddf5d5c42795388dbd9058268160f1e867d64f5 (patch)
tree898c330f8592513b4b1e8fea543a1608a79fb971 /viewer/src/views
parent34fc1501f74f29d29737164e47977b7412c84ceb (diff)
downloadldgallery-cddf5d5c42795388dbd9058268160f1e867d64f5.tar.gz
viewer: use CSS module (MainLayout)
Extracted from 0f4a1d1 (GH PR #304).
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/MainLayout.vue33
1 files changed, 19 insertions, 14 deletions
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index eee813f..c54f183 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -18,11 +18,17 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div :class="{ fullscreen: $uiStore.fullscreen, fullwidth: $uiStore.fullWidth }"> 21 <div :class="{ [$style.fullscreen]: $uiStore.fullscreen, [$style.fullwidth]: $uiStore.fullWidth }">
22 <ld-title :gallery-title="$galleryStore.galleryTitle" :current-item="$galleryStore.currentItem" /> 22 <ld-title :gallery-title="$galleryStore.galleryTitle" :current-item="$galleryStore.currentItem" />
23 <panel-top v-if="isReady" class="layout layout-top" /> 23 <PanelTop v-if="isReady" :class="[$style.layout, $style.layoutTop]" />
24 <panel-left v-if="isReady" class="layout layout-left" /> 24 <PanelLeft v-if="isReady" :class="[$style.layout, $style.layoutLeft]" />
25 <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" tabindex="01" /> 25 <router-view
26 v-if="!isLoading"
27 ref="content"
28 :class="[$style.layout, $style.layoutContent]"
29 class="scrollbar"
30 tabindex="01"
31 />
26 <b-loading :active="isLoading" is-full-page /> 32 <b-loading :active="isLoading" is-full-page />
27 <ld-key-press :keycode="27" @action="$uiStore.toggleFullscreen(false)" /> 33 <ld-key-press :keycode="27" @action="$uiStore.toggleFullscreen(false)" />
28 </div> 34 </div>
@@ -112,11 +118,11 @@ export default class MainLayout extends Vue {
112} 118}
113</script> 119</script>
114 120
115<style lang="scss"> 121<style lang="scss" module>
116@import "~@/assets/scss/theme.scss"; 122@import "~@/assets/scss/theme.scss";
117 123
118body, 124:global(body),
119html { 125:global(html) {
120 height: 100%; 126 height: 100%;
121 overflow: hidden; 127 overflow: hidden;
122 touch-action: none; 128 touch-action: none;
@@ -131,16 +137,16 @@ html {
131 bottom: 0; 137 bottom: 0;
132 left: 0; 138 left: 0;
133 right: 0; 139 right: 0;
134 &.layout-top { 140 &.layoutTop {
135 height: $layout-top; 141 height: $layout-top;
136 z-index: 1; 142 z-index: 1;
137 } 143 }
138 &.layout-left { 144 &.layoutLeft {
139 top: $layout-top; 145 top: $layout-top;
140 width: $layout-left; 146 width: $layout-left;
141 z-index: 2; 147 z-index: 2;
142 } 148 }
143 &.layout-content { 149 &.layoutContent {
144 top: var(--layout-top); 150 top: var(--layout-top);
145 left: var(--layout-left); 151 left: var(--layout-left);
146 z-index: 3; 152 z-index: 3;
@@ -164,17 +170,16 @@ html {
164} 170}
165 171
166.layout { 172.layout {
167 &.layout-top { 173 &.layoutTop {
168 background-color: $panel-top-bgcolor; 174 background-color: $panel-top-bgcolor;
169 color: $panel-top-txtcolor; 175 color: $panel-top-txtcolor;
170 } 176 }
171 &.layout-left { 177 &.layoutLeft {
172 background-color: $panel-left-bgcolor; 178 background-color: $panel-left-bgcolor;
173 color: $panel-left-txtcolor; 179 color: $panel-left-txtcolor;
174 } 180 }
175 &.layout-content { 181 &.layoutContent {
176 background-color: $content-bgcolor; 182 background-color: $content-bgcolor;
177 } 183 }
178} 184}
179// =====
180</style> 185</style>