aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/MainLayout.vue
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/views/MainLayout.vue')
-rw-r--r--viewer/src/views/MainLayout.vue100
1 files changed, 100 insertions, 0 deletions
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
new file mode 100644
index 0000000..9f3a17b
--- /dev/null
+++ b/viewer/src/views/MainLayout.vue
@@ -0,0 +1,100 @@
1<template>
2 <div :class="{fullscreen: $uiStore.fullscreen}">
3 <div class="layout layout-top">header</div>
4 <div class="layout layout-left">panel</div>
5 <router-view class="layout layout-content" />
6 <ld-button-fullscreen />
7 <b-loading :active="isLoading" is-full-page />
8 </div>
9</template>
10
11<script lang="ts">
12import { Component, Vue } from "vue-property-decorator";
13
14@Component
15export default class MainLayout extends Vue {
16 isLoading: boolean = false;
17
18 mounted() {
19 this.fetchGalleryItems();
20 }
21
22 fetchGalleryItems() {
23 this.isLoading = true;
24 this.$galleryStore
25 .fetchGalleryItems("/gallery/index.json")
26 .finally(() => (this.isLoading = false))
27 .catch(this.displayError);
28 }
29
30 displayError(reason: any) {
31 this.$buefy.snackbar.open({
32 message: `Error ${reason}`,
33 actionText: "Retry",
34 position: "is-top",
35 type: "is-danger",
36 indefinite: true,
37 onAction: this.fetchGalleryItems,
38 });
39 }
40}
41</script>
42
43<style lang="scss">
44$layout-top: 30px;
45$layout-left: 250px;
46
47body,
48html {
49 height: 100%;
50 overflow: hidden;
51 --layout-top: #{$layout-top};
52 --layout-left: #{$layout-left};
53}
54.layout {
55 position: fixed;
56 transition: all 0.1s linear;
57 top: 0;
58 bottom: 0;
59 left: 0;
60 right: 0;
61 &.layout-top {
62 height: $layout-top;
63 z-index: 1;
64 }
65 &.layout-left {
66 top: $layout-top;
67 width: $layout-left;
68 z-index: 2;
69 }
70 &.layout-content {
71 top: var(--layout-top);
72 left: var(--layout-left);
73 z-index: 3;
74 }
75}
76.fullscreen {
77 --layout-left: 0px;
78 --layout-top: 0px;
79 .layout {
80 &.layout-left {
81 transform: translate(-$layout-left, 0);
82 }
83 }
84}
85
86// temp colors
87.layout {
88 &.layout-top {
89 background-color: darkslategray;
90 color: white;
91 }
92 &.layout-left {
93 background-color: darkblue;
94 color: white;
95 }
96 &.layout-content {
97 background-color: lightcyan;
98 }
99}
100</style> \ No newline at end of file