60 lines
1.0 KiB
Vue
60 lines
1.0 KiB
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"
|
|
@click.native="$emit('open', parent.id)"
|
|
/>
|
|
</b-card-group>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
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>
|