|
@@ -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) {
|
|
|
- margin-bottom: 1rem;
|
|
|
+ li {
|
|
|
+ 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>
|