mobilizon/js/src/components/Event/MultiCard.vue
Thomas Citharel ea4116c207
Refactor GraphQL queries and event cards
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2021-11-02 19:50:37 +01:00

47 lines
1 KiB
Vue

<template>
<div class="multi-card-event">
<event-card
class="event-card"
v-for="event in events"
:event="event"
:key="event.uuid"
/>
</div>
</template>
<script lang="ts">
import { IEvent } from "@/types/event.model";
import { PropType } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator";
import EventCard from "./EventCard.vue";
@Component({
components: {
EventCard,
},
})
export default class MultiCard extends Vue {
@Prop({ type: Array as PropType<IEvent[]>, required: true })
events!: IEvent[];
}
</script>
<style lang="scss" scoped>
.multi-card-event {
display: grid;
grid-auto-rows: 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
// @media (min-width: 400px) {
// grid-template-columns: repeat(2, 1fr);
// }
// @media (min-width: 800px) {
// grid-template-columns: repeat(4, 1fr);
// }
.event-card {
height: 100%;
display: flex;
flex-direction: column;
}
}
</style>