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

Avatar and council member page update

Browse Source
This commit is contained in:
Antoine Phan
2025-07-19 18:41:11 -04:00
parent 3366cebc99
commit ded6eb6c9a
3 changed files with 64 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Avatar.svelte
View File

@@ -0,0 +1,15 @@
<script lang="ts">
// Reference: https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton-svelte/src/components/Avatar/Avatar.svelte
import { Avatar } from '@skeletonlabs/skeleton-svelte';
// Note: size, font, etc., are styled with TailwindCSS classes
let { name, size, src }: {name: string, size: string, src: string} = $props();
</script>
<Avatar
{name}
{src}
font={"text-xl text-ecsess-black"}
{size}
background="bg-ecsess-400"
imageBase="object-cover w-full h-full"
/>

11
src/components/CouncilCard.svelte
View File

@@ -2,16 +2,17 @@
let { onViewProfile, name, position, image } = $props();
import placeholder from 'assets/placeholderAvatar.png';
import Button from 'components/Button.svelte';
import Avatar from 'components/Avatar.svelte';
</script>
<div class="text-ecsess-200 flex max-w-lg items-center gap-6 justify-around rounded-lg bg-transparent p-4">
<div class="text-ecsess-200 flex max-w-md items-center gap-6 justify-between p-3">
<!-- Profile picture -->
<div class="size-32 overflow-hidden rounded-full">
<img src={image || placeholder} alt={name} class="size-full object-cover" />
<div>
<Avatar {name} size={"size-26 md:size-32"} src={image}/>
</div>
<div class="text-left">
<div class="text-xl font-bold">{name}</div>
<div class="text-ecsess-200 mb-2">{position}</div>
<div class="text-xl md:text-2xl font-bold">{name}</div>
<div class="text-sm md:text-base text-ecsess-200 mb-2 italic">{position}</div>
<Button onclick={onViewProfile}>View Profile</Button>
</div>
</div>

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

@@ -16,8 +16,7 @@
)[0];
let vps: CouncilMember[] = data.members.filter(
(member: CouncilMember) =>
member.position.includes('VP') || member.position.includes('Equity and Mental Health Officer')
(member: CouncilMember) => member.position.includes('VP') || member.position.includes('Equity')
);
let ureps: CouncilMember[] = data.members.filter((member: CouncilMember) =>
@@ -43,11 +42,16 @@
<Section>
<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" transition:fly />
<img
src={data.councilGoofyPic.url}
alt="ECSESS Council, but we are goofy"
class="ring-ecsess-400 shadow-ecsess-black mb-8 place-self-center rounded-lg shadow-2xl ring-4 lg:w-[90%]"
transition:fly
/>
</div>
</Section>
<Section>
<h1 class="border-b-ecsess-200 w-full border-b-2 lg:w-1/2">Our Student Council!</h1>
<div>
<CardCouncil
name={president.name}
@@ -57,8 +61,13 @@
/>
</div>
<div class="flex justify-center">
<div class="flex flex-row flex-wrap justify-center gap-10 p-4 align-middle">
<div class="flex flex-col justify-center">
<h2
class="border-b-ecsess-200 w-full place-self-center-safe border-b-2 border-dashed md:w-1/2 lg:w-1/3"
>
Vice Presidents
</h2>
<div class="flex flex-row flex-wrap justify-baseline gap-10 p-4 align-middle md:justify-center">
{#each vps as vp}
<CardCouncil
name={vp.name}
@@ -67,6 +76,14 @@
onViewProfile={() => handleViewProfile(vp)}
/>
{/each}
</div>
<h2
class="border-b-ecsess-200 w-full place-self-center-safe border-b-2 border-dashed md:w-1/2 lg:w-1/3"
>
Year Representative
</h2>
<div class="flex flex-row flex-wrap justify-baseline gap-10 p-4 align-middle md:justify-center">
{#each ureps as urep}
<CardCouncil
name={urep.name}
@@ -76,7 +93,7 @@
/>
{/each}
</div>
</div>
<!-- svelte-ignore a11y_no_static_element_interactions -->
{#if selectedMember}
<!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -94,5 +111,4 @@
/>
</div>
{/if}
</div>
</Section>