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"
/>

13
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>
<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>