enfrancais-app/src/pages/library/CardList.vue

<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>
  </div>
</template>

<script>
// FIXME let events bubble
import { mapGetters } from 'vuex'

import TextMiniCard from '@/components/text/TextMiniCard'


export default {
  name: 'CardList',

  components: {
    TextMiniCard
  },

  computed: {
    ...mapGetters(['orderedParents'])
  },

  created () {
    this.$store.dispatch('GET_TEXTS_DEPART')
  }
}
</script>

<style lang="scss" scoped>
.card-list {
  overflow: auto;
  height: 100%;
}

.card-deck {
  .card {
    flex-basis: auto;
    @include media-breakpoint-up(md) {
      flex-basis: 50%;
      max-width: calc(50% - 30px);
    }
    @include media-breakpoint-up(lg) {
      flex-basis: 33%;
      max-width: calc(33.3% - 30px);
    }
  }
}
</style>