From b70337e949240a767483b78c8c27da357f406ba1 Mon Sep 17 00:00:00 2001
From: Minh Vo <minh.vo2@mail.mcgill.ca>
Date: Tue, 23 Dec 2025 22:54:40 -0500
Subject: [PATCH] create flip card to separate description from event image

---
 src/app.css                            |  41 +++
 src/components/event/EventBlock.svelte | 360 ++++++++++++++-----------
 2 files changed, 242 insertions(+), 159 deletions(-)

diff --git a/src/app.css b/src/app.css
index d1dd4f3..627bef5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -204,3 +204,44 @@ h2 {
 		@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);
+	}
+
diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte
index 3548c1a..c6c7a44 100644
--- a/src/components/event/EventBlock.svelte
+++ b/src/components/event/EventBlock.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	//import { PortableText } from '@portabletext/svelte';
 	import { CalendarDays, MapPin, Link as LinkIcon, FilePen, CalendarPlus } from '@lucide/svelte';
 	import RichText from 'components/RichText.svelte';
 
@@ -15,6 +14,8 @@
 		isPastEvent = false
 	} = $props();
 
+	let showDescription = $state(false);
+
 	// Function to generate .ics file for calendar
 	const addToCalendar = () => {
 		const eventDate = new Date(date);
@@ -48,181 +49,222 @@
 		document.body.removeChild(link);
 		URL.revokeObjectURL(url);
 	};
+
+	const flipCard = (e: MouseEvent) => {
+		showDescription = !showDescription;
+	};
+	
 </script>
 
+
 <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"
->
-	<!-- Image Container with Gradient Overlay -->
-	<div class="relative h-64 overflow-hidden">
-		{#if thumbnail}
-			<img
-				class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-				src={thumbnail}
-				alt={eventTitle}
-			/>
-		{:else if eventCategory?.[0] === 'social'}
-			<img
-				class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-				src="/Social.jpg"
-				alt="Social Event"
-			/>
-		{:else if eventCategory?.[0] === 'technical'}
-			<img
-				class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-				src="/Technical.jpg"
-				alt="Technical Event"
-			/>
-		{:else if eventCategory?.[0] === 'professional'}
-			<img
-				class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-				src="/Professional.jpg"
-				alt="Professional Event"
-			/>
-		{:else if eventCategory?.[0] === 'academic'}
-			<img
-				class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-				src="/Academic.jpg"
-				alt="Academic Event"
-			/>
-		{:else}
-			<img
-				class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-				src="/ECSESS.png"
-				alt="ECSESS 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>
+	class="
+	flip-box 
+	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"
+	>
+	<!--Flip Card container-->
+	<div class="flip-box-inner" class:show-back={showDescription}>
+		<!--Front Side-->
+		<div class="flip-box-front">
+			<!-- Image Container with Gradient Overlay -->
+			<div class="relative h-100 overflow-hidden ">
+			{#if thumbnail}
+				<img
+					class="h-full w-full object-cover "
+					src={thumbnail}
+					alt={eventTitle}
+				/>
+			{:else if eventCategory?.[0] === 'social'}
+				<img
+					class="h-full w-full object-cover "
+					src="/Social.jpg"
+					alt="Social Event"
+				/>
+			{:else if eventCategory?.[0] === 'technical'}
+				<img
+					class="h-full w-full object-cover "
+					src="/Technical.jpg"
+					alt="Technical Event"
+				/>
+			{:else if eventCategory?.[0] === 'professional'}
+				<img
+					class="h-full w-full object-cover "
+					src="/Professional.jpg"
+					alt="Professional Event"
+				/>
+			{:else if eventCategory?.[0] === 'academic'}
+				<img
+					class="h-full w-full object-cover "
+					src="/Academic.jpg"
+					alt="Academic Event"
+				/>
 			{: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>
+				<img
+					class="h-full w-full object-cover "
+					src="/ECSESS.png"
+					alt="ECSESS Event"
+				/>
 			{/if}
 
-			{#if eventCategory && eventCategory.length > 0}
-				<div class="flex flex-wrap justify-end gap-2">
-					{#each eventCategory as category}
-						<span
-							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} />
+			<!-- Gradient overlay -->
+			<div
+				class="absolute inset-0 bg-gradient-to-b from-transparent via-ecsess-800/30 to-ecsess-950"
+			></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 -->
-		<div class="bg-ecsess-900/40 mb-6 space-y-3 rounded-xl p-4">
-			<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>
+				{#if eventCategory && eventCategory.length > 0}
+					<div class="flex flex-wrap justify-end gap-2">
+						{#each eventCategory as category}
+							<span
+								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>
 
-			<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"
-				>
-					<MapPin class="h-5 w-5 text-white" strokeWidth={2.5} />
+			<!-- Event Title Overlay -->
+			<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>
+			<!-- 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 class="flex-1">
-					<p class="text-ecsess-50 text-sm font-semibold">
-						{location ?? 'TBA'}
-					</p>
+
+				<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"
+					>
+						<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>
-
-		<!-- Action Buttons -->
-		{#if !isPastEvent}
-			<div class="space-y-2">
-				<!-- Add to Calendar Button -->
+			<div class="flex justify-center pb-6">
 				<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"
+					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}
 				>
-					<CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
-					Add to Calendar
-				</button>
+					View Details
+			</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>
-		{/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>