update GameView with NodeView as a SideView

src/api/fragments/NodeInitial.gql

@@ -89,7 +89,7 @@ fragment NodeInitial on MapItemInterface {
       }
     }
 
-    siblings: rebonds {
+    creation_siblings: rebonds {
       id
     }
 

src/pages/gallery/GalleryView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="gallery-view wh-100">
-    <div v-if="!loading" class="gallery-view-wrapper wh-100">
+    <div class="gallery-view-wrapper wh-100">
       <figure class="gallery-view-figure">
         <div class="h-100" />
 
@@ -14,23 +14,19 @@
               {{ $t('text.open-origin') }}
             </b-button>
 
-            <b-button variant="creation" class="btn-shadow btn-artwork" @click="$emit('view-text')">
+            <b-button variant="creation" class="btn-shadow btn-artwork" v-b-toggle.gallery-text>
               {{ $t('text.open-artwork') }}
             </b-button>
           </div>
         </div>
 
         <figcaption class="gallery-view-caption">
-          <p class="mb-0 mt-4">
+          <node-view-title :node="node" tag="p" class="mb-0 mt-4" />
-            <strong>{{ toCommaList(node.authors) }}</strong>,
-            <em v-html="' ' + trim(node.title)" />,
-            {{ node.date.start }}
-          </p>
         </figcaption>
       </figure>
 
       <div
-        v-for="(sibling, i) in node.siblings" :key="sibling.id"
+        v-for="(sibling, i) in node.creation_siblings" :key="sibling.id"
         class="gallery-view-btn-wrapper"
         :class="buttonClasses[i]"
       >
@@ -42,25 +38,32 @@
           />
         </button-image>
       </div>
-    </div>
 
-    <b-overlay
+      <side-view id="gallery-text" right no-cross>
-      :show="loading"
+        <template #default="{ hide }">
-      spinner-variant="creation"
+          <node-view
-      no-wrap
+            :node="node"
-    />
+            @close-node="hide"
+            force-type="ref" show-origin
+          />
+        </template>
+      </side-view>
+    </div>
   </div>
 </template>
 
 <script>
-import { NodeViewTitle } from '@/components/nodes'
+import { NodeViewTitle, NodeView } from '@/components/nodes'
+import { SideView } from '@/components/layouts'
 import { trim, toCommaList, shuffle } from '@/helpers/common'
 
 export default {
   name: 'GalleryView',
 
   components: {
-    NodeViewTitle
+    NodeViewTitle,
+    NodeView,
+    SideView
   },
 
   props: {
@@ -79,12 +82,6 @@ export default {
     }
   },
 
-  computed: {
-    loading () {
-      return this.node === undefined || this.node.dataLevel < 1
-    }
-  },
-
   methods: {
     trim,
     toCommaList
@@ -188,4 +185,18 @@ export default {
     }
   }
 }
+
+::v-deep #gallery-text {
+  @include media-breakpoint-up($size-bp) {
+    width: 100%;
+  }
+
+  .node-view {
+    height: 100%;
+
+    &-wrapper {
+      height: 100%;
+    }
+  }
+}
 </style>

src/store/utils.js

@@ -4,6 +4,7 @@ import { hierarchy } from 'd3-hierarchy'
 export const RELATIONS = [
   'parents',
   'siblings',
+  'creation_siblings',
   'children'
 ]