create flip card to separate description from event image
This commit is contained in:
Minh Vo
41
src/app.css
41
src/app.css
@@ -204,3 +204,44 @@ h2 {
|
|||||||
@apply mt-3 text-sm leading-5;
|
@apply mt-3 text-sm leading-5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flip-box {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
perspective: 1000px; /* Remove this if you don't want the 3D effect */
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-box-inner {
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
transition: transform 0.8s;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.flip-box-front,.flip-box-back {
|
||||||
|
grid-area: 1/1;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-backface-visibility: hidden; /* Safari */
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
.flip-box-front {
|
||||||
|
z-index: 2;
|
||||||
|
transform: rotateY(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-box-front {
|
||||||
|
z-index: 2;
|
||||||
|
transform: rotateY(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-box-back {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-back {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
//import { PortableText } from '@portabletext/svelte';
|
|
||||||
import { CalendarDays, MapPin, Link as LinkIcon, FilePen, CalendarPlus } from '@lucide/svelte';
|
import { CalendarDays, MapPin, Link as LinkIcon, FilePen, CalendarPlus } from '@lucide/svelte';
|
||||||
import RichText from 'components/RichText.svelte';
|
import RichText from 'components/RichText.svelte';
|
||||||
|
|
||||||
@@ -15,6 +14,8 @@
|
|||||||
isPastEvent = false
|
isPastEvent = false
|
||||||
} = $props();
|
} = $props();
|
||||||
|
|
||||||
|
let showDescription = $state(false);
|
||||||
|
|
||||||
// Function to generate .ics file for calendar
|
// Function to generate .ics file for calendar
|
||||||
const addToCalendar = () => {
|
const addToCalendar = () => {
|
||||||
const eventDate = new Date(date);
|
const eventDate = new Date(date);
|
||||||
@@ -48,181 +49,222 @@
|
|||||||
document.body.removeChild(link);
|
document.body.removeChild(link);
|
||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const flipCard = (e: MouseEvent) => {
|
||||||
|
showDescription = !showDescription;
|
||||||
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="group bg-ecsess-950 shadow-ecsess-950/50 relative flex h-full flex-col overflow-hidden rounded-2xl shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
|
class="
|
||||||
>
|
flip-box
|
||||||
<!-- Image Container with Gradient Overlay -->
|
group bg-ecsess-950 shadow-ecsess-950/50 relative flex flex-col overflow-hidden rounded-2xl shadow-lg transition-all duration-300 hover:-translate-y-3 hover:shadow-2xl"
|
||||||
<div class="relative h-64 overflow-hidden">
|
>
|
||||||
{#if thumbnail}
|
<!--Flip Card container-->
|
||||||
<img
|
<div class="flip-box-inner" class:show-back={showDescription}>
|
||||||
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
<!--Front Side-->
|
||||||
src={thumbnail}
|
<div class="flip-box-front">
|
||||||
alt={eventTitle}
|
<!-- Image Container with Gradient Overlay -->
|
||||||
/>
|
<div class="relative h-100 overflow-hidden ">
|
||||||
{:else if eventCategory?.[0] === 'social'}
|
{#if thumbnail}
|
||||||
<img
|
<img
|
||||||
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
class="h-full w-full object-cover "
|
||||||
src="/Social.jpg"
|
src={thumbnail}
|
||||||
alt="Social Event"
|
alt={eventTitle}
|
||||||
/>
|
/>
|
||||||
{:else if eventCategory?.[0] === 'technical'}
|
{:else if eventCategory?.[0] === 'social'}
|
||||||
<img
|
<img
|
||||||
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
class="h-full w-full object-cover "
|
||||||
src="/Technical.jpg"
|
src="/Social.jpg"
|
||||||
alt="Technical Event"
|
alt="Social Event"
|
||||||
/>
|
/>
|
||||||
{:else if eventCategory?.[0] === 'professional'}
|
{:else if eventCategory?.[0] === 'technical'}
|
||||||
<img
|
<img
|
||||||
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
class="h-full w-full object-cover "
|
||||||
src="/Professional.jpg"
|
src="/Technical.jpg"
|
||||||
alt="Professional Event"
|
alt="Technical Event"
|
||||||
/>
|
/>
|
||||||
{:else if eventCategory?.[0] === 'academic'}
|
{:else if eventCategory?.[0] === 'professional'}
|
||||||
<img
|
<img
|
||||||
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
class="h-full w-full object-cover "
|
||||||
src="/Academic.jpg"
|
src="/Professional.jpg"
|
||||||
alt="Academic Event"
|
alt="Professional Event"
|
||||||
/>
|
/>
|
||||||
{:else}
|
{:else if eventCategory?.[0] === 'academic'}
|
||||||
<img
|
<img
|
||||||
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
class="h-full w-full object-cover "
|
||||||
src="/ECSESS.png"
|
src="/Academic.jpg"
|
||||||
alt="ECSESS Event"
|
alt="Academic Event"
|
||||||
/>
|
/>
|
||||||
{/if}
|
|
||||||
|
|
||||||
<!-- Gradient overlay -->
|
|
||||||
<div
|
|
||||||
class="via-ecsess-800/30 to-ecsess-950 absolute inset-0 bg-gradient-to-b from-transparent"
|
|
||||||
></div>
|
|
||||||
|
|
||||||
<!-- Badges -->
|
|
||||||
<div class="absolute top-0 right-0 left-0 flex items-start justify-between gap-2 p-4">
|
|
||||||
{#if isPastEvent}
|
|
||||||
<span
|
|
||||||
class="bg-ecsess-900 rounded-full px-4 py-1.5 text-xs font-bold tracking-wider text-gray-300 uppercase backdrop-blur-sm"
|
|
||||||
>
|
|
||||||
Past Event
|
|
||||||
</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<span
|
<img
|
||||||
class="bg-ecsess-400/95 rounded-full px-4 py-1.5 text-xs font-bold tracking-wider text-white uppercase backdrop-blur-sm"
|
class="h-full w-full object-cover "
|
||||||
>
|
src="/ECSESS.png"
|
||||||
Upcoming
|
alt="ECSESS Event"
|
||||||
</span>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if eventCategory && eventCategory.length > 0}
|
<!-- Gradient overlay -->
|
||||||
<div class="flex flex-wrap justify-end gap-2">
|
<div
|
||||||
{#each eventCategory as category}
|
class="absolute inset-0 bg-gradient-to-b from-transparent via-ecsess-800/30 to-ecsess-950"
|
||||||
<span
|
></div>
|
||||||
class="bg-ecsess-500/95 rounded-full px-3 py-1.5 text-xs font-bold tracking-wider text-white uppercase backdrop-blur-sm"
|
|
||||||
>
|
|
||||||
{category}
|
|
||||||
</span>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Event Title Overlay -->
|
|
||||||
<div class="absolute right-0 bottom-0 left-0 p-6">
|
|
||||||
<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
|
|
||||||
{eventTitle}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Content Section -->
|
|
||||||
<div class="flex flex-1 flex-col p-6">
|
|
||||||
<!-- Description -->
|
|
||||||
{#if eventDescription}
|
|
||||||
<div class="text-ecsess-100 mb-6 line-clamp-5">
|
|
||||||
<RichText value={eventDescription} />
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
<!-- Badges -->
|
||||||
|
<div class="absolute top-0 right-0 left-0 flex items-start justify-between gap-2 p-4">
|
||||||
|
{#if isPastEvent}
|
||||||
|
<span
|
||||||
|
class="bg-ecsess-900 rounded-full px-4 py-1.5 text-xs font-bold tracking-wider text-gray-300 uppercase backdrop-blur-sm"
|
||||||
|
>
|
||||||
|
Past Event
|
||||||
|
</span>
|
||||||
|
{:else}
|
||||||
|
<span
|
||||||
|
class="bg-ecsess-400/95 rounded-full px-4 py-1.5 text-xs font-bold tracking-wider text-white uppercase backdrop-blur-sm"
|
||||||
|
>
|
||||||
|
Upcoming
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<!-- Info Grid -->
|
{#if eventCategory && eventCategory.length > 0}
|
||||||
<div class="bg-ecsess-900/40 mb-6 space-y-3 rounded-xl p-4">
|
<div class="flex flex-wrap justify-end gap-2">
|
||||||
<div class="flex items-center gap-3">
|
{#each eventCategory as category}
|
||||||
<div
|
<span
|
||||||
class="bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full shadow-md"
|
class="bg-ecsess-500/95 rounded-full px-3 py-1.5 text-xs font-bold tracking-wider text-white uppercase backdrop-blur-sm"
|
||||||
>
|
>
|
||||||
<CalendarDays class="h-5 w-5 text-white" strokeWidth={2.5} />
|
{category}
|
||||||
</div>
|
</span>
|
||||||
<div class="flex-1">
|
{/each}
|
||||||
<p class="text-ecsess-50 text-sm font-semibold">{date}</p>
|
</div>
|
||||||
</div>
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
<!-- Event Title Overlay -->
|
||||||
<div
|
<div class="right-0 bottom-0 left-0 p-6">
|
||||||
class="bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full shadow-md"
|
<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
|
||||||
>
|
{eventTitle}
|
||||||
<MapPin class="h-5 w-5 text-white" strokeWidth={2.5} />
|
</h3>
|
||||||
|
</div>
|
||||||
|
<!-- Info Grid -->
|
||||||
|
<div class="bg-ecsess-900/40 space-y-3 rounded-xl p-4 m-5">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div
|
||||||
|
class="bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full shadow-md"
|
||||||
|
>
|
||||||
|
<CalendarDays class="h-5 w-5 text-white" strokeWidth={2.5} />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-ecsess-50 text-sm font-semibold">{date}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1">
|
|
||||||
<p class="text-ecsess-50 text-sm font-semibold">
|
<div class="flex items-center gap-3">
|
||||||
{location ?? 'TBA'}
|
<div
|
||||||
</p>
|
class="bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full shadow-md"
|
||||||
|
>
|
||||||
|
<MapPin class="h-5 w-5 text-white" strokeWidth={2.5} />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-ecsess-50 text-sm font-semibold">
|
||||||
|
{location ?? 'TBA'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="flex justify-center pb-6">
|
||||||
|
|
||||||
<!-- Action Buttons -->
|
|
||||||
{#if !isPastEvent}
|
|
||||||
<div class="space-y-2">
|
|
||||||
<!-- Add to Calendar Button -->
|
|
||||||
<button
|
<button
|
||||||
onclick={addToCalendar}
|
class="cursor-pointer rounded-full bg-ecsess-600/80 px-4 py-2 text-sm font-bold text-white shadow-md transition-all hover:bg-ecsess-700 hover:shadow-lg active:scale-95"
|
||||||
class="bg-ecsess-400 hover:bg-ecsess-500 flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
|
onclick={flipCard}
|
||||||
>
|
>
|
||||||
<CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
|
View Details
|
||||||
Add to Calendar
|
</button>
|
||||||
</button>
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Back Side -->
|
||||||
|
<div class=" flip-box-back">
|
||||||
|
<!--Event Title-->
|
||||||
|
<div class="right-0 bottom-0 left-0 p-6">
|
||||||
|
<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
|
||||||
|
{eventTitle}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="h-100 flex flex-1 flex-col p-6">
|
||||||
|
<!-- Description -->
|
||||||
|
<div class="text-ecsess-100 mb-6 flex-1 overflow-y-auto">
|
||||||
|
{#if eventDescription}
|
||||||
|
<RichText value={eventDescription} />
|
||||||
|
{:else}
|
||||||
|
<p>No description available for this event.</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<!-- Registration & Payment Row -->
|
|
||||||
<div class="grid grid-cols-2 gap-2">
|
|
||||||
{#if registrationLink}
|
|
||||||
<a
|
|
||||||
href={registrationLink}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="bg-ecsess-500 hover:bg-ecsess-600 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
|
|
||||||
>
|
|
||||||
<FilePen class="h-4 w-4" strokeWidth={2.5} />
|
|
||||||
Register
|
|
||||||
</a>
|
|
||||||
{:else}
|
|
||||||
<div
|
|
||||||
class="bg-ecsess-900 text-ecsess-200 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold"
|
|
||||||
>
|
|
||||||
<FilePen class="h-4 w-4" strokeWidth={2.5} />
|
|
||||||
Drop In
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if paymentLink}
|
|
||||||
<a
|
|
||||||
href={paymentLink}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="bg-ecsess-600 hover:bg-ecsess-700 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
|
|
||||||
>
|
|
||||||
<LinkIcon class="h-4 w-4" strokeWidth={2.5} />
|
|
||||||
Pay
|
|
||||||
</a>
|
|
||||||
{:else}
|
|
||||||
<div
|
|
||||||
class="bg-ecsess-500 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md"
|
|
||||||
>
|
|
||||||
Free!
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
<div class="px-6 pb-6">
|
||||||
|
<!-- Action Buttons -->
|
||||||
|
{#if !isPastEvent}
|
||||||
|
<div class="space-y-2">
|
||||||
|
<!-- Add to Calendar Button -->
|
||||||
|
<button
|
||||||
|
onclick={addToCalendar}
|
||||||
|
class="bg-ecsess-400 hover:bg-ecsess-500 flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
|
||||||
|
>
|
||||||
|
<CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
|
||||||
|
Add to Calendar
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Registration & Payment Row -->
|
||||||
|
<div class="grid grid-cols-2 gap-2">
|
||||||
|
{#if registrationLink}
|
||||||
|
<a
|
||||||
|
href={registrationLink}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="bg-ecsess-500 hover:bg-ecsess-600 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
|
||||||
|
>
|
||||||
|
<FilePen class="h-4 w-4" strokeWidth={2.5} />
|
||||||
|
Register
|
||||||
|
</a>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="bg-ecsess-900 text-ecsess-200 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold"
|
||||||
|
>
|
||||||
|
<FilePen class="h-4 w-4" strokeWidth={2.5} />
|
||||||
|
Drop In
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if paymentLink}
|
||||||
|
<a
|
||||||
|
href={paymentLink}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="bg-ecsess-600 hover:bg-ecsess-700 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
|
||||||
|
>
|
||||||
|
<LinkIcon class="h-4 w-4" strokeWidth={2.5} />
|
||||||
|
Pay
|
||||||
|
</a>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="bg-ecsess-500 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md"
|
||||||
|
>
|
||||||
|
Free!
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-center p-6">
|
||||||
|
<button
|
||||||
|
class="cursor-pointer rounded-full bg-ecsess-600/80 px-4 py-2 text-sm font-bold text-white shadow-md transition-all hover:bg-ecsess-700 hover:shadow-lg active:scale-95"
|
||||||
|
onclick={flipCard}
|
||||||
|
>
|
||||||
|
View Post
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user