viewer:

Some renaming for better clarity
Implemented a basic display of filenames with basic navigation

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 @@
+<template>
+  <div :class="{fullscreen: $uiStore.fullscreen}">
+    <div class="layout layout-top">header</div>
+    <div class="layout layout-left">panel</div>
+    <router-view class="layout layout-content" />
+    <ld-button-fullscreen />
+    <b-loading :active="isLoading" is-full-page />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class MainLayout extends Vue {
+  isLoading: boolean = false;
+
+  mounted() {
+    this.fetchGalleryItems();
+  }
+
+  fetchGalleryItems() {
+    this.isLoading = true;
+    this.$galleryStore
+      .fetchGalleryItems("/gallery/index.json")
+      .finally(() => (this.isLoading = false))
+      .catch(this.displayError);
+  }
+
+  displayError(reason: any) {
+    this.$buefy.snackbar.open({
+      message: `Error ${reason}`,
+      actionText: "Retry",
+      position: "is-top",
+      type: "is-danger",
+      indefinite: true,
+      onAction: this.fetchGalleryItems,
+    });
+  }
+}
+</script>
+
+<style lang="scss">
+$layout-top: 30px;
+$layout-left: 250px;
+
+body,
+html {
+  height: 100%;
+  overflow: hidden;
+  --layout-top: #{$layout-top};
+  --layout-left: #{$layout-left};
+}
+.layout {
+  position: fixed;
+  transition: all 0.1s linear;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  &.layout-top {
+    height: $layout-top;
+    z-index: 1;
+  }
+  &.layout-left {
+    top: $layout-top;
+    width: $layout-left;
+    z-index: 2;
+  }
+  &.layout-content {
+    top: var(--layout-top);
+    left: var(--layout-left);
+    z-index: 3;
+  }
+}
+.fullscreen {
+  --layout-left: 0px;
+  --layout-top: 0px;
+  .layout {
+    &.layout-left {
+      transform: translate(-$layout-left, 0);
+    }
+  }
+}
+
+// temp colors
+.layout {
+  &.layout-top {
+    background-color: darkslategray;
+    color: white;
+  }
+  &.layout-left {
+    background-color: darkblue;
+    color: white;
+  }
+  &.layout-content {
+    background-color: lightcyan;
+  }
+}
+</style>
\ No newline at end of file