update library mode views

src/pages/library/LibraryList.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="card-list">
+  <div class="library-list">
-    <div class="card-list-container">
+    <div class="library-list-container">
       <div v-for="(parents, char) in orderedTextsDepart" :key="char">
         <h3>{{ char }}</h3>
-        <div class="text-group">
+        <div class="library-list-nodes-group">
           <node-view
             v-for="parent in parents" :key="parent.id"
             :node="parent"
@@ -41,7 +41,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.card-list {
+.library-list {
   overflow-y: auto;
   height: 100%;
 
@@ -50,35 +50,36 @@ export default {
     line-height: 1;
     font-size: 16.5rem;
   }
-}
 
-.text-group {
+  &-nodes-group {
-  display: flex;
+    display: flex;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
 
-  .card {
+    .node-view {
-    margin-bottom: 3.4375rem;
+      margin-bottom: 3.4375rem;
-    $marg: 4.6875rem;
+      $marg: 4.6875rem;
-    width: 100%;
+      width: 100%;
-    height: 20rem;
+      height: 20rem;
 
-    @include media-breakpoint-only(md) {
+      @include media-breakpoint-only(md) {
-      max-width: calc(50% - #{($marg / 2)});
+        max-width: calc(50% - #{($marg / 2)});
-      margin-right: $marg;
+        margin-right: $marg;
 
-      &:nth-of-type(2n) {
+        &:nth-of-type(2n) {
-        margin-right: 0;
+          margin-right: 0;
+        }
       }
-    }
 
-    @include media-breakpoint-up(lg) {
+      @include media-breakpoint-up(lg) {
-      margin-right: $marg;
+        margin-right: $marg;
-      max-width: calc(33.33% - #{(($marg * 2) / 3)});
+        max-width: calc(33.33% - #{(($marg * 2) / 3)});
 
-      &:nth-of-type(3n) {
+        &:nth-of-type(3n) {
-        margin-right: 0;
+          margin-right: 0;
+        }
       }
     }
   }
 }
+
 </style>

src/pages/library/LibraryMap.vue

@@ -15,6 +15,7 @@
           <node-view
             :node="texts[i]"
             mode="card"
+            @open-node="onOpen(texts[i])"
           />
         </foreignObject>
       </g>
@@ -60,6 +61,11 @@ export default {
     updateSize () {
       const { width, height } = this.$refs.svg.getBoundingClientRect()
       Object.assign(this.$data, { width, height })
+    },
+
+    onOpen (node) {
+      // FIXME ALSO CHECK IF PARENT
+      this.$emit('open-node', node.id)
     }
   },
 

src/pages/library/index.js

@@ -1,3 +1,3 @@
-export { default as CardList } from './CardList'
+export { default as LibraryList } from './LibraryList'
-export { default as CardMap } from './CardMap'
+export { default as LibraryMap } from './LibraryMap'
-export { default as TreeMap } from './TreeMap'
+export { default as LibraryTree } from './LibraryTree'