add text_rebond to NodeViewFooter & style popovers

src/assets/scss/abstracts/_variables.scss

@@ -132,7 +132,7 @@ $spinner-width: 50px;
 
 // POPOVERS
 $popover-font-size: $font-size-base;
-$popover-bg: $black;
+$popover-bg: $white;
 $popover-max-width: 450px;
 $popover-border-width: 0;
 $popover-box-shadow: null;
@@ -142,7 +142,7 @@ $popover-body-padding-y: 18px;
 $popover-body-padding-x: 18px;
 
 $popover-arrow-width: 0;
-$popover-arrow-height: 1rem;
+$popover-arrow-height: 2rem;
 
 $popover-arrow-outer-color: null;
 

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

@@ -31,3 +31,11 @@ a:hover {
 .popover {
   font-family: $font-family-text;
 }
+
+.btn {
+  font-family: $font-family-base;
+}
+
+.badge {
+  font-size: inherit;
+}

src/components/formItems/MultipleTagsSelect.vue

@@ -85,7 +85,6 @@ export default {
     }
 
     .b-form-tag {
-      font-size: inherit;
       font-weight: $font-weight-bold;
       padding-top: 0;
       padding-bottom: 0;

src/components/nodes/NodeViewBody.vue

@@ -20,7 +20,7 @@
             v-for="link in note.links" :key="link.id"
             :node="link.parents && link.parents.length ? link.parents[0] : link"
             link
-            @open-node="onFootnoteLinkClick(link)"
+            @open-node="onFootnoteLinkClick(link, 'note-' + note.number)"
           >
             <dot-button
               :variant="link.variant"
@@ -67,11 +67,13 @@ export default {
           if (link.parentElement.nodeName === 'SUP') {
             link.parentElement.replaceWith(link)
           }
+          link.setAttribute('href', 'javascript:;')
         }
       })
     },
 
-    onFootnoteLinkClick (node) {
+    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 {
@@ -165,14 +167,30 @@ export default {
   }
 }
 
-.footnote-content,
+.footnote {
-.footnote-child-list {
+  background-color: $black;
-  > :last-child {
+  color: $white;
-    margin-bottom: 0;
+  font-size: 1.25rem;
+
+  @include media-breakpoint-up(sm) {
+    font-size: 1.5rem;
+  }
+
+  h6 {
+    font-size: inherit;
+  }
+
+  &-content,
+  &-child-list {
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &-child-list {
+    margin-top: .5rem;
   }
 }
 
-.footnote-child-list {
+
-  margin-top: .5rem;
-}
 </style>

src/components/nodes/NodeViewFooter.vue

@@ -3,38 +3,34 @@
     class="node-view-footer" :class="'node-view-footer-' + mode"
   >
     <div class="d-flex w-100">
-      <div class="tags">
+      <div class="tags mb-n2">
         <b-badge
           v-for="tag in node.tags" :key="tag.id"
-          variant="dark" pill
+          variant="dark" pill class="mr-2 mb-2"
         >
           {{ tag.name }}
         </b-badge>
       </div>
 
-      <div v-if="mode === 'view' && node.siblings">
+      <div v-if="mode === 'view' && node.siblings && node.siblings.length">
         <b-button :id="'siblings-' + node.id">
           {{ $t('siblings') }}
         </b-button>
 
         <b-popover
-          :target="'siblings-' + node.id" triggers="hover" placement="top"
+          :target="'siblings-' + node.id" triggers="click" placement="top"
+          custom-class="popover-siblings"
+          boundary="viewport"
         >
-          <div v-for="sibling in node.siblings" :key="sibling.id">
+          <ul>
-            <h6>
+            <li v-for="sibling in node.siblings" :key="sibling.id">
-              <a @click.prevent="onOpen(sibling.id)" href="#">
+              <node-view-title
-                <div class="">
+                :node="sibling"
-                  {{ toCommaList(sibling.authors) }},
+                link edition block
-                </div>
+                @open-node="onOpen(sibling.id, 'siblings-' + node.id)"
-                <div class="">
+              />
-                  {{ sibling.title }},
+            </li>
-                </div>
+          </ul>
-                <div class="">
-                  {{ sibling.edition ? sibling.edition.name : sibling.edition }}
-                </div>
-              </a>
-            </h6>
-          </div>
         </b-popover>
       </div>
 
@@ -49,11 +45,16 @@
 
 <script>
 import { toCommaList } from '@/helpers/common'
+import { NodeViewTitle } from '@/components/nodes'
 
 
 export default {
   name: 'NodeViewFooter',
 
+  components: {
+    NodeViewTitle
+  },
+
   props: {
     node: { type: Object, required: true },
     type: { type: String, required: true },
@@ -71,16 +72,40 @@ export default {
   methods: {
     toCommaList,
 
-    onOpen (parentId) {
+    onOpen (parentId, popoverBtnId) {
+      this.$root.$emit('bv::hide::popover', popoverBtnId)
       this.$parent.$emit('open-node', { parentId })
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .node-view-footer {
   margin-top: auto;
   font-family: $font-family-base;
 }
+
+.popover-siblings {
+  background-color: $white;
+  border: $line;
+
+  .popover-body {
+    color: $black;
+
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      li:not(:last-of-type) {
+        margin-bottom: 1rem;
+      }
+
+      h6 {
+        margin: 0;
+      }
+    }
+  }
+}
 </style>

src/components/nodes/NodeViewTitle.vue

@@ -10,7 +10,7 @@
       class="node-view-title-container"
     >
       <slot name="default" />
-      <strong>{{ toCommaList(node.authors) }}</strong>,
+      <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'" />

src/pages/library/LibraryMap.vue

@@ -58,7 +58,7 @@ export default {
 
   methods: {
     onOpen (node) {
-      if (node.parents) {
+      if (node.parents && node.parents.length) {
         this.$emit('open-node', { parentId: node.parents[0].id, childId: node.id })
       } else {
         this.$emit('open-node', { parentId: node.id })

src/pages/library/LibraryTree.vue

@@ -109,7 +109,7 @@ export default {
     trim,
 
     onNodeClick (node) {
-      if (node.parents) {
+      if (node.parents && node.parents.length) {
         this.$emit('open-node', { parentId: node.parents[0].id, childId: node.id })
       } else {
         this.$emit('open-node', { parentId: node.id })

src/store/modules/library.js

@@ -222,7 +222,7 @@ export default {
         if (a.authors[0].last_name > b.authors[0].last_name) return 1
         return 0
       }).reduce((dict, text) => {
-        const firstChar = text.authors ? text.authors[0].last_name[0] : 'Pas de noms'
+        const firstChar = text.authors ? text.authors[0].last_name[0].toUpperCase() : 'Pas de noms'
         if (!(firstChar in dict)) dict[firstChar] = []
         dict[firstChar].push(text)
         return dict