rename library mode views

2021-06-10 17:55:11 +02:00
parent 95d4b6f66f
commit 635df76702
3 changed files with 0 additions and 0 deletions
@@ -0,0 +1,84 @@
+<template>
+  <div class="card-list">
+    <div class="card-list-container">
+      <div v-for="(parents, char) in orderedTextsDepart" :key="char">
+        <h3>{{ char }}</h3>
+        <div class="text-group">
+          <node-view
+            v-for="parent in parents" :key="parent.id"
+            :node="parent"
+            mode="card"
+            @open-node="$emit('open-node', $event)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// FIXME let events bubble
+import { mapGetters } from 'vuex'
+
+import { NodeView } from '@/components/nodes'
+
+
+export default {
+  name: 'CardList',
+
+  components: {
+    NodeView
+  },
+
+  computed: {
+    ...mapGetters(['orderedTextsDepart'])
+  },
+
+  created () {
+    this.$store.dispatch('INIT_LIBRARY_LIST')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-list {
+  overflow-y: auto;
+  height: 100%;
+
+  h3 {
+    font-family: $font-family-text;
+    line-height: 1;
+    font-size: 16.5rem;
+  }
+}
+
+.text-group {
+  display: flex;
+  flex-wrap: wrap;
+
+  .card {
+    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) {
+      margin-right: $marg;
+      max-width: calc(33.33% - #{(($marg * 2) / 3)});
+
+      &:nth-of-type(3n) {
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>