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