From 7ae68f079ddfb74c9a1b17c4f30dfe4c258d4a9f Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 20 Dec 2019 17:47:04 +0100
Subject: Viewer project foundations

---
 viewer/src/views/LdGallery.vue | 82 ++++++++++++++++++++++++++++++++++++++++++
 viewer/src/views/Root.vue      | 18 ++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 viewer/src/views/LdGallery.vue
 create mode 100644 viewer/src/views/Root.vue

(limited to 'viewer/src/views')

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 @@
+<template>
+  <div :class="{fullscreen}">
+    <div class="layout top">header</div>
+    <div class="layout left">panel</div>
+    <router-view class="layout content" />
+    <fa-icon
+      icon="expand-arrows-alt"
+      class="layout button-fullscreen"
+      @click="fullscreen=!fullscreen"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class LdGallery extends Vue {
+  fullscreen: boolean = false;
+}
+</script>
+
+<style lang="scss">
+body,
+html {
+  height: 100%;
+  overflow: hidden;
+  --layout-left: 250px;
+  --layout-top: 30px;
+}
+.layout {
+  position: fixed;
+  transition: all 0.1s linear;
+  &.top {
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--layout-top);
+  }
+  &.left {
+    top: var(--layout-top);
+    bottom: 0;
+    left: 0;
+    width: var(--layout-left);
+  }
+  &.content {
+    top: var(--layout-top);
+    left: var(--layout-left);
+    right: 0;
+    bottom: 0;
+  }
+  &.button-fullscreen {
+    top: 0;
+    right: 0;
+    margin: 3px 10px;
+    opacity: 50%;
+    font-size: 1.5em;
+    color: white;
+    mix-blend-mode: difference;
+    cursor: pointer;
+  }
+}
+.fullscreen {
+  --layout-left: 0px;
+  --layout-top: 0px;
+}
+
+// temp colors
+.layout {
+  &.top {
+    background-color: darkslategray;
+    color: white;
+  }
+  &.left {
+    background-color: darkblue;
+    color: white;
+  }
+  &.content {
+    background-color: lightcyan;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/viewer/src/views/Root.vue b/viewer/src/views/Root.vue
new file mode 100644
index 0000000..384dcbe
--- /dev/null
+++ b/viewer/src/views/Root.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>Hello World!</div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class Root extends Vue {}
+</script>
+
+<style scoped lang="scss">
+div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
-- 
cgit v1.2.3