77 lines
2.7 KiB
Vue
77 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fit,minmax(280px,max-content))] font-nunito justify-center">
|
|
<a
|
|
v-for="(event, index) in events"
|
|
:key="index"
|
|
href="#"
|
|
@click.prevent="makeVisible(event)"
|
|
class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group max-w-[400px]"
|
|
>
|
|
<img
|
|
:src="event.image"
|
|
class="flex-none w-full h-auto transition-all transition-linear duration-200 [clip-path:circle(200%_at_50%_-90%)] group-hover:[clip-path:circle(200%_at_50%_-102%)]"
|
|
/>
|
|
<div class="p-6 flex flex-col grow">
|
|
<h2 class="font-arvo flex-none text-primary text-sm md:text-base" v-text="event.name"></h2>
|
|
<div class="flex items-baseline text-sm">
|
|
<calendar-icon class="w-3 h-3 text-secondary"></calendar-icon>
|
|
<span class="text-sm font-semibold text-gray-800 ml-2" v-text="event.dates"></span>
|
|
</div>
|
|
<div class="grow text-sm leading-normal text-gray-800 mt-3" v-text="event.excerpt"></div>
|
|
<div class="bg-primaryfg text-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3">Zur Veranstaltung</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent"> </popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref} from 'vue';
|
|
import CalendarIcon from './components/icons/CalendarIcon.vue';
|
|
import Popup from './components/Popup.vue';
|
|
|
|
const props = defineProps({
|
|
indexUrl: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
singleUrl: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
registerUrl: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
event: {
|
|
required: false,
|
|
type: String,
|
|
},
|
|
});
|
|
|
|
const events = ref([]);
|
|
const visibleEvent = ref(null);
|
|
|
|
async function reloadEvents() {
|
|
const results = await axios.get('/api/form');
|
|
events.value = results.data.data;
|
|
if (props.event) {
|
|
visibleEvent.value = events.value.find((event) => event.slug === props.event);
|
|
}
|
|
}
|
|
|
|
function makeVisible(event) {
|
|
window.history.pushState({}, '', props.singleUrl.replace(':slug', event.slug));
|
|
visibleEvent.value = event;
|
|
}
|
|
|
|
function hideEvent() {
|
|
window.history.pushState({}, '', props.indexUrl);
|
|
visibleEvent.value = null;
|
|
}
|
|
reloadEvents();
|
|
</script>
|