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>

56
src/components/CouncilCardPopUp.svelte
View File

@@ -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>
<span class="yearProgram text-sm justify-center"> {yearProgram} </span>
<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 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>