add Gallery page

src/pages/Gallery.vue

@@ -1,12 +1,148 @@
 <template>
-  <component-debug :component="this" />
+  <div class="gallery">
+    <b-button v-b-toggle.gallery-map variant="creation" class="btn-side left">
+      {{ $t('map') }}
+    </b-button>
+
+    <side-view id="gallery-map">
+      MAP
+    </side-view>
+
+    <gallery-view
+      v-if="creation"
+      :node="creation" :key="creation ? creation.id : 0"
+      @open-creation="openCreation"
+      @view-origin="openLibrary"
+    />
+
+    <b-button v-b-toggle.gallery-index variant="creation" class="btn-side right">
+      {{ $t('index') }}
+    </b-button>
+
+    <side-view id="gallery-index" right>
+      <template #default="{ hide }">
+        <ul>
+          <li v-for="crea in creations" :key="crea.id">
+            <node-view-title
+              :node="crea"
+              tag="h4" link no-date
+              @open-node="openCreation(crea.id, hide)"
+            />
+          </li>
+        </ul>
+      </template>
+    </side-view>
+
+    <b-overlay
+      :show="!creation"
+      spinner-variant="creation"
+      no-wrap
+    />
+  </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
+import { getRelation } from '@/store/utils'
+import { SideView } from '@/components/layouts'
+import { NodeViewTitle } from '@/components/nodes'
+import { GalleryView } from '@/pages/gallery'
+
+
 export default {
-  name: 'Gallery'
+  name: 'Gallery',
+
+  components: {
+    SideView,
+    GalleryView,
+    NodeViewTitle
+  },
+
+  computed: {
+    ...mapGetters(['creations', 'creation'])
+  },
+
+  methods: {
+    openCreation (id, hideSideView) {
+      this.$store.dispatch('OPEN_CREATION', id)
+      if (hideSideView) hideSideView()
+    },
+
+    openLibrary () {
+      this.$store.dispatch('OPEN_NODE', getRelation(this.creation))
+    }
+  },
+
+  created () {
+    this.$store.dispatch('INIT_GALLERY')
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.gallery {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @media (orientation: landscape) {
+    flex-direction: row;
+  }
+
+  .btn-side {
+    position: absolute;
+    border-radius: 0 !important;
+    align-self: center;
+    min-height: 35px;
+    min-width: 65px;
+    text-align: center;
+    border: $line;
+    font-weight: $font-weight-bold;
+    line-height: 0;
+
+    @include media-breakpoint-up($size-bp) {
+      min-height: 50px;
+      min-width: 80px;
+    }
+
+    &.left {
+      border-top: 0;
+
+      @media (orientation: portrait) {
+        top: 0;
+      }
+
+      @media (orientation: landscape) {
+        transform: rotate(-90deg) translate(0, -15px);
+        margin-right: -30px;
+      }
+    }
+
+    &.right {
+      @media (orientation: portrait) {
+        bottom: 0;
+        border-bottom: 0;
+      }
+
+      @media (orientation: landscape) {
+        border-top: 0;
+        transform: rotate(90deg) translate(0, -15px);
+        margin-left: -30px;
+        right: 0;
+      }
+    }
+  }
+}
+
+#gallery-index {
+  ul {
+    padding: 0;
+    list-style: none;
+    font-family: $font-family-text;
+  }
+}
 </style>