From dcdfb4ac6a8803ddfd4571efe809902aea6fb23b Mon Sep 17 00:00:00 2001
From: Minh Vo <minh.vo2@mail.mcgill.ca>
Date: Fri, 26 Dec 2025 17:28:32 -0500
Subject: [PATCH] update the event flip card + add remodel scrollbar

---
 src/app.css                                  | 102 ++++++++----
 src/components/event/EventBlock.svelte       | 162 +++++++++++--------
 src/components/event/EventTabsContent.svelte |  25 ++-
 src/lib/schemas.ts                           |  13 +-
 4 files changed, 188 insertions(+), 114 deletions(-)

diff --git a/src/app.css b/src/app.css
index 627bef5..ed81920 100644
--- a/src/app.css
+++ b/src/app.css
@@ -206,42 +206,78 @@ h2 {
 }
 
 .flip-box {
-		height: 100%;
-		width: 100%;
-		perspective: 1000px; /* Remove this if you don't want the 3D effect */
-	}
+	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-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);
-	}
+@keyframes rotate-and-back {
+    0% { transform: rotateY(0); }
+    50% { transform: rotateY(15deg); }
+    100% { transform: rotateY(0); }
+}
 
-	.flip-box-front {
-		z-index: 2;
-		transform: rotateY(0deg);
-	}
+.flip-box:hover .flip-box-front{
+    animation: rotate-and-back 0.3s ease-in-out;
+}
 
-	.flip-box-back {
-		transform: rotateY(180deg); 
-	}
+.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);
+	transform-style: preserve-3d;
+}
 
-	.show-back {
-		transform: rotateY(180deg);
-	}
+.flip-box-back {
+	transform: rotateY(180deg); 
+}
+
+.show-back {
+	transform: rotateY(180deg);
+}
+
+/* Scrollbar Styles */
+*::-webkit-scrollbar {
+  height: 3px;
+  width: 2px;
+}
+*::-webkit-scrollbar-track {
+  border-radius: 3px;
+  background-color: var(--color-ecsess-50);
+}
+
+*::-webkit-scrollbar-track:hover {
+  background-color: var(--color-ecsess-200);
+}
+
+*::-webkit-scrollbar-track:active {
+  background-color: var(--color-ecsess-200);
+}
+
+*::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: var(--color-ecsess-800);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-ecsess-500);
+}
+
+*::-webkit-scrollbar-thumb:active {
+  background-color: var(--color-ecsess-500);
+}
 
diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte
index c6c7a44..1415f41 100644
--- a/src/components/event/EventBlock.svelte
+++ b/src/components/event/EventBlock.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { CalendarDays, MapPin, Link as LinkIcon, FilePen, CalendarPlus } from '@lucide/svelte';
+	import { CalendarDays, MapPin, Link as LinkIcon, FilePen, CalendarPlus, ExternalLink as ExternalLinkIcon } from '@lucide/svelte';
 	import RichText from 'components/RichText.svelte';
 
 	let {
@@ -8,10 +8,11 @@
 		location,
 		eventDescription,
 		thumbnail,
-		registrationLink,
-		paymentLink,
+		registrationLink, //[LinkType]
+		paymentLink, //[LinkType]
+		generalLink, //[LinkType]
 		eventCategory,
-		isPastEvent = false
+		isPastEvent = false,
 	} = $props();
 
 	let showDescription = $state(false);
@@ -59,18 +60,24 @@
 
 <div
 	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-box
+	group relative flex flex-col overflow-hidden rounded-2xl  transition-all duration-300 hover:-translate-y-3 "
 	>
 	<!--Flip Card container-->
-	<div class="flip-box-inner" class:show-back={showDescription}>
+	<div class="flip-box-inner rounded-2xl " class:show-back={showDescription}>
 		<!--Front Side-->
-		<div class="flip-box-front">
+		<div class="flip-box-front bg-ecsess-950 shadow-ecsess-950/50 rounded-2xl">
+			<!--Flip button-->
+			<div
+				class="
+				absolute inset-0 z-10 cursor-pointer rounded-2xl bg-transparent"
+				onclick={flipCard}
+			></div>
 			<!-- Image Container with Gradient Overlay -->
-			<div class="relative h-100 overflow-hidden ">
+			<div class="relative h-80 overflow-hidden rounded-2xl ">
 			{#if thumbnail}
 				<img
-					class="h-full w-full object-cover "
+					class="h-full w-full object-cover  "
 					src={thumbnail}
 					alt={eventTitle}
 				/>
@@ -108,8 +115,14 @@
 
 			<!-- Gradient overlay -->
 			<div
-				class="absolute inset-0 bg-gradient-to-b from-transparent via-ecsess-800/30 to-ecsess-950"
+				class="absolute inset-0 rounded-2xl  bg-gradient-to-b from-transparent via-ecsess-800/30 to-ecsess-950"
 			></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>
 			<!-- Badges -->
 			<div class="absolute top-0 right-0 left-0 flex items-start justify-between gap-2 p-4">
@@ -140,12 +153,7 @@
 				{/if}
 			</div>
 
-			<!-- 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">
@@ -172,52 +180,15 @@
 					</div>
 				</div>
 			</div>
-			<div class="flex justify-center pb-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 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}
-
-				</div>
-			</div>
-			<div class="px-6 pb-6">
+			<div class="relative px-6 pb-6 z-100 ">
 				<!-- 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">
+						<!-- Registration & Payment Row & Add to Calendar Button -->
+						<div class="grid sm:grid-cols-3 grid-cols-2 gap-2">
 							{#if registrationLink}
 								<a
-									href={registrationLink}
+									href={registrationLink[0].url}
 									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"
@@ -227,44 +198,93 @@
 								</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"
+									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"
 								>
 									<FilePen class="h-4 w-4" strokeWidth={2.5} />
 									Drop In
-								</div>
+								</div>	
 							{/if}
-
+							<button
+								onclick={addToCalendar}
+								class="hover:cursor-pointer bg-ecsess-700 hover:bg-ecsess-800 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>
 							{#if paymentLink}
 								<a
-									href={paymentLink}
+									href={paymentLink[0].url}
 									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"
+									class="sm:col-span-1 col-span-2 bg-ecsess-800 hover:bg-ecsess-900 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"
+									class="sm:col-span-1 col-span-2 bg-ecsess-800 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 class="pb-4">
+				<p>Click to view more</p>
+			</div>
+			</div>
+		<!-- Back Side -->
+		<div class=" flip-box-back bg-ecsess-950 shadow-ecsess-950/50 rounded-2xl">
+			<!--Flip button-->
+			<div
+				class="
+				absolute inset-0 z-10 cursor-pointer rounded-2xl bg-transparent"
+				onclick={flipCard}
+			></div>
+			<!--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="relative h-80 flex flex-1 flex-col z-20 my-2"
+			onclick={flipCard}
+			>
+				<!-- Description -->
+				<div class="text-ecsess-100 p-6 flex-1 overflow-y-auto">
+					{#if eventDescription}
+						<RichText value={eventDescription} />
+					{:else}
+						<p>No description available for this event.</p>
+					{/if}
+				</div>
 			</div>
 
+			<!-- General Links -->
+			<div class="max-h-41 relative z-20 gap-4 pb-6 flex flex-wrap w-full items-center justify-center px-6 overflow-auto">
+				{#if generalLink}
+					{#each generalLink as link}
+						<a
+							href={link.url}
+							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"
+						>
+							<ExternalLinkIcon class="h-4 w-4" strokeWidth={2.5} />
+							{link.title}
+						</a>
+					{/each}
+				{/if}
+			</div>
 		</div>
 		
 	</div>
 </div>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/components/event/EventTabsContent.svelte b/src/components/event/EventTabsContent.svelte
index e424b10..4cc1097 100644
--- a/src/components/event/EventTabsContent.svelte
+++ b/src/components/event/EventTabsContent.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import EventBlock from 'components/event/EventBlock.svelte';
-	import type { EventPost, Category } from '$lib/schemas';
+	import type { EventPost, Category, EventLinkKind, LinkType } from '$lib/schemas';
 
 	let { category, events } = $props<{
 		category: Category;
@@ -71,6 +71,19 @@
 			.filter((e: { date: string; }) => isPastEvent(e.date))
 			.sort((a: { date: string; }, b: { date: string; }) => parseEventDate(b.date).getTime() - parseEventDate(a.date).getTime())
 	);
+
+	const getPaymentLink = (e: EventPost, type: EventLinkKind ):LinkType[] | null => {
+		let generalLinks: LinkType[] = [];
+		for (const link of e.links ?? []) {
+			if (type == "general" && link.kind === "general" && link.url !== '') {
+				generalLinks.push(link);
+			}
+			else if (link.kind === type && link.url !== '') {
+				return [link];
+			}
+		}		
+		return generalLinks.length > 0 ? generalLinks : null;
+	};
 </script>
 
 <div>
@@ -90,8 +103,9 @@
 							location={e.location}
 							eventDescription={e.description}
 							thumbnail={e.thumbnail}
-							registrationLink={e.reglink}
-							paymentLink={e.paylink}
+							registrationLink={getPaymentLink(e, 'registration')}
+							paymentLink={getPaymentLink(e, 'payment')}
+							generalLink={getPaymentLink(e, 'general')}
 							eventCategory={e.category}
 							isPastEvent={false}
 						/>
@@ -115,8 +129,9 @@
 							location={e.location}
 							eventDescription={e.description}
 							thumbnail={e.thumbnail}
-							registrationLink={e.reglink}
-							paymentLink={e.paylink}
+							registrationLink={getPaymentLink(e, 'registration')}
+							paymentLink={getPaymentLink(e, 'payment')}
+							generalLink={getPaymentLink(e, 'general')}
 							eventCategory={e.category}
 							isPastEvent={true}
 						/>
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
index 311e675..c8e8bfc 100644
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -10,15 +10,18 @@ export type EventPost = {
 	location: string;
 	thumbnail: string;
 	category: string;
-	links: [{
-		title: string,
-		kind: string, // payment, registration, general (enum `kind`)
-		url: string
-	}],
+	links: LinkType[];
 };
 
 export type Category = 'allEvents' | 'academic' | 'professional' | 'social' | 'technical';
 
+export type LinkType = {
+		title: string;
+		kind: EventLinkKind;
+		url: string;
+};
+export type EventLinkKind = 'payment' | 'registration' | 'general';
+
 export type FAQ = {
 	question: string;
 	answer: string;