add showOrigin prop to NodeView & children

src/components/nodes/NodeView.vue

@@ -6,14 +6,14 @@
     <div v-if="!loading" class="node-view-wrapper" :id="`node-${mode}-${node.id}`">
       <component
         :is="'node-view-header-' + nodeType"
-        v-bind="{ node, mode }"
+        v-bind="{ node, mode, showOrigin }"
         class="node-view-header"
       />
 
       <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, preview }"
+        v-bind="{ node, mode, type: nodeType, preview, showOrigin }"
         class="node-view-footer"
       />
     </div>
@@ -58,7 +58,8 @@ export default {
     variant: { type: String, default: 'dark' },
     type: { type: String, default: 'ref' },
     mode: { type: String, default: 'view' },
-    preview: { type: Boolean, default: false }
+    preview: { type: Boolean, default: false },
+    showOrigin: { type: Boolean, default: false }
   },
 
   computed: {

src/components/nodes/NodeViewBody.vue

@@ -167,7 +167,7 @@ export default {
 }
 
 .footnote {
-  background-color: $black;
+  background-color: $black !important;
   color: $white;
   font-size: 1.25rem;
 

src/components/nodes/NodeViewFooter.vue

@@ -2,7 +2,7 @@
   <div
     class="node-view-footer" :class="'node-view-footer-' + mode"
   >
-    <div class="d-flex w-100">
+    <div class="node-view-footer-wrapper d-flex w-100">
       <div class="tags mb-n2">
         <b-badge
           v-for="tag in node.tags" :key="tag.id"
@@ -44,12 +44,18 @@
           </ul>
         </b-popover>
       </div>
-    </div>
 
-    <div v-if="mode === 'card' && preview" class="mt-2">
-      <b-button @click="onOpenSelf()" variant="depart" class="btn-read">
-        {{ $t('text.read') }}
-      </b-button>
+      <div v-if="mode === 'card' && preview" class="mt-2">
+        <b-button @click="onOpenSelf()" variant="depart" class="btn-read">
+          {{ $t('text.read') }}
+        </b-button>
+      </div>
+
+      <div v-if="mode === 'view' && showOrigin" class="mt-2">
+        <b-button @click="onOpenSelf()" variant="depart" class="btn-read">
+          {{ $t('text.read-origin') }}
+        </b-button>
+      </div>
     </div>
   </div>
 </template>
@@ -72,7 +78,8 @@ export default {
     node: { type: Object, required: true },
     type: { type: String, required: true },
     mode: { type: String, required: true },
-    preview: { type: Boolean, required: true }
+    preview: { type: Boolean, required: true },
+    showOrigin: { type: Boolean, required: true }
   },
 
   computed: {

src/components/nodes/NodeViewHeaderProd.vue

@@ -2,13 +2,13 @@
   <div
     class="node-view-header-prod" :class="'node-view-header-' + mode"
   >
-    <div class="d-flex w-100">
+    <div class="node-view-header-wrapper d-flex w-100">
       <h4 class="mr-auto">
         <div class="node-view-header-type">
-          {{ $t('variants.' + node.variant) }} {{ mode === 'card' && node.parents ? $t('from') : '' }}
+          {{ $t('variants.' + node.variant) }} {{ withOrigin ? $t('from') : '' }}
         </div>
 
-        <div v-if="mode === 'card' && node.parents && node.parents.length" class="node-view-header-parent">
+        <div v-if="withOrigin" class="node-view-header-parent">
           <node-view-title :node="node.parents[0]" edition tag="div" />
         </div>
       </h4>
@@ -32,13 +32,18 @@ export default {
 
   props: {
     node: { type: Object, required: true },
-    mode: { type: String, required: true }
+    mode: { type: String, required: true },
+    showOrigin: { type: Boolean, required: true }
   },
 
   computed: {
     parent () {
       if (!this.node || !this.node.parents) return
       return this.node.parents.find(parent => parent.variant === 'depart')
+    },
+
+    withOrigin () {
+      return (this.showOrigin || this.mode === 'card') && this.node.parents && this.node.parents.length
     }
   },
 

src/components/nodes/NodeViewHeaderRef.vue

@@ -2,7 +2,7 @@
   <div
     class="node-view-header-ref" :class="'node-view-header-' + mode"
   >
-    <div class="w-100">
+    <div class="node-view-header-wrapper w-100">
       <div class="nav-container" :style="`--offset: ${offset}px;`">
         <node-view-child-list
           v-if="mode === 'view' && node.children && node.children.length"