add Bpopover default props & add text_rebond body and tags

src/components/layouts/NodePreviewZone.vue

@@ -8,8 +8,7 @@
       v-for="node in nodes" :key="'popover-' + node.id"
       custom-class="popover-node-preview"
       :target="'preview-node-' + node.id" container="preview-zone"
-      placement="auto"
+      placement="auto" triggers="manual"
-      triggers="manual" :boundary-padding="0"
     >
       <node-view
         :node="node"

src/components/nodes/NodeView.vue

@@ -3,7 +3,7 @@
     class="node-view"
     :class="['node-view-' + mode, 'node-view-' + type, 'node-view-' + nodeVariant, { 'preview': preview }]"
   >
-    <div v-if="!loading" class="node-view-wrapper" :id="'node-' + node.id">
+    <div v-if="!loading" class="node-view-wrapper" :id="`node-${mode}-${node.id}`">
       <component
         :is="'node-view-header-' + nodeType"
         v-bind="{ node, mode }"

src/components/nodes/NodeViewBody.vue

@@ -9,9 +9,9 @@
       <b-popover
         v-for="note in notes" :key="note.number"
         custom-class="footnote"
-        :target="'note-' + note.number" :container="'node-' + nodeId"
+        :target="'note-' + note.number" :container="`node-${mode}-${nodeId}`"
         placement="top" :fallback-placement="['bottom', 'right', 'left']"
-        :triggers="['focus']" :boundary-padding="0"
+        :triggers="['focus']"
       >
         <div class="footnote-content" v-html="note.content" />
 
@@ -91,6 +91,7 @@ export default {
 
   mounted () {
     if (this.mode === 'view' && this.notes) this.addFootnotes()
+    this.$el.querySelectorAll('img, video, audio').forEach(elem => elem.parentElement.classList.add('media-container'))
   }
 }
 </script>

src/components/nodes/NodeViewFooter.vue

@@ -18,9 +18,9 @@
         </b-button>
 
         <b-popover
-          :target="'siblings-' + node.id" triggers="click" placement="top"
+          :target="'siblings-' + node.id"
+          triggers="focus" placement="top" boundary="viewport"
           custom-class="popover-siblings"
-          boundary="viewport"
         >
           <ul>
             <li v-for="sibling in node.siblings" :key="sibling.id">
@@ -29,6 +29,17 @@
                 link edition block
                 @open-node="onOpenSibling(sibling.id, 'siblings-' + node.id)"
               />
+              <node-view-body
+                v-bind="{ content: sibling.content, nodeId: sibling.id, type: sibling.type || 'ref', mode: 'card' }"
+              />
+              <div class="tags mb-n2 mt-2" v-if="sibling.tags">
+                <b-badge
+                  v-for="tag in sibling.tags" :key="tag.id"
+                  variant="dark" pill class="mr-2 mb-2"
+                >
+                  {{ tag.name }}
+                </b-badge>
+              </div>
             </li>
           </ul>
         </b-popover>
@@ -46,14 +57,15 @@
 <script>
 import { toCommaList } from '@/helpers/common'
 import { getRelation } from '@/store/utils'
-import { NodeViewTitle } from '@/components/nodes'
+import { NodeViewTitle, NodeViewBody } from '@/components/nodes'
 
 
 export default {
   name: 'NodeViewFooter',
 
   components: {
-    NodeViewTitle
+    NodeViewTitle,
+    NodeViewBody
   },
 
   props: {
@@ -108,8 +120,11 @@ export default {
 .popover-siblings {
   background-color: $white;
   border: $line;
+  max-width: 350px;
 
   .popover-body {
+    max-height: 70vh;
+    overflow: auto;
     color: $black;
 
     ul {
@@ -117,14 +132,35 @@ export default {
       padding: 0;
       margin: 0;
 
-      li:not(:last-of-type) {
+      li {
-        margin-bottom: 1rem;
+        margin-bottom: 2rem;
+
+        &:last-of-type {
+          margin-bottom: 18px;
+        }
       }
 
       h6 {
         margin: 0;
       }
     }
+
+    .edition {
+      font-size: .7rem;
+    }
+
+    .node-view-body {
+      font-size: 1rem;
+      padding: 0;
+
+      .media-container {
+        display: none;
+      }
+    }
+
+    .badge {
+      font-size: 0.875rem;
+    }
   }
 }
 </style>

src/main.js

@@ -10,7 +10,8 @@ import store from './store'
 
 Vue.use(BootstrapVue, {
   BButton: { pill: true },
-  BOverlay: { blur: null, spinnerType: 'grow', opacity: 0 }
+  BOverlay: { blur: null, spinnerType: 'grow', opacity: 0 },
+  BPopover: { boundaryPadding: 0, zIndex: 0 }
 })
 Vue.use(Meta)
 Vue.use(Vue2TouchEvents)