Refactor GraphQL queries and event cards

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/MultiCard.vue

@@ -0,0 +1,46 @@
+<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>