Council page layout update

src/components/CouncilCard.svelte

@@ -2,48 +2,16 @@
 	let { onViewProfile, name, position, image } = $props();
 	import placeholder from 'assets/placeholderAvatar.png';
 	import Button from 'components/Button.svelte';
-
 </script>
 
-<style lang="postcss">
-	@reference '../app.css';
-
-  .card {
-    @apply flex items-center gap-4 bg-transparent p-6 rounded-lg text-ecsess-200 max-w-[400px];
-  }
-
-  .profile-img {
-    @apply size-[100px] rounded-full overflow-hidden; 
-  }
-
-  .profile-img :global(img) {
-    @apply object-cover size-full;
-  }
-
-  .info {
-    @apply flex-1;
-  }
-
-  .name {
-    @apply text-xl font-bold;
-  }
-
-  .role {
-    @apply text-ecsess-200 mb-2;
-  }
-</style>
-
-<div class="card">
-	<div class="profile-img">
-		<img src={image || placeholder} alt={name} />
+<div class="text-ecsess-200 flex max-w-lg items-center gap-6 justify-around rounded-lg bg-transparent p-4">
+	<!-- Profile picture -->
+	<div class="size-32 overflow-hidden rounded-full">
+		<img src={image || placeholder} alt={name} class="size-full object-cover" />
 	</div>
-  <div class="info">
-    <div class="name">{name}</div>
-    <div class="role">{position}</div>
-    <!-- <button class="button" onclick={onViewProfile}>View Profile</button> -->
+	<div class="text-left">
+		<div class="text-xl font-bold">{name}</div>
+		<div class="text-ecsess-200 mb-2">{position}</div>
 		<Button onclick={onViewProfile}>View Profile</Button>
 	</div>
 </div>
-
-
-

src/components/CouncilCardPopUp.svelte

@@ -1,41 +1,33 @@
 <script>
 	let { name, position, email, positionDescription, yearProgram, image } = $props();
 	import placeholder from 'assets/placeholderAvatar.png';
+	import { slide } from 'svelte/transition';
 </script>
 
-<style lang="postcss">
-	@reference '../app.css';
-
-	.card {
-		@apply flex items-center gap-4 bg-transparent rounded-2xl p-6 text-ecsess-800 border-transparent max-w-[450px] h-[250px];
-		background-image: linear-gradient(to bottom right, #E8FFD9, #97C583);
-	}
-
-	.profile-img {
-		@apply w-32 h-32 shadow-md overflow-hidden rounded-lg;
-	}
-
-	.profile-img :global(img) {
-		@apply w-full h-full object-cover;
-	}
-
-	.name {
-    @apply text-xl font-bold;
-  	}
-
-</style>
-
-<div class="card">
-	<div class="avatar-container justify-left">
-		<div class="profile-img justify-center">
-			<img src={image || placeholder} alt={name} />
+<div
+	class="text-ecsess-800 m-4 flex h-[275px] max-w-[564px]
+			items-center gap-3 rounded-2xl border-transparent bg-transparent
+			bg-[linear-gradient(to_bottom_right,_#E8FFD9,_#97C583)] p-6"
+	transition:slide
+>
+	<!-- AVATAR -->
+	<div class="avatar">
+		<div class="size-42 justify-center place-self-center-safe overflow-hidden rounded-lg shadow-md">
+			<img src={image || placeholder} alt={name} class="h-full w-full object-cover" />
 		</div>
-	<span class="yearProgram text-sm justify-center"> {yearProgram} </span>
+		<span class="yearProgram justify-center text-sm"> Major: {yearProgram} </span>
 	</div>
+	<!-- CONTENT -->
 	<div class="content">
-		<p class="name">{name} </p>
-		<p class="py-2 text-base">{position}</p>
-		<p class="pb-2 text-xs">{positionDescription}</p>
-		<a href="mailto:{email}" class="py-2 text-sm underline">{email}</a>
+		<p class="my-2 text-3xl font-bold">{name}</p>
+		<hr class="hr border-ecsess-600 border-1 border-dashed" />
+		<div class="my-2">
+			<p>{position}</p>
+			<p>
+				Email: <a href="mailto:{email}" class="py-2 text-base underline">{email}</a>
+			</p>
+		</div>
+		<hr class="hr border-ecsess-600 border-1 border-dashed" />
+		<p class="py-2 text-base">{positionDescription}</p>
 	</div>
 </div>

src/routes/council/+page.svelte

@@ -2,42 +2,41 @@
 	import CouncilCardPopUp from 'components/CouncilCardPopUp.svelte';
 	import Section from 'components/Section.svelte';
 	import CardCouncil from 'components/CouncilCard.svelte';
-	import type CouncilMember from 'utils/schemas';
+	import type { CouncilMember } from '$lib/schemas';
+	import { fly, slide } from 'svelte/transition';
 
 	let { data } = $props();
+
+	// Get members by 3 main categories:
+	// - Preseident
+	// - VPs + Equity and Mental Health Officer
+	// - UReps
+	let president: CouncilMember = data.members.filter((member: CouncilMember) =>
+		member.position.includes('President')
+	)[0];
+
+	let vps: CouncilMember[] = data.members.filter(
+		(member: CouncilMember) =>
+			member.position.includes('VP') || member.position.includes('Equity and Mental Health Officer')
+	);
+
+	let ureps: CouncilMember[] = data.members.filter((member: CouncilMember) =>
+		member.position.includes('Representative')
+	);
+
 	let years = ['U4', 'U3', 'U2', 'U1', 'U0'];
-	let vps: CouncilMember[] = [];
-	let ureps: CouncilMember[] = [];
-	// svelte-ignore non_reactive_update
-	let president: CouncilMember | null = null;
-	data.members.forEach((member: CouncilMember) => {
-		if (
-			member.position.includes('VP') ||
-			member.position.includes('Equity and Mental Health Officer')
-		) {
-			vps.push(member);
-		} else if (member.position.includes('Representative')) {
-			ureps.push(member);
+
 	ureps.sort((a, b) => {
-				const aYear = years.findIndex((y) => a.position.includes(y));
-				const bYear = years.findIndex((y) => b.position.includes(y));
+		const aYear = years.findIndex((year) => a.position.includes(year));
+		const bYear = years.findIndex((year) => b.position.includes(year));
 		return aYear - bYear;
 	});
-		} else if (member.position.includes('President')) {
-			president = member;
-		}
-	});
 
 	let selectedMember = $state<CouncilMember | null>(null);
 
 	function handleViewProfile(member: CouncilMember) {
 		selectedMember = member;
 	}
-
-	console.log(ureps);
-
-	// svelte-ignore state_referenced_locally
-	// console.log(selectedMember);
 </script>
 
 <title> ECSESS council </title>
@@ -45,39 +44,39 @@
 	<p class="page-title">Meet the council!</p>
 	<div>
 		<h1>Our Student Council</h1>
-		<img src={data.councilGoofyPic.url} alt="ECSESS Council, but we are goofy" />
+		<img src={data.councilGoofyPic.url} alt="ECSESS Council, but we are goofy" transition:fly />
 	</div>
 </Section>
 <Section>
-	<div class="president">
-		{#if president}
+	<div>
 		<CardCouncil
 			name={president.name}
 			position={president.position}
 			image={president.image}
 			onViewProfile={() => handleViewProfile(president!)}
 		/>
-		{/if}
 	</div>
+
 	<div class="flex justify-center">
 		<div class="flex flex-row flex-wrap justify-center gap-10 p-4 align-middle">
-			{#each vps as councilMember}
+			{#each vps as vp}
 				<CardCouncil
-					name={councilMember.name}
-					position={councilMember.position}
-					image={councilMember.image}
-					onViewProfile={() => handleViewProfile(councilMember)}
+					name={vp.name}
+					position={vp.position}
+					image={vp.image}
+					onViewProfile={() => handleViewProfile(vp)}
 				/>
 			{/each}
-			{#each ureps as councilMember}
+			{#each ureps as urep}
 				<CardCouncil
-					name={councilMember.name}
-					position={councilMember.position}
-					image={councilMember.image}
-					onViewProfile={() => handleViewProfile(councilMember)}
+					name={urep.name}
+					position={urep.position}
+					image={urep.image}
+					onViewProfile={() => handleViewProfile(urep)}
 				/>
 			{/each}
 		</div>
+
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		{#if selectedMember}
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -97,12 +96,3 @@
 		{/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> -->