From ce6026adfacade014ab6767c6467dc2a128d0aa5 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 25 Jun 2021 16:03:24 +0200
Subject: [PATCH] set fixed position for NodeView navs

---
 src/components/layouts/NodeBook.vue         |  3 +-
 src/components/nodes/NodeViewHeaderProd.vue | 23 +++++++++++-
 src/components/nodes/NodeViewHeaderRef.vue  | 39 ++++++++++++++++-----
 3 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/src/components/layouts/NodeBook.vue b/src/components/layouts/NodeBook.vue
index b2c0e24..de7b152 100644
--- a/src/components/layouts/NodeBook.vue
+++ b/src/components/layouts/NodeBook.vue
@@ -13,6 +13,7 @@
         :style="`--nth: ${i}`"
       >
         <node-view-child-list
+          v-if="parent.children && parent.children.length"
           :children="parent.children"
           smartphone
           @open-child="$emit('open-node', { parentId: parent.id, ...$event })"
@@ -166,7 +167,7 @@ export default {
         &:not(.active) {
           ::v-deep {
             .node-view {
-              overflow-y: hidden;
+              // overflow-y: hidden;
 
               &-header {
                 z-index: 0;
diff --git a/src/components/nodes/NodeViewHeaderProd.vue b/src/components/nodes/NodeViewHeaderProd.vue
index 95bbf25..9ce4840 100644
--- a/src/components/nodes/NodeViewHeaderProd.vue
+++ b/src/components/nodes/NodeViewHeaderProd.vue
@@ -13,7 +13,7 @@
         </div>
       </h4>
 
-      <button-close v-if="mode === 'view'" @click="onClose()" />
+      <button-close v-if="mode === 'view'" @click="onClose()" :style="`--offset: ${offset}px;`" />
     </div>
   </div>
 </template>
@@ -42,6 +42,12 @@ export default {
     }
   },
 
+  data () {
+    return {
+      offset: 0
+    }
+  },
+
   methods: {
     trim,
     toCommaList,
@@ -49,6 +55,12 @@ export default {
     onClose () {
       this.$parent.$emit('close-node', this.node.id)
     }
+  },
+
+  mounted () {
+    const parentContH = this.$el.parentElement.offsetWidth
+    const parentH = this.$el.parentElement.parentElement.offsetWidth
+    this.offset = (parentH - parentContH) * -1
   }
 }
 </script>
@@ -93,5 +105,14 @@ export default {
       }
     }
   }
+
+  .btn-close {
+    position: relative;
+    display: flex;
+    float: right;
+    @include media-breakpoint-up($layout-bp) {
+      right: var(--offset);
+    }
+  }
 }
 </style>
diff --git a/src/components/nodes/NodeViewHeaderRef.vue b/src/components/nodes/NodeViewHeaderRef.vue
index 15ffa14..a86b197 100644
--- a/src/components/nodes/NodeViewHeaderRef.vue
+++ b/src/components/nodes/NodeViewHeaderRef.vue
@@ -2,19 +2,21 @@
   <div
     class="node-view-header-ref" :class="'node-view-header-' + mode"
   >
-    <div class="d-flex w-100">
+    <div class="w-100">
+      <div class="nav-container" :style="`--offset: ${offset}px;`">
+        <node-view-child-list
+          v-if="mode === 'view' && node.children && node.children.length"
+          :children="node.children"
+          @open-child="$parent.$emit('open-child', $event)"
+        />
+        <button-close v-if="mode === 'view'" @click="onClose()" />
+      </div>
+
       <node-view-title
         :node="node" tag="h4"
         block edition
         class="mr-auto"
       />
-
-      <node-view-child-list
-        v-if="mode === 'view'"
-        :children="node.children"
-        @open-child="$parent.$emit('open-child', $event)"
-      />
-      <button-close v-if="mode === 'view'" @click="onClose()" />
     </div>
   </div>
 </template>
@@ -37,6 +39,12 @@ export default {
     mode: { type: String, required: true }
   },
 
+  data () {
+    return {
+      offset: 0
+    }
+  },
+
   methods: {
     trim,
     toCommaList,
@@ -44,6 +52,12 @@ export default {
     onClose () {
       this.$parent.$emit('close-node', this.node.id)
     }
+  },
+
+  mounted () {
+    const parentContH = this.$el.parentElement.offsetWidth
+    const parentH = this.$el.parentElement.parentElement.offsetWidth
+    this.offset = (parentH - parentContH) * -1
   }
 }
 </script>
@@ -54,6 +68,15 @@ export default {
     font-family: $font-family-text;
   }
 
+  .nav-container {
+      position: relative;
+      display: flex;
+      float: right;
+      @include media-breakpoint-up($layout-bp) {
+        right: var(--offset);
+      }
+  }
+
 
   // ╭─╴╭─┐┌─╮┌─╮
   // │  ├─┤├┬╯│ │