123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- <template>
- <div class="h-100 position-absolute overflow-auto">
- <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-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>
|