improve NodeView components and style
This commit is contained in:
axolotle
@@ -141,7 +141,7 @@ $popover-body-color: $white;
|
||||
$popover-body-padding-y: 18px;
|
||||
$popover-body-padding-x: 18px;
|
||||
|
||||
$popover-arrow-width: 0;
|
||||
$popover-arrow-width: 2rem;
|
||||
$popover-arrow-height: 2rem;
|
||||
|
||||
$popover-arrow-outer-color: null;
|
||||
|
||||
@@ -30,6 +30,14 @@ a:hover {
|
||||
|
||||
.popover {
|
||||
font-family: $font-family-text;
|
||||
|
||||
.arrow {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&-body {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
||||
@@ -23,12 +23,13 @@ export default {
|
||||
|
||||
props: {
|
||||
variant: { type: String, required: true },
|
||||
active: { type: Boolean, default: false }
|
||||
active: { type: Boolean, default: false },
|
||||
hovered: { type: Boolean, default: false }
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
show: false
|
||||
show: this.hovered
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -14,7 +14,6 @@
|
||||
>
|
||||
<node-view-child-list
|
||||
:children="parent.children"
|
||||
:parent-id="parent.id"
|
||||
smartphone
|
||||
@open-child="$emit('open-node', { parentId: parent.id, ...$event })"
|
||||
/>
|
||||
@@ -69,12 +68,6 @@ export default {
|
||||
nodes: { type: Array, required: true }
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
height: undefined
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
stackHeight () {
|
||||
return Math.min(150 / (this.nodes.length - 1), 75)
|
||||
@@ -82,18 +75,9 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateSize () {
|
||||
this.height = this.$el.getBoundingClientRect().height
|
||||
},
|
||||
|
||||
getChildrenStackHeight (childrenLen) {
|
||||
return this.stackHeight / childrenLen || this.stackHeight
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
window.addEventListener('resize', () => this.updateSize())
|
||||
this.updateSize()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -101,7 +85,6 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.node-book {
|
||||
min-height: 100%;
|
||||
// top: -100%;
|
||||
|
||||
@include media-breakpoint-up($layout-bp) {
|
||||
height: 100%;
|
||||
|
||||
@@ -86,11 +86,12 @@ export default {
|
||||
// ╰─╴╵ ╵╵ ╰└─╯
|
||||
|
||||
&-card {
|
||||
width: $node-card-width;
|
||||
height: $node-card-height;
|
||||
max-width: $node-card-width;
|
||||
width: 100%;
|
||||
|
||||
.node-view-wrapper {
|
||||
height: 100%;
|
||||
&-wrapper {
|
||||
width: 100%;
|
||||
max-height: $node-card-height;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -101,8 +102,6 @@ export default {
|
||||
|
||||
&-card &-header {
|
||||
padding: $node-card-spacer-sm-y $node-card-spacer-sm-x 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: $node-card-spacer-y $node-card-spacer-x 0;
|
||||
@@ -111,8 +110,6 @@ export default {
|
||||
|
||||
&-card &-footer {
|
||||
padding: $node-card-spacer-sm-y $node-card-spacer-sm-x $node-card-spacer-sm-y * 2;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: $node-card-spacer-y $node-card-spacer-x $node-card-spacer-y * 2;
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRelation } from '@/store/utils'
|
||||
import { NodeViewTitle } from '@/components/nodes'
|
||||
|
||||
|
||||
@@ -74,11 +75,7 @@ export default {
|
||||
|
||||
onFootnoteLinkClick (node, popoverBtnId) {
|
||||
this.$root.$emit('bv::hide::popover', popoverBtnId)
|
||||
if (node.parents && node.parents.length) {
|
||||
this.$parent.$emit('open-node', { parentId: node.parents[0].id, childId: node.id })
|
||||
} else {
|
||||
this.$parent.$emit('open-node', { parentId: node.id })
|
||||
}
|
||||
this.$parent.$emit('open-node', getRelation(node))
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -26,7 +26,6 @@ export default {
|
||||
|
||||
props: {
|
||||
children: { type: Array, required: true },
|
||||
parentId: { type: Number, required: true },
|
||||
smartphone: { type: Boolean, default: false }
|
||||
},
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
<node-view-title
|
||||
:node="sibling"
|
||||
link edition block
|
||||
@open-node="onOpen(sibling.id, 'siblings-' + node.id)"
|
||||
@open-node="onOpenSibling(sibling.id, 'siblings-' + node.id)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -35,16 +35,17 @@
|
||||
</div>
|
||||
|
||||
<div v-if="mode === 'card'">
|
||||
<b-button @click="onOpen(node.id)" variant="outline-dark">
|
||||
{{ $t('text.read') }}
|
||||
</b-button>
|
||||
</div>
|
||||
<b-button @click="onOpenSelf()" variant="outline-dark">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toCommaList } from '@/helpers/common'
|
||||
import { getRelation } from '@/store/utils'
|
||||
import { NodeViewTitle } from '@/components/nodes'
|
||||
|
||||
|
||||
@@ -72,9 +73,13 @@ export default {
|
||||
methods: {
|
||||
toCommaList,
|
||||
|
||||
onOpen (parentId, popoverBtnId) {
|
||||
onOpenSibling (parentId, popoverBtnId) {
|
||||
this.$root.$emit('bv::hide::popover', popoverBtnId)
|
||||
this.$parent.$emit('open-node', { parentId })
|
||||
},
|
||||
|
||||
onOpenSelf () {
|
||||
this.$parent.$emit('open-node', getRelation(this.node))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
|
||||
<div v-if="mode === 'card' && node.parents && node.parents.length" class="node-view-header-parent">
|
||||
<node-view-title :node="node.parents[0]" edition />
|
||||
<node-view-title :node="node.parents[0]" edition tag="div" />
|
||||
</div>
|
||||
</h4>
|
||||
|
||||
|
||||
@@ -3,21 +3,15 @@
|
||||
class="node-view-header-ref" :class="'node-view-header-' + mode"
|
||||
>
|
||||
<div class="d-flex w-100">
|
||||
<h4 class="mr-auto">
|
||||
<strong class="d-block">
|
||||
{{ toCommaList(node.authors) }},
|
||||
</strong>
|
||||
<span v-if="node.preTitle" v-html="trim(node.preTitle) + ', '" />
|
||||
<em v-html="(trim(node.title) || 'pas de titre ital') + ','" />
|
||||
<div v-if="node.edition" class="edition">
|
||||
{{ node.edition.map(ed => ed.name).join(' ') }}
|
||||
</div>
|
||||
</h4>
|
||||
<node-view-title
|
||||
:node="node" tag="h4"
|
||||
block edition
|
||||
class="mr-auto"
|
||||
/>
|
||||
|
||||
<node-view-child-list
|
||||
v-if="mode === 'view'"
|
||||
:children="node.children"
|
||||
:parent-id="node.id"
|
||||
@open-child="$parent.$emit('open-child', $event)"
|
||||
/>
|
||||
<button-close v-if="mode === 'view'" @click="onClose()" />
|
||||
@@ -27,14 +21,15 @@
|
||||
|
||||
<script>
|
||||
import { trim, toCommaList } from '@/helpers/common'
|
||||
import { NodeViewChildList } from '@/components/nodes'
|
||||
import { NodeViewChildList, NodeViewTitle } from '@/components/nodes'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'NodeViewHeaderRef',
|
||||
|
||||
components: {
|
||||
NodeViewChildList
|
||||
NodeViewChildList,
|
||||
NodeViewTitle
|
||||
},
|
||||
|
||||
props: {
|
||||
@@ -53,23 +48,10 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
.node-view-header {
|
||||
&-ref {
|
||||
font: {
|
||||
family: $font-family-text;
|
||||
size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: $font-weight-base;
|
||||
font-size: 32px;
|
||||
|
||||
.authors {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
font-family: $font-family-text;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -12,8 +12,9 @@
|
||||
<slot name="default" />
|
||||
<span><strong>{{ toCommaList(node.authors) }}</strong>,</span>
|
||||
<span>
|
||||
<span v-if="node.preTitle" v-html="trim(node.preTitle) + ', '" />
|
||||
<em v-html="trim(node.title) || 'pas de titre ital'" />
|
||||
<span v-if="node.preTitle" v-html="' ' + trim(node.preTitle) + ','" />
|
||||
<em v-html="' ' + trim(node.title) || 'pas de titre ital'" />
|
||||
<span v-if="edition && node.edition">, </span>
|
||||
</span>
|
||||
<div v-if="edition && node.edition" class="edition">
|
||||
{{ node.edition.map(ed => ed.name).join(' ') }}
|
||||
|
||||
@@ -102,8 +102,9 @@ export default {
|
||||
|
||||
async 'INIT_LIBRARY_MAP' ({ state, commit, dispatch }) {
|
||||
const departIds = await dispatch('INIT_LIBRARY')
|
||||
const departNodes = await dispatch('GET_NODES', { ids: departIds.slice(0, 3), dataLevel: 'partial' })
|
||||
const relatedIds = getRelatedNodesIds(departNodes)
|
||||
const ids = departIds.slice(0, 3)
|
||||
const departNodes = await dispatch('GET_NODES', { ids, dataLevel: 'partial' })
|
||||
const relatedIds = getRelatedNodesIds(departNodes, ids)
|
||||
const relatedNodes = await dispatch('GET_NODES', { ids: relatedIds, dataLevel: 'partial' })
|
||||
return [...departNodes, ...relatedNodes]
|
||||
},
|
||||
|
||||
+10
-1
@@ -58,12 +58,13 @@ export function getUniqueNodesIds (tree) {
|
||||
}
|
||||
|
||||
|
||||
export function getRelatedNodesIds (nodes) {
|
||||
export function getRelatedNodesIds (nodes, ignored) {
|
||||
const ids = new Set()
|
||||
for (const node of nodes) {
|
||||
for (const relation of RELATIONS) {
|
||||
if (relation in node && node[relation]) {
|
||||
node[relation].forEach(({ id }) => {
|
||||
if (ignored.includes(id)) return
|
||||
ids.add(id)
|
||||
})
|
||||
}
|
||||
@@ -137,3 +138,11 @@ export function tagsInNode (tags, nodeTags) {
|
||||
if (!nodeTags || nodeTags.length === 0) return false
|
||||
return tags.every(tag => nodeTags.some(nodeTag => nodeTag.name === tag))
|
||||
}
|
||||
|
||||
|
||||
export function getRelation (node) {
|
||||
if (node.type === 'prod' && node.parents && node.parents.length) {
|
||||
return { parentId: node.parents[0].id, childId: node.id }
|
||||
}
|
||||
return { parentId: node.id }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user