aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/LdGallery.vue
diff options
context:
space:
mode:
authorZero~Informatique2019-12-21 03:32:20 +0100
committerZero~Informatique2019-12-21 03:32:20 +0100
commit6e7ee4d38fb3630a13d31592f0f6ae9bbe8e1bd6 (patch)
tree88ebce4634d26daa80718ab1526c728f55a983f0 /viewer/src/views/LdGallery.vue
parent62005141132da1e9761598fa3e4b35b4dab38a89 (diff)
downloadldgallery-6e7ee4d38fb3630a13d31592f0f6ae9bbe8e1bd6.tar.gz
Implemented global components registration
Moved the fullscreen button as a global component (as demonstration) Improved the layout CSS
Diffstat (limited to 'viewer/src/views/LdGallery.vue')
-rw-r--r--viewer/src/views/LdGallery.vue66
1 files changed, 30 insertions, 36 deletions
diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/LdGallery.vue
index d22bfa6..ecdfa1b 100644
--- a/viewer/src/views/LdGallery.vue
+++ b/viewer/src/views/LdGallery.vue
@@ -1,13 +1,9 @@
1<template> 1<template>
2 <div :class="{fullscreen: $uiStore.fullscreen}"> 2 <div :class="{fullscreen: $uiStore.fullscreen}">
3 <div class="layout top">header</div> 3 <div class="layout layout-top">header</div>
4 <div class="layout left">panel</div> 4 <div class="layout layout-left">panel</div>
5 <router-view class="layout content" /> 5 <router-view class="layout layout-content" />
6 <fa-icon 6 <ld-button-fullscreen />
7 icon="expand-arrows-alt"
8 class="layout button-fullscreen"
9 @click="$uiStore.toggleFullscreen()"
10 />
11 </div> 7 </div>
12</template> 8</template>
13 9
@@ -19,61 +15,59 @@ export default class LdGallery extends Vue {}
19</script> 15</script>
20 16
21<style lang="scss"> 17<style lang="scss">
18$layout-top: 30px;
19$layout-left: 250px;
20
22body, 21body,
23html { 22html {
24 height: 100%; 23 height: 100%;
25 overflow: hidden; 24 overflow: hidden;
26 --layout-left: 250px; 25 --layout-top: #{$layout-top};
27 --layout-top: 30px; 26 --layout-left: #{$layout-left};
28} 27}
29.layout { 28.layout {
30 position: fixed; 29 position: fixed;
31 transition: all 0.1s linear; 30 transition: all 0.1s linear;
32 &.top { 31 top: 0;
33 top: 0; 32 bottom: 0;
34 left: 0; 33 left: 0;
35 right: 0; 34 right: 0;
36 height: var(--layout-top); 35 &.layout-top {
36 height: $layout-top;
37 z-index: 1;
37 } 38 }
38 &.left { 39 &.layout-left {
39 top: var(--layout-top); 40 top: $layout-top;
40 bottom: 0; 41 width: $layout-left;
41 left: 0; 42 z-index: 2;
42 width: var(--layout-left);
43 } 43 }
44 &.content { 44 &.layout-content {
45 top: var(--layout-top); 45 top: var(--layout-top);
46 left: var(--layout-left); 46 left: var(--layout-left);
47 right: 0; 47 z-index: 3;
48 bottom: 0;
49 }
50 &.button-fullscreen {
51 top: 0;
52 right: 0;
53 margin: 3px 10px;
54 opacity: 50%;
55 font-size: 1.5em;
56 color: white;
57 mix-blend-mode: difference;
58 cursor: pointer;
59 } 48 }
60} 49}
61.fullscreen { 50.fullscreen {
62 --layout-left: 0px; 51 --layout-left: 0px;
63 --layout-top: 0px; 52 --layout-top: 0px;
53 .layout {
54 &.layout-left {
55 transform: translate(-$layout-left, 0);
56 }
57 }
64} 58}
65 59
66// temp colors 60// temp colors
67.layout { 61.layout {
68 &.top { 62 &.layout-top {
69 background-color: darkslategray; 63 background-color: darkslategray;
70 color: white; 64 color: white;
71 } 65 }
72 &.left { 66 &.layout-left {
73 background-color: darkblue; 67 background-color: darkblue;
74 color: white; 68 color: white;
75 } 69 }
76 &.content { 70 &.layout-content {
77 background-color: lightcyan; 71 background-color: lightcyan;
78 } 72 }
79} 73}