update Cards with new styles and buttons

src/pages/Library.vue

@@ -9,12 +9,12 @@
         v-for="(parent, i) in parents" :key="parent.id"
         class="main-text-container text-break"
         :style="`--n: ${i};`"
+        :class="{ 'text-blur': i !== parents.length - 1 }"
       >
         <text-card
           :id="parent.id"
           :children="parent.children"
-          :class="{ 'text-blur': i !== parents.length - 1 }"
-          class="text-card"
+          class="text-card-main"
           @open="openText" @close="closeText"
           @click.native="onMainTextClick(i)"
         />
@@ -23,12 +23,12 @@
           <text-card
             v-for="(id, j) in parent.children" :key="id"
             :id="id"
-            class="text-card text-break"
-            :class="{ 'text-blur': i !== parents.length - 1 || j !== parent.children.length - 1 }"
+            class="text-card-sub text-break"
             :style="`--n: ${j};`"
             @close="closeText(parent.id, $event)"
             @click.native="onSubTextClick(i, j)"
           />
+          <!-- :class="{ 'text-blur': i !== parents.length - 1 || j !== parent.children.length - 1 }" -->
         </section>
       </section>
     </div>
@@ -140,16 +140,13 @@ export default {
 }
 
 .main-text-container {
+  border-top: 2px solid $black;
   display: flex;
   width: 100%;
 
   > * {
     flex-basis: 50%;
   }
-
-  // &:not(:last-of-type) .sub-texts-container {
-  //   background-color: rgba($white, .5);
-  // }
 }
 
 .sub-texts-container {

src/pages/library/CardList.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="card-list">
-    <div v-for="(parents, char) in orderedParents" :key="char">
-      <h3>{{ char }}</h3>
-      <b-card-group deck>
-        <text-mini-card
-          v-for="parent in parents" :key="parent.id"
-          :id="parent.id"
-          :text-data="parent"
-          @open="$emit('open', $event)"
-        />
-      </b-card-group>
+    <div class="card-list-container">
+      <div v-for="(parents, char) in orderedParents" :key="char">
+        <h3>{{ char }}</h3>
+        <div class="text-group">
+          <text-mini-card
+            v-for="parent in parents" :key="parent.id"
+            :id="parent.id"
+            :text-data="parent"
+            @open="$emit('open', $event)"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -30,30 +32,53 @@ export default {
 
   computed: {
     ...mapGetters(['orderedParents'])
-  },
-
-  created () {
-    this.$store.dispatch('GET_TEXTS_DEPART')
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .card-list {
-  overflow: auto;
+  overflow-y: auto;
   height: 100%;
+
+  &-container {
+    overflow-x: hidden;
+    padding: 0 1.5rem;
+  }
+
+  h3 {
+    font-family: $font-family-text;
+    line-height: 1;
+    font-size: 16.5rem;
+  }
 }
 
-.card-deck {
+.text-group {
+  display: flex;
+  flex-wrap: wrap;
+
   .card {
-    flex-basis: auto;
-    @include media-breakpoint-up(md) {
-      flex-basis: 50%;
-      max-width: calc(50% - 30px);
+    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;
+
+      &:nth-of-type(2n) {
+        margin-right: 0;
+      }
     }
+
     @include media-breakpoint-up(lg) {
-      flex-basis: 33%;
-      max-width: calc(33.3% - 30px);
+      margin-right: $marg;
+      max-width: calc(33.33% - #{(($marg * 2) / 3)});
+
+      &:nth-of-type(3n) {
+        margin-right: 0;
+      }
     }
   }
 }