add preview mode to NodeView

src/components/nodes/NodeView.vue

@@ -13,23 +13,28 @@
       <node-view-body v-bind="{ content: node.content, nodeId: node.id, notes: node.notes, type: nodeType, mode }" />
 
       <node-view-footer
-        v-bind="{ node, mode, type: nodeType }"
+        v-bind="{ node, mode, type: nodeType, preview }"
         class="node-view-footer"
       />
     </div>
 
+    <node-view-child-list-group
+      v-if="!loading && preview && node.children && node.children.length"
+      :children="node.children"
+    />
+
     <b-overlay
       :show="loading"
       :spinner-variant="nodeVariant === 'depart' ? 'dark' : 'light'"
       no-wrap
     />
 
-    <slot name="bottom" />
   </article>
 </template>
 
 <script>
 import {
+  NodeViewChildListGroup,
   NodeViewHeaderRef,
   NodeViewHeaderProd,
   NodeViewBody,
@@ -41,6 +46,7 @@ export default {
   name: 'NodeView',
 
   components: {
+    NodeViewChildListGroup,
     NodeViewHeaderRef,
     NodeViewHeaderProd,
     NodeViewFooter,
@@ -51,7 +57,8 @@ export default {
     node: { type: Object, default: undefined },
     variant: { type: String, default: 'dark' },
     type: { type: String, default: 'ref' },
-    mode: { type: String, default: 'view' }
+    mode: { type: String, default: 'view' },
+    preview: { type: Boolean, default: false }
   },
 
   computed: {
@@ -89,9 +96,11 @@ export default {
     max-width: $node-card-width;
     width: 100%;
 
-    &-wrapper {
+    .node-view-wrapper {
+      pointer-events: none;
       width: 100%;
       max-height: $node-card-height;
+      height: 100%;
       overflow: hidden;
     }
 

src/components/nodes/NodeViewChildListGroup.vue

@@ -25,6 +25,9 @@ export default {
 
 <style lang="scss" scoped>
 .node-view-child-list-group {
+  position: relative;
+  z-index: 1;
+
   .list-group {
     font-family: $font-family-base;
     font-weight: $font-weight-bold;

src/components/nodes/NodeViewFooter.vue

@@ -33,12 +33,12 @@
           </ul>
         </b-popover>
       </div>
+    </div>
 
-      <div v-if="mode === 'card'">
-          {{ $t('text.read') }}
-        </b-button>
-      </div>
-      <b-button @click="onOpenSelf()" variant="outline-dark">
+    <div v-if="mode === 'card' && preview" class="mt-2">
+      <b-button @click="onOpenSelf()" variant="outline-dark" class="btn-read">
+        {{ $t('text.read') }}
+      </b-button>
     </div>
   </div>
 </template>
@@ -59,7 +59,8 @@ export default {
   props: {
     node: { type: Object, required: true },
     type: { type: String, required: true },
-    mode: { type: String, required: true }
+    mode: { type: String, required: true },
+    preview: { type: Boolean, required: true }
   },
 
   computed: {
@@ -89,6 +90,10 @@ export default {
 .node-view-footer {
   margin-top: auto;
   font-family: $font-family-base;
+
+  .btn-read {
+    pointer-events: auto;
+  }
 }
 
 .popover-siblings {