update library mode views

src/pages/library/LibraryList.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="card-list">
-    <div class="card-list-container">
+  <div class="library-list">
+    <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 {
-  display: flex;
-  flex-wrap: wrap;
+  &-nodes-group {
+    display: flex;
+    flex-wrap: wrap;
 
-  .card {
-    margin-bottom: 3.4375rem;
-    $marg: 4.6875rem;
-    width: 100%;
-    height: 20rem;
+    .node-view {
+      margin-bottom: 3.4375rem;
+      $marg: 4.6875rem;
+      width: 100%;
+      height: 20rem;
 
-    @include media-breakpoint-only(md) {
-      max-width: calc(50% - #{($marg / 2)});
-      margin-right: $marg;
+      @include media-breakpoint-only(md) {
+        max-width: calc(50% - #{($marg / 2)});
+        margin-right: $marg;
 
-      &:nth-of-type(2n) {
-        margin-right: 0;
+        &:nth-of-type(2n) {
+          margin-right: 0;
+        }
       }
-    }
 
-    @include media-breakpoint-up(lg) {
-      margin-right: $marg;
-      max-width: calc(33.33% - #{(($marg * 2) / 3)});
+      @include media-breakpoint-up(lg) {
+        margin-right: $marg;
+        max-width: calc(33.33% - #{(($marg * 2) / 3)});
 
-      &:nth-of-type(3n) {
-        margin-right: 0;
+        &:nth-of-type(3n) {
+          margin-right: 0;
+        }
       }
     }
   }
 }
+
 </style>