fixed card sizes and update Library views

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>