fixed card sizes and update Library views

src/assets/scss/abstracts/_variables.scss

@@ -56,6 +56,7 @@ $grid-breakpoints: (
   md: 1024px,
   lg: 1200px,
   xl: 1440px,
+  xxl: 1920px,
 );
 
 $layout-bp: md;
@@ -173,8 +174,11 @@ $node-card-spacer-sm-x: 8px;
 $node-card-spacer-sm-y: 8px;
 $node-card-spacer-x: 15px;
 $node-card-spacer-y: 10px;
+
 $node-card-width: 560px;
 $node-card-height: 350px;
+$node-card-width-sm: $node-card-width / 1.5;
+$node-card-height-sm: $node-card-height / 1.5;
 
 // MISC
 $btn-size: 26px;

src/components/layouts/NodePreviewZone.vue

@@ -63,5 +63,23 @@ export default {
   .popover-body {
     padding: 0;
   }
+
+  .node-view {
+    width: $node-card-width-sm;
+    max-width: 100%;
+    max-height: 100%;
+
+    @include media-breakpoint-up($size-bp) {
+      width: $node-card-width;
+    }
+
+    &-wrapper {
+      height: $node-card-height-sm;
+
+      @include media-breakpoint-up($size-bp) {
+        height: $node-card-height;
+      }
+    }
+  }
 }
 </style>

src/components/nodes/NodeView.vue

@@ -1,7 +1,7 @@
 <template>
   <article
     class="node-view"
-    :class="['node-view-' + mode, 'node-view-' + type, 'node-view-' + nodeVariant]"
+    :class="['node-view-' + mode, 'node-view-' + type, 'node-view-' + nodeVariant, { 'preview': preview }]"
   >
     <div v-if="!loading" class="node-view-wrapper" :id="'node-' + node.id">
       <component
@@ -78,7 +78,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .node-view {
   position: relative;
 
@@ -93,19 +93,21 @@ export default {
   // ╰─╴╵ ╵╵ ╰└─╯
 
   &-card {
-    max-width: $node-card-width;
     width: 100%;
 
     .node-view-wrapper {
       pointer-events: none;
       width: 100%;
-      max-height: $node-card-height;
       height: 100%;
       overflow: hidden;
     }
 
     &.node-view-depart {
       box-shadow: .5rem .5rem 1rem rgba($black, .25);
+
+      .node-view-child-list-group {
+        box-shadow: .5rem .5rem 1rem rgba($black, .25);
+      }
     }
   }
 

src/components/nodes/NodeViewBody.vue

@@ -99,6 +99,10 @@ export default {
 .node-view-body {
   width: 100%;
 
+  img {
+    max-width: 100%;
+  }
+
   font: {
     family: $font-family-text;
     line-height: inherit;
@@ -111,6 +115,7 @@ export default {
   &-view {
     padding: 0 $node-view-spacer-sm-x;
     font-size: 1.25rem;
+    word-wrap: break-word;
 
     @include media-breakpoint-up($size-bp) {
       padding: 0 $node-view-spacer-x;
@@ -128,6 +133,7 @@ export default {
   &-card {
     padding: 0 $node-card-spacer-sm-x;
     font-size: 1.1rem;
+    word-wrap: anywhere;
 
     @include media-breakpoint-up($size-bp) {
       font-size: 2rem;

src/components/nodes/NodeViewFooter.vue

@@ -90,10 +90,19 @@ export default {
 .node-view-footer {
   margin-top: auto;
   font-family: $font-family-base;
+  font-size: 0.9rem;
+
+  @include media-breakpoint-up($size-bp) {
+    font-size: 1rem;
+  }
 
   .btn-read {
     pointer-events: auto;
   }
+
+  .btn {
+    font-size: inherit;
+  }
 }
 
 .popover-siblings {

src/components/nodes/NodeViewHeaderRef.vue

@@ -90,7 +90,7 @@ export default {
         font-size: 0.65rem;
       }
 
-      @include media-breakpoint-up(sm) {
+      @include media-breakpoint-up($size-bp) {
         font-size: 2rem;
 
         .edition {
@@ -113,7 +113,7 @@ export default {
         font-size: 0.75rem;
       }
 
-      @include media-breakpoint-up(sm) {
+      @include media-breakpoint-up($size-bp) {
         font-size: 2.625rem;
 
         .edition {
@@ -125,7 +125,7 @@ export default {
     .node-view-child-list {
       display: none;
 
-      @include media-breakpoint-up(md) {
+      @include media-breakpoint-up($layout-bp) {
         display: block;
       }
     }

src/pages/library/LibraryList.vue

@@ -77,39 +77,57 @@ export default {
 .library-list {
   overflow-y: auto;
   height: 100%;
+  padding: 0 1.15rem;
+
+  @include media-breakpoint-up($size-bp) {
+    padding: 0 2.15rem;
+  }
 
   h3 {
     font-family: $font-family-text;
     line-height: 1;
-    font-size: 16.5rem;
+    font-size: 6.25rem;
+    margin-top: 2rem;
+
+    @include media-breakpoint-up($size-bp) {
+      margin-top: 2rem;
+      font-size: 16.5rem;
+    }
   }
 
   &-nodes-group {
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-gap: 2.2rem;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+
+    @include media-breakpoint-up(lg) {
+      grid-gap: 3.4rem;
+    }
+
+    @media (min-width: 650px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @include media-breakpoint-up(lg) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @include media-breakpoint-up(xxl) {
+      grid-template-columns: repeat(4, 1fr);
+    }
 
     .node-view {
-      margin-bottom: 3.4375rem;
+      max-width: 100%;
-      $marg: 4.6875rem;
+      height: $node-card-height-sm;
-      width: 100%;
-      height: $node-card-height;
 
-      @include media-breakpoint-only(md) {
+      @include media-breakpoint-up($size-bp) {
-        max-width: calc(50% - #{($marg / 2)});
+        max-width: $node-card-width;
-        margin-right: $marg;
+        height: $node-card-height;
-
-        &:nth-of-type(2n) {
-          margin-right: 0;
-        }
       }
 
-      @include media-breakpoint-up(lg) {
+      &.preview {
-        margin-right: $marg;
+        top: -2rem;
-        max-width: calc(33.33% - #{(($marg * 2) / 3)});
-
-        &:nth-of-type(3n) {
-          margin-right: 0;
-        }
       }
     }
   }

src/pages/library/LibraryMap.vue

@@ -84,44 +84,70 @@ export default {
     onPreviewNodeClick (ids) {
       this.$root.$emit('bv::hide::popover', 'preview-node-' + this.previewNode.id)
       this.$emit('open-node', ids)
+      this.previewNode = null
     }
   },
 
   created () {
+    // JS-BP
+    const radius = window.innerWidth < 769 ? 700 / 1.5 : 700
     this.$store.dispatch('INIT_LIBRARY_MAP').then(nodes => {
       this.nodes = nodes.map((node, i) => {
         return { x: i, rotate: randomUniform(-25, 25)(), data: node }
       })
       this.simulation.nodes(this.nodes)
         .force('attract', forceManyBody().strength(10))
-        .force('collision', forceCollide().radius(650 / 2))
+        .force('collision', forceCollide().radius(radius / 2))
     })
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
-foreignObject {
+#library-map {
-  width: $node-card-width;
+  foreignObject {
-  height: $node-card-height;
+    width: $node-card-width-sm;
-  x: var(--x);
+    height: $node-card-height-sm;
-  y: var(--y);
+    x: var(--x);
-  transform-origin: var(--x) var(--y);
+    y: var(--y);
-  transform: rotate(var(--r)) translate(-#{$node-card-width / 2}, -#{$node-card-height / 2});
+    transform-origin: var(--x) var(--y);
-  overflow: visible;
+    transform: rotate(var(--r)) translate(-#{$node-card-width / 2}, -#{$node-card-height / 2});
+    overflow: visible;
+
+    @include media-breakpoint-up($size-bp) {
+      width: $node-card-width;
+      height: $node-card-height;
+    }
+
+    .node-view {
+      cursor: pointer;
+    }
+  }
 
   .node-view {
-    cursor: pointer;
+    width: $node-card-width-sm;
-  }
-}
 
-.node-view.hidden {
+    @include media-breakpoint-up($size-bp) {
-  border: $line;
+      width: $node-card-width;
-  border-style: dashed;
+    }
-  background-color: transparent;
 
-  ::v-deep .node-view-wrapper {
+    &-wrapper {
-    opacity: 0;
+      height: $node-card-height-sm;
+
+      @include media-breakpoint-up($size-bp) {
+        height: $node-card-height;
+      }
+    }
+
+    &.hidden {
+      border: $line;
+      border-style: dashed;
+      background-color: transparent;
+
+      .node-view-wrapper {
+        opacity: 0;
+      }
+    }
   }
 }
 </style>