aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/LdGallery.vue
diff options
context:
space:
mode:
authorZero~Informatique2019-12-20 17:47:04 +0100
committerZero~Informatique2019-12-20 23:22:56 +0100
commit7ae68f079ddfb74c9a1b17c4f30dfe4c258d4a9f (patch)
treecb5e30534d9e564c311d626bba7e8d9ec0ea0f60 /viewer/src/views/LdGallery.vue
parentc9264b0a0a7e1cb92ef7d9a391cee2c94376cff3 (diff)
downloadldgallery-7ae68f079ddfb74c9a1b17c4f30dfe4c258d4a9f.tar.gz
Viewer project foundations
Diffstat (limited to 'viewer/src/views/LdGallery.vue')
-rw-r--r--viewer/src/views/LdGallery.vue82
1 files changed, 82 insertions, 0 deletions
diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/LdGallery.vue
new file mode 100644
index 0000000..a77dc24
--- /dev/null
+++ b/viewer/src/views/LdGallery.vue
@@ -0,0 +1,82 @@
1<template>
2 <div :class="{fullscreen}">
3 <div class="layout top">header</div>
4 <div class="layout left">panel</div>
5 <router-view class="layout content" />
6 <fa-icon
7 icon="expand-arrows-alt"
8 class="layout button-fullscreen"
9 @click="fullscreen=!fullscreen"
10 />
11 </div>
12</template>
13
14<script lang="ts">
15import { Component, Vue } from "vue-property-decorator";
16
17@Component
18export default class LdGallery extends Vue {
19 fullscreen: boolean = false;
20}
21</script>
22
23<style lang="scss">
24body,
25html {
26 height: 100%;
27 overflow: hidden;
28 --layout-left: 250px;
29 --layout-top: 30px;
30}
31.layout {
32 position: fixed;
33 transition: all 0.1s linear;
34 &.top {
35 top: 0;
36 left: 0;
37 right: 0;
38 height: var(--layout-top);
39 }
40 &.left {
41 top: var(--layout-top);
42 bottom: 0;
43 left: 0;
44 width: var(--layout-left);
45 }
46 &.content {
47 top: var(--layout-top);
48 left: var(--layout-left);
49 right: 0;
50 bottom: 0;
51 }
52 &.button-fullscreen {
53 top: 0;
54 right: 0;
55 margin: 3px 10px;
56 opacity: 50%;
57 font-size: 1.5em;
58 color: white;
59 mix-blend-mode: difference;
60 cursor: pointer;
61 }
62}
63.fullscreen {
64 --layout-left: 0px;
65 --layout-top: 0px;
66}
67
68// temp colors
69.layout {
70 &.top {
71 background-color: darkslategray;
72 color: white;
73 }
74 &.left {
75 background-color: darkblue;
76 color: white;
77 }
78 &.content {
79 background-color: lightcyan;
80 }
81}
82</style> \ No newline at end of file