improve NodeView components and style

src/assets/scss/abstracts/_variables.scss

@@ -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;

src/assets/scss/base/_bootstrap-overrides.scss

@@ -30,6 +30,14 @@ a:hover {
 
 .popover {
   font-family: $font-family-text;
+
+  .arrow {
+    visibility: hidden;
+  }
+
+  &-body {
+    color: inherit;
+  }
 }
 
 .btn {

src/components/globals/DotButton.vue

@@ -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
     }
   },
 

src/components/layouts/NodeBook.vue

@@ -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%;

src/components/nodes/NodeView.vue

@@ -86,11 +86,12 @@ export default {
   // ╰─╴╵ ╵╵ ╰└─╯
 
   &-card {
-    width: $node-card-width;
+    max-width: $node-card-width;
-    height: $node-card-height;
+    width: 100%;
 
-    .node-view-wrapper {
+    &-wrapper {
-      height: 100%;
+      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;

src/components/nodes/NodeViewBody.vue

@@ -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', getRelation(node))
-        this.$parent.$emit('open-node', { parentId: node.parents[0].id, childId: node.id })
-      } else {
-        this.$parent.$emit('open-node', { parentId: node.id })
-      }
     }
   },
 

src/components/nodes/NodeViewChildList.vue

@@ -26,7 +26,6 @@ export default {
 
   props: {
     children: { type: Array, required: true },
-    parentId: { type: Number, required: true },
     smartphone: { type: Boolean, default: false }
   },
 

src/components/nodes/NodeViewFooter.vue

@@ -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))
     }
   }
 }

src/components/nodes/NodeViewHeaderProd.vue

@@ -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>
 

src/components/nodes/NodeViewHeaderRef.vue

@@ -3,21 +3,15 @@
     class="node-view-header-ref" :class="'node-view-header-' + mode"
   >
     <div class="d-flex w-100">
-      <h4 class="mr-auto">
+      <node-view-title
-        <strong class="d-block">
+        :node="node" tag="h4"
-          {{ toCommaList(node.authors) }},
+        block edition
-        </strong>
+        class="mr-auto"
-        <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-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: {
+    font-family: $font-family-text;
-      family: $font-family-text;
-      size: inherit;
-      line-height: inherit;
-    }
-
-    h4 {
-      font-weight: $font-weight-base;
-      font-size: 32px;
-
-      .authors {
-        font-weight: $font-weight-bold;
-      }
-    }
   }
 
 

src/components/nodes/NodeViewTitle.vue

@@ -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) + ', '" />
+        <span v-if="node.preTitle" v-html="' ' + trim(node.preTitle) + ','" />
-        <em v-html="trim(node.title) || 'pas de titre ital'" />
+        <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(' ') }}

src/store/modules/library.js

@@ -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 ids = departIds.slice(0, 3)
-      const relatedIds = getRelatedNodesIds(departNodes)
+      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]
     },

src/store/utils.js

@@ -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 }
+}