|
@@ -3,46 +3,48 @@
|
|
|
class="node-view-footer" :class="'node-view-footer-' + mode"
|
|
|
>
|
|
|
<div class="node-view-footer-wrapper w-100">
|
|
|
- <div class="tags mb-n2">
|
|
|
- <b-badge
|
|
|
- v-for="tag in node.tags" :key="tag.id"
|
|
|
- variant="dark" pill class="mr-2 mb-2"
|
|
|
- >
|
|
|
- {{ tag.name }}
|
|
|
- </b-badge>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div v-if="mode === 'view' && node.siblings && node.siblings.length">
|
|
|
- <b-button :id="'siblings-' + node.id" variant="depart" class="mb-2">
|
|
|
- {{ $t('siblings') }}
|
|
|
- </b-button>
|
|
|
-
|
|
|
- <b-popover
|
|
|
- :target="'siblings-' + node.id"
|
|
|
- triggers="focus" placement="top" boundary="viewport"
|
|
|
- custom-class="popover-siblings"
|
|
|
- >
|
|
|
- <ul>
|
|
|
- <li v-for="sibling in node.siblings" :key="sibling.id">
|
|
|
- <node-view-title
|
|
|
- :node="sibling"
|
|
|
- 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>
|
|
|
+ <div class="node-view-footer-base">
|
|
|
+ <div class="tags mb-n2">
|
|
|
+ <b-badge
|
|
|
+ v-for="tag in node.tags" :key="tag.id"
|
|
|
+ variant="dark" pill class="mr-2 mb-2"
|
|
|
+ >
|
|
|
+ {{ tag.name }}
|
|
|
+ </b-badge>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="mode === 'view' && node.siblings && node.siblings.length">
|
|
|
+ <b-button :id="'siblings-' + node.id" variant="depart" class="siblings">
|
|
|
+ {{ $t('siblings') }}
|
|
|
+ </b-button>
|
|
|
+
|
|
|
+ <b-popover
|
|
|
+ :target="'siblings-' + node.id"
|
|
|
+ triggers="focus" placement="top" boundary="viewport"
|
|
|
+ custom-class="popover-siblings"
|
|
|
+ >
|
|
|
+ <ul>
|
|
|
+ <li v-for="sibling in node.siblings" :key="sibling.id">
|
|
|
+ <node-view-title
|
|
|
+ :node="sibling"
|
|
|
+ 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>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="mode === 'card' && preview" class="mt-2">
|
|
@@ -115,6 +117,17 @@ export default {
|
|
|
font-size: 1rem;
|
|
|
}
|
|
|
|
|
|
+ &-base {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .siblings {
|
|
|
+ display: block;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-left: 1rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.btn-read {
|
|
|
pointer-events: auto;
|
|
|
}
|