Implemented global components registration

Moved the fullscreen button as a global component (as demonstration)
Improved the layout CSS

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 @@
 <template>
   <div :class="{fullscreen: $uiStore.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="$uiStore.toggleFullscreen()"
-    />
+    <div class="layout layout-top">header</div>
+    <div class="layout layout-left">panel</div>
+    <router-view class="layout layout-content" />
+    <ld-button-fullscreen />
   </div>
 </template>
 
@@ -19,61 +15,59 @@ export default class LdGallery extends Vue {}
 </script>
 
 <style lang="scss">
+$layout-top: 30px;
+$layout-left: 250px;
+
 body,
 html {
   height: 100%;
   overflow: hidden;
-  --layout-left: 250px;
-  --layout-top: 30px;
+  --layout-top: #{$layout-top};
+  --layout-left: #{$layout-left};
 }
 .layout {
   position: fixed;
   transition: all 0.1s linear;
-  &.top {
-    top: 0;
-    left: 0;
-    right: 0;
-    height: var(--layout-top);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  &.layout-top {
+    height: $layout-top;
+    z-index: 1;
   }
-  &.left {
-    top: var(--layout-top);
-    bottom: 0;
-    left: 0;
-    width: var(--layout-left);
+  &.layout-left {
+    top: $layout-top;
+    width: $layout-left;
+    z-index: 2;
   }
-  &.content {
+  &.layout-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;
+    z-index: 3;
   }
 }
 .fullscreen {
   --layout-left: 0px;
   --layout-top: 0px;
+  .layout {
+    &.layout-left {
+      transform: translate(-$layout-left, 0);
+    }
+  }
 }
 
 // temp colors
 .layout {
-  &.top {
+  &.layout-top {
     background-color: darkslategray;
     color: white;
   }
-  &.left {
+  &.layout-left {
     background-color: darkblue;
     color: white;
   }
-  &.content {
+  &.layout-content {
     background-color: lightcyan;
   }
 }