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

Add div wrapper

This commit is contained in:
philipp lang 2024-02-03 00:31:06 +01:00
parent 3f8687f951
commit b137e873f8
1 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/Eventindex.ce.vue
View File

@ -1,24 +1,29 @@
<template>
<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="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>
<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>
</a>
</div>
<popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent"></popup>
<popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent">
</popup>
</div>
</template>
<script setup>