add preview mode to NodeView

src/assets/scss/abstracts/_mixins.scss

@@ -101,6 +101,31 @@
 }
 
 
+// List Groups
+
+@mixin list-group-item-variant($state, $osef1, $osef2) {
+  $color: theme-color($state);
+
+  .list-group-item-#{$state} {
+    color: darken($color, 32%);
+    background-color: lighten($color, 3.25%);
+
+    &.list-group-item-action {
+      @include hover-focus() {
+        color: darken($color, 40%);
+        background-color: $color;
+      }
+
+      // &.active {
+      //   color: $white;
+      //   background-color: $color;
+      //   border-color: $color;
+      // }
+    }
+  }
+}
+
+
 @mixin line-clamp($lines, $line-height) {
   display: block;
   display: -webkit-box;

src/assets/scss/abstracts/_variables.scss

@@ -116,7 +116,12 @@ $card-spacer-x: .75rem;
 $card-border-width: 0;
 // $card-border-color: $black;
 
-// INPUT RANGE 
+// List group
+$list-group-border-width: 0;
+$list-group-item-padding-y: 5px;
+$list-group-item-padding-x: 18px;
+
+// INPUT RANGE
 $custom-range-track-height:         .1875rem;
 $custom-range-track-bg:             $black;
 $custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1);

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 {