From 9b470e2ce874c768dcee3fb24af12938b1f79dd8 Mon Sep 17 00:00:00 2001
From: zzzmlssqnzzz <melissa.qian@mail.mcgill.ca>
Date: Thu, 19 Jun 2025 21:42:05 -0400
Subject: [PATCH] added interaction between card council base and card council
 component

---
 src/components/CouncilCard.svelte     | 16 ++++++------
 src/components/CouncilCardBase.svelte |  5 ++--
 src/routes/council/+page.svelte       | 37 +++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/src/components/CouncilCard.svelte b/src/components/CouncilCard.svelte
index 3567354..b711c99 100644
--- a/src/components/CouncilCard.svelte
+++ b/src/components/CouncilCard.svelte
@@ -21,11 +21,13 @@
 		align-items: center;
 		gap: 1rem;
 		background-color:transparent;
-		padding: 1.5rem;
 		border-radius: 20px;
+		padding:1.5rem; 
 		color:  #0A3D2A;
-		background-color: #E8FFD9;
-		max-width: 500px;
+		border-color:transparent;
+		background-image: linear-gradient(to bottom right, #E8FFD9, #97C583);
+		max-width: 450px;
+		height: 250px;
 	}
 
 	.profile-img{
@@ -35,13 +37,11 @@
 
 	.profile-img :global(img) {
     object-fit: cover;
-    width: 100%;
-    height: 100%;
+    max-width: 100%;
   }
-
 </style>
 
-<div class="card h-1/2 max-h-1/2 w-full max-w-1/6 rounded-lg border-4 p-4">
+<div class="card">
 	<!-- <img class="size-4/5" src={placeholder} alt="Placeholder"> -->
 	<!-- <Avatar src={placeholder} {name} /> -->
 	<div class="avatar-container justify-left">
@@ -61,6 +61,6 @@
 		<p class="pb-2 text-xs">{positionDescription}</p>
 		<hr />
 
-		<p class="py-2 text-sm underline">{email}</p>
+		<a href="mailto:{email}" class="py-2 text-sm underline">{email}</a>
 	</div>
 </div>
diff --git a/src/components/CouncilCardBase.svelte b/src/components/CouncilCardBase.svelte
index a2c5c9e..ab6ccb8 100644
--- a/src/components/CouncilCardBase.svelte
+++ b/src/components/CouncilCardBase.svelte
@@ -1,7 +1,8 @@
 <script>
-  let { name, position, image } = $props();
+  let { onViewProfile, name, position, image } = $props();
   import placeholder from 'assets/placeholderAvatar.png';
   import { Avatar } from '@skeletonlabs/skeleton-svelte';
+
 </script>
 
 <style>
@@ -68,7 +69,7 @@
   <div class="info">
     <div class="name">{name}</div>
     <div class="role">{position}</div>
-    <a href="#" class="button">View Profile</a>
+    <button class="button" onclick={onViewProfile}>View Profile</button>
   </div>
 </div>
 
diff --git a/src/routes/council/+page.svelte b/src/routes/council/+page.svelte
index d08ca5b..614f1a9 100644
--- a/src/routes/council/+page.svelte
+++ b/src/routes/council/+page.svelte
@@ -27,6 +27,15 @@
 			president = member
 		}
 	})
+
+	let selectedMember = $state<CouncilMember | null>(null);
+
+	function handleViewProfile(member: CouncilMember) {
+		selectedMember = member;
+	}
+
+	// svelte-ignore state_referenced_locally
+		console.log(selectedMember)
 </script>
 
 <title> ECSESS council </title>
@@ -41,6 +50,7 @@
 				name={president.name}
 				position={president.position}
 				image={president.image}
+				onViewProfile={() => handleViewProfile(president!)}
 			></CouncilCardBase>
 		{/if}
 	</div>
@@ -51,6 +61,7 @@
 				name={councilMember.name}
 				position={councilMember.position}
 				image={councilMember.image}
+				onViewProfile={() => handleViewProfile(councilMember)}
 			></CardCouncilBase>
 		{/each}
 		{#each ureps as councilMember}
@@ -58,8 +69,34 @@
 			name={councilMember.name}
 			position={councilMember.position}
 			image={councilMember.image}
+			onViewProfile={() => handleViewProfile(councilMember)}
 		></CardCouncilBase>
 		{/each}
 		</div>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		{#if selectedMember}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div class="fixed inset-0 bg-black/60 flex justify-center items-center z-50"
+		onclick={() => (selectedMember = null)}
+		>
+				<CouncilCard
+					name={selectedMember.name}
+					position={selectedMember.position}
+					email={selectedMember.email}
+					positionDescription={selectedMember.positionDescription}
+					yearProgram={selectedMember.yearProgram}
+					image={selectedMember.image}
+			/>
+		</div>
+		{/if}
 	</div>
 </Section>
+
+<!-- <CouncilCard
+		name={vps[1].name}
+		position={vps[1].position}
+		email={vps[1].email}
+		positionDescription={vps[1].positionDescription}
+		yearProgram={vps[1].yearProgram}
+		image={vps[1].image}
+	></CouncilCard> -->