fixed card sizes and update Library views

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;
-    flex-wrap: wrap;
+    display: grid;
+    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;
-      $marg: 4.6875rem;
-      width: 100%;
-      height: $node-card-height;
+      max-width: 100%;
+      height: $node-card-height-sm;
 
-      @include media-breakpoint-only(md) {
-        max-width: calc(50% - #{($marg / 2)});
-        margin-right: $marg;
-
-        &:nth-of-type(2n) {
-          margin-right: 0;
-        }
+      @include media-breakpoint-up($size-bp) {
+        max-width: $node-card-width;
+        height: $node-card-height;
       }
 
-      @include media-breakpoint-up(lg) {
-        margin-right: $marg;
-        max-width: calc(33.33% - #{(($marg * 2) / 3)});
-
-        &:nth-of-type(3n) {
-          margin-right: 0;
-        }
+      &.preview {
+        top: -2rem;
       }
     }
   }

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>
-foreignObject {
-  width: $node-card-width;
-  height: $node-card-height;
-  x: var(--x);
-  y: var(--y);
-  transform-origin: var(--x) var(--y);
-  transform: rotate(var(--r)) translate(-#{$node-card-width / 2}, -#{$node-card-height / 2});
-  overflow: visible;
+<style lang="scss">
+#library-map {
+  foreignObject {
+    width: $node-card-width-sm;
+    height: $node-card-height-sm;
+    x: var(--x);
+    y: var(--y);
+    transform-origin: var(--x) var(--y);
+    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 {
-  border: $line;
-  border-style: dashed;
-  background-color: transparent;
+    @include media-breakpoint-up($size-bp) {
+      width: $node-card-width;
+    }
 
-  ::v-deep .node-view-wrapper {
-    opacity: 0;
+    &-wrapper {
+      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>