src/assets/scss/classes/_img-wrapper.scss

@@ -2,7 +2,7 @@
   display: inline-block;
   position: relative;
 
-  &.on-hover:not(:hover) .btn-expand {
+  &:not(:hover) .btn-expand {
     display: none;
   }
 

src/components/globals/DotButton.vue

@@ -5,10 +5,10 @@
     v-bind="$attrs" v-on="$listeners"
     :active="active"
     :variant="variant"
-    @mouseover="show = true"
-    @mouseleave="show = false"
-    @focus="show = true"
-    @blur="show = false"
+    @mouseover="updateShow(true)"
+    @mouseleave="updateShow(false)"
+    @focus="updateShow(true)"
+    @blur="updateShow(false)"
     @click="onClick"
   >
     <span :class="pos">
@@ -38,6 +38,10 @@ export default {
   methods: {
     onClick (e) {
       this.$el.blur()
+    },
+
+    updateShow (show) {
+      this.show = this.hovered || show
     }
   }
 }

src/components/layouts/PageView.vue

@@ -26,7 +26,7 @@
             <dot-button
               :variant="link.variant"
               class="mr-2"
-              active
+              active hovered
             >
               {{ $t('variants.' + link.variant) }}
             </dot-button>
@@ -106,7 +106,13 @@ export default {
   mounted () {
     if (this.page.notes) {
       const ids = this.page.notes.filter(note => (note.links)).reduce((ids, note) => {
-        return [...ids, ...note.links.map(link => link.id)]
+        note.links.forEach((link) => {
+          ids.push(link.id)
+          if (link.parents && link.parents.length) {
+            ids.push(link.parents[0].id)
+          }
+        })
+        return ids
       }, [])
       this.$store.dispatch('GET_NODES', { ids, dataLevel: 'initial' })
       this.addFootnotes()

src/components/nodes/NodeViewBody.vue

@@ -67,7 +67,7 @@
               <dot-button
                 :variant="link.variant"
                 class="mr-2"
-                active
+                active hovered
               >
                 {{ $t('variants.' + link.variant) }}
               </dot-button>
@@ -173,7 +173,13 @@ export default {
     if (this.mode === 'view' && this.node.notes) {
       // Query partial data for linked nodes in notes
       const ids = this.node.notes.filter(note => (note.links)).reduce((ids, note) => {
-        return [...ids, ...note.links.map(link => link.id)]
+        note.links.forEach((link) => {
+          ids.push(link.id)
+          if (link.parents && link.parents.length) {
+            ids.push(link.parents[0].id)
+          }
+        })
+        return ids
       }, [])
       this.$store.dispatch('GET_NODES', { ids, dataLevel: 'initial' })
     }

src/pages/_partials/MainHeader.vue

@@ -33,7 +33,7 @@
       <nav class="nav-list d-none d-tb-block">
         <ul>
           <li v-for="link in mainRoutes" :key="link.to">
-            <b-button :to="{ name: link.to }" :active="$route.name === link.to" :variant="link.variant">
+            <b-button :to="{ name: link.to }" :active="routeIsActive(link.to)" :variant="link.variant">
               {{ $t('sections.' + link.to) }}
             </b-button>
           </li>
@@ -87,6 +87,14 @@ export default {
     }
   },
 
+  methods: {
+    routeIsActive (to) {
+      return to === 'gallery'
+        ? ['gallery', 'gallery-view'].includes(this.$route.name)
+        : this.$route.name === to
+    }
+  },
+
   created () {
     this.$store.dispatch('GET_BURGER')
   }

src/store/modules/pages.js

@@ -52,6 +52,7 @@ export default {
     async 'QUERY_PAGE_BY_ID' ({ state, commit, dispatch, getters }, id) {
       if (state.pages[id] !== undefined) return state.pages[id]
       return api.query(Page, { id }).then(data => {
+        dispatch('PARSE_PAGE', data.page)
         commit('SET_PAGE_FROM_ID', { id, page: data.page })
         return state.pages[id]
       })