bachir/enfrancais-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix sibling btn positionning

Browse Source
This commit is contained in:
axolotle
2021-07-05 18:01:56 +02:00
parent 04a5e2de72
commit f84cbe0c00
1 changed files with 51 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/nodes/NodeViewFooter.vue
+51 -38
View File
@@ -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 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="mb-2">
{{ $t('siblings') }}
</b-button>
<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>
<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;
}