silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: silva:3f8687f95163c418e6c8c67d913961339a5e4426
Branches Tags
silva:master
silva:dev
..
compare: silva:e62934504bf2d33b65d0282a8d311df9cecb178e
Branches Tags
silva:master
silva:dev

No commits in common. "3f8687f95163c418e6c8c67d913961339a5e4426" and "e62934504bf2d33b65d0282a8d311df9cecb178e" have entirely different histories.
3f8687f951 ... e62934504b

2 changed files with 31 additions and 18 deletions
Show Stats Expand all files Collapse all files

9
src/Eventindex.ce.vue
View File

@ -1,9 +1,8 @@
<template>
<div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fit,minmax(280px,max-content))] font-nunito justify-center">
<div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))] font-nunito">
<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%)]" />
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">
<img :src="event.image" />
<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">
@ -18,7 +17,7 @@
</a>
</div>
<popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent"></popup>
<popup v-if="visibleEvent !== null" :event="visibleEvent" @close="hideEvent"></popup>
</template>
<script setup>

40
src/components/Popup.vue
View File

@ -1,22 +1,40 @@
<template>
<div class="flex fixed top-0 left-0 w-full h-full items-center justify-center p-6 z-40 bg-black/40"
@click.self="emit('close')">
<div
class="flex fixed top-0 left-0 w-full h-full items-center justify-center p-6 z-40 bg-black/40"
@click.self="emit('close')"
>
<div
class="rounded bg-white p-4 shadow-2xl ring-1 ring-gray-900/5 relative text-gray-600 max-w-2xl max-h-full overflow-auto">
<h2 class="font-arvo text-primary text-sm md:text-base" v-text="event.name"></h2>
class="rounded bg-white p-4 shadow-2xl ring-1 ring-gray-900/5 relative text-gray-600 max-w-2xl max-h-full overflow-auto"
>
<h2
class="font-arvo 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 flex-none text-secondary"></calendar-icon>
<span class="text-sm font-semibold font-nunito text-gray-800 ml-2" v-text="event.dates"></span>
<span
class="text-sm font-semibold font-nunito text-gray-800 ml-2"
v-text="event.dates"
></span>
</div>
<div class="text-gray-800 mt-3 font-nunito" v-html="event.description"></div>
<div
class="text-gray-800 mt-3 font-nunito"
v-html="event.description"
></div>
<div class="flex mt-3">
<a :href="registerUrl.replace(':slug', event.slug)"
class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-primaryfg focus:outline-none bg-primary text-primaryfg">
<a
href="#"
class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-primaryfg focus:outline-none bg-primary text-primaryfg"
>
Zur Anmeldung
</a>
</div>
<a class="absolute block mt-3 mr-3 right-0 top-0" href="#" @click.prevent="emit('close')">
<a
class="absolute block mt-3 mr-3 right-0 top-0"
href="#"
@click.prevent="emit('close')"
>
<close-icon class="text-gray-700 w-5 h-5"></close-icon>
</a>
</div>
@ -32,9 +50,5 @@ const props = defineProps({
event: {
required: true,
},
registerUrl: {
required: true,
type: String,
},
});
</script>