notkaramel/ECSESS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Council page layout update

Browse Source
This commit is contained in:
Antoine Phan
2025-07-19 16:36:29 -04:00
parent 50c07509d9
commit bbf148704b
3 changed files with 80 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/CouncilCard.svelte
View File

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

56
src/components/CouncilCardPopUp.svelte
View File

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

100
src/routes/council/+page.svelte
View File

@@ -2,30 +2,34 @@
import CouncilCardPopUp from 'components/CouncilCardPopUp.svelte'; import CouncilCardPopUp from 'components/CouncilCardPopUp.svelte';
import Section from 'components/Section.svelte'; import Section from 'components/Section.svelte';
import CardCouncil from 'components/CouncilCard.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(); 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 years = ['U4', 'U3', 'U2', 'U1', 'U0'];
let vps: CouncilMember[] = [];
let ureps: CouncilMember[] = []; ureps.sort((a, b) => {
// svelte-ignore non_reactive_update const aYear = years.findIndex((year) => a.position.includes(year));
let president: CouncilMember | null = null; const bYear = years.findIndex((year) => b.position.includes(year));
data.members.forEach((member: CouncilMember) => { return aYear - bYear;
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));
return aYear - bYear;
});
} else if (member.position.includes('President')) {
president = member;
}
}); });
let selectedMember = $state<CouncilMember | null>(null); let selectedMember = $state<CouncilMember | null>(null);
@@ -33,11 +37,6 @@
function handleViewProfile(member: CouncilMember) { function handleViewProfile(member: CouncilMember) {
selectedMember = member; selectedMember = member;
} }
console.log(ureps);
// svelte-ignore state_referenced_locally
// console.log(selectedMember);
</script> </script>
<title> ECSESS council </title> <title> ECSESS council </title>
@@ -45,39 +44,39 @@
<p class="page-title">Meet the council!</p> <p class="page-title">Meet the council!</p>
<div> <div>
<h1>Our Student Council</h1> <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> </div>
</Section> </Section>
<Section> <Section>
<div class="president"> <div>
{#if president} <CardCouncil
<CardCouncil name={president.name}
name={president.name} position={president.position}
position={president.position} image={president.image}
image={president.image} onViewProfile={() => handleViewProfile(president!)}
onViewProfile={() => handleViewProfile(president!)} />
/>
{/if}
</div> </div>
<div class="flex justify-center"> <div class="flex justify-center">
<div class="flex flex-row flex-wrap justify-center gap-10 p-4 align-middle"> <div class="flex flex-row flex-wrap justify-center gap-10 p-4 align-middle">
{#each vps as councilMember} {#each vps as vp}
<CardCouncil <CardCouncil
name={councilMember.name} name={vp.name}
position={councilMember.position} position={vp.position}
image={councilMember.image} image={vp.image}
onViewProfile={() => handleViewProfile(councilMember)} onViewProfile={() => handleViewProfile(vp)}
/> />
{/each} {/each}
{#each ureps as councilMember} {#each ureps as urep}
<CardCouncil <CardCouncil
name={councilMember.name} name={urep.name}
position={councilMember.position} position={urep.position}
image={councilMember.image} image={urep.image}
onViewProfile={() => handleViewProfile(councilMember)} onViewProfile={() => handleViewProfile(urep)}
/> />
{/each} {/each}
</div> </div>
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
{#if selectedMember} {#if selectedMember}
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -97,12 +96,3 @@
{/if} {/if}
</div> </div>
</Section> </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> -->