add text superposition base layout

src/assets/scss/_variables.scss

@@ -26,3 +26,5 @@ $families: (
 @function setColorFromId($id) {
   @return map-get($families, $id);
 }
+
+$text-card-header-height: 4rem;

src/assets/scss/main.scss

@@ -3,8 +3,11 @@
 @import 'bootstrap';
 
 
-html, body, #app {
+html,
+body,
+#app {
   height: 100%;
+  overflow: hidden;
 }
 
 #app {
@@ -13,7 +16,8 @@ html, body, #app {
 }
 
 main {
-  height: 100%;
+  flex: 1;
+  overflow-y: auto;
 }
 
 // Layouts
@@ -24,15 +28,6 @@ main {
   height: 100%;
 }
 
-.split-screen {
-  display: flex;
-  height: 100%;
-
-  & > * {
-    flex-basis: 50%;
-  }
-}
-
 .container-fill {
   display: flex;
   flex-direction: column;

src/pages/Library.vue

@@ -1,23 +1,37 @@
 <template>
-  <div class="h-100 position-relative">
+  <div class="library">
     <!-- BACKGROUND (mode) -->
     <component :is="mode" @open="openText" />
 
     <!-- FOREGROUND (texts) -->
-    <section v-for="parent in parents" :key="parent.id" class="split-screen">
-      <text-card
-        :id="parent.id"
-        :children="parent.children"
-        @open="openText" @close="closeText"
-      />
-      <div>
+    <div v-if="parents.length" class="main-texts-container">
+      <section
+        v-for="(parent, i) in parents" :key="parent.id"
+        class="main-text-container text-break"
+        :style="`--n: ${i};`"
+      >
         <text-card
-          v-for="id in parent.children" :key="id"
-          :id="id"
-          @close="closeText(parent.id, $event)"
+          :id="parent.id"
+          :children="parent.children"
+          :class="{ 'text-blur': i !== parents.length - 1 }"
+          class="text-card"
+          @open="openText" @close="closeText"
+          @click.native="onMainTextClick(i)"
         />
-      </div>
-    </section>
+
+        <section class="sub-texts-container">
+          <text-card
+            v-for="(id, j) in parent.children" :key="id"
+            :id="id"
+            class="text-card text-break"
+            :class="{ 'text-blur': i !== parents.length - 1 || j !== parent.children.length - 1 }"
+            :style="`--n: ${j};`"
+            @close="closeText(parent.id, $event)"
+            @click.native="onSubTextClick(i, j)"
+          />
+        </section>
+      </section>
+    </div>
   </div>
 </template>
 
@@ -81,10 +95,88 @@ export default {
           texts: parents.map(parent => [parent.id, ...parent.children])
         }
       })
+    },
+
+    onMainTextClick (mainTextIndex) {
+      if (mainTextIndex === this.texts.length - 1) return
+      this.parents.push(this.parents.splice(mainTextIndex, 1)[0])
+      this.updateQuery(this.parents)
+    },
+
+    onSubTextClick (mainTextIndex, subTextIndex) {
+      // FIXME clean this
+      const children = this.parents[mainTextIndex].children
+      let needUpdate = false
+      if (subTextIndex !== children.length - 1) {
+        children.push(children.splice(subTextIndex, 1)[0])
+        needUpdate = true
+      }
+      if (mainTextIndex !== this.texts.length - 1) {
+        this.parents.push(this.parents.splice(mainTextIndex, 1)[0])
+        needUpdate = true
+      }
+
+      if (needUpdate) {
+        this.updateQuery(this.parents)
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.library {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.main-texts-container {
+  position: relative;
+  top: -100%;
+
+  height: 100%;
+  pointer-events: none;
+}
+
+.main-text-container {
+  display: flex;
+  width: 100%;
+
+  > * {
+    flex-basis: 50%;
+  }
+
+  // &:not(:last-of-type) .sub-texts-container {
+  //   background-color: rgba($white, .5);
+  // }
+}
+
+.sub-texts-container {
+  position: relative;
+  height: 100%;
+}
+
+.text-card {
+  pointer-events: auto;
+  width: 100%;
+}
+
+.text-break {
+  position: absolute;
+  height: calc(100% - (var(--n) * #{$text-card-header-height}));
+  top: calc(var(--n) * #{$text-card-header-height});
+  z-index: var(--n);
+}
+
+.text-blur::before {
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: rgba($white, .5);
+}
 </style>

src/pages/library/CardList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-100 position-absolute overflow-auto">
+  <div class="card-list">
     <div v-for="(parents, char) in orderedParents" :key="char">
       <h3>{{ char }}</h3>
       <b-card-group deck>
@@ -38,6 +38,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.card-list {
+  overflow: auto;
+  height: 100%;
+}
+
 .card-deck {
   .card {
     flex-basis: auto;

src/pages/library/TreeMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-overlay :show="loading" class="h-100 position-absolute">
+  <b-overlay :show="loading" class="h-100">
     <node-map
       v-if="!loading"
       v-bind="mapData"