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>
let { onViewProfile, name, position, image } = $props();
import placeholder from 'assets/placeholderAvatar.png';
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="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 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>