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

small style fix

Browse Source
This commit is contained in:
zzzmlssqnzzz
2025-07-07 18:50:19 -04:00
parent 258d1fd483
commit 2bf2d849fe
4 changed files with 98 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/CouncilCard.svelte
View File

@@ -1,50 +1,49 @@
<script> <script>
/** let { onViewProfile, name, position, image } = $props();
* Schemas for Council Members: import placeholder from 'assets/placeholderAvatar.png';
* { import Button from 'components/Button.svelte';
* email,
* name,
* position,
* positionDescription,
* yearProgram,
* image // CDN URL from Sanity CMS
* }
*/
let { name, position, email, positionDescription, yearProgram, image } = $props();
import placeholder from 'assets/placeholderAvatar.png';
</script> </script>
<style lang="postcss"> <style lang="postcss">
@reference '../app.css'; @reference '../app.css';
.card { .card {
@apply flex items-center gap-4 bg-transparent rounded-2xl p-6 text-ecsess-800 border-transparent max-w-[450px] h-[250px]; @apply flex items-center gap-4 bg-transparent p-6 rounded-lg text-ecsess-200 max-w-[400px];
background-image: linear-gradient(to bottom right, #E8FFD9, #97C583); }
}
.profile-img { .profile-img {
@apply w-32 h-32 shadow-md overflow-hidden rounded-lg; @apply size-[100px] rounded-full overflow-hidden;
} }
.profile-img :global(img) { .profile-img :global(img) {
@apply w-full h-full object-cover; @apply object-cover size-full;
} }
.info {
@apply flex-1;
}
.name {
@apply text-xl font-bold;
}
.role {
@apply text-ecsess-200 mb-2;
}
</style> </style>
<div class="card"> <div class="card">
<!-- <img class="size-4/5" src={placeholder} alt="Placeholder"> --> <div class="profile-img">
<!-- <Avatar src={placeholder} {name} /> --> <img src={image || placeholder} alt={name} />
<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 class="content">
<p class="pb-2 text-xl font-bold">{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>
</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>

49
src/components/CouncilCardBase.svelte
View File

@@ -1,49 +0,0 @@
<script>
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>
<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>

54
src/components/CouncilCardPopUp.svelte Normal file
View File

@@ -0,0 +1,54 @@
<script>
/**
* Schemas for Council Members:
* {
* email,
* name,
* position,
* positionDescription,
* yearProgram,
* image // CDN URL from Sanity CMS
* }
*/
let { name, position, email, positionDescription, yearProgram, image } = $props();
import placeholder from 'assets/placeholderAvatar.png';
</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">
<!-- <img class="size-4/5" src={placeholder} alt="Placeholder"> -->
<!-- <Avatar src={placeholder} {name} /> -->
<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 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>
</div>
</div>

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

@@ -1,8 +1,7 @@
<script lang="ts"> <script lang="ts">
import CouncilCard from 'components/CouncilCard.svelte'; import CouncilCardPopUp from 'components/CouncilCardPopUp.svelte';
import Section from 'components/Section.svelte'; import Section from 'components/Section.svelte';
import CardCouncilBase from 'components/CouncilCardBase.svelte'; import CardCouncil from 'components/CouncilCard.svelte';
import CouncilCardBase from 'components/CouncilCardBase.svelte';
import type CouncilMember from 'utils/schemas'; import type CouncilMember from 'utils/schemas';
let { data } = $props(); let { data } = $props();
@@ -52,31 +51,31 @@
<Section> <Section>
<div class="president"> <div class="president">
{#if president} {#if president}
<CouncilCardBase <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!)}
></CouncilCardBase> />
{/if} {/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 councilMember}
<CardCouncilBase <CardCouncil
name={councilMember.name} name={councilMember.name}
position={councilMember.position} position={councilMember.position}
image={councilMember.image} image={councilMember.image}
onViewProfile={() => handleViewProfile(councilMember)} onViewProfile={() => handleViewProfile(councilMember)}
></CardCouncilBase> />
{/each} {/each}
{#each ureps as councilMember} {#each ureps as councilMember}
<CardCouncilBase <CardCouncil
name={councilMember.name} name={councilMember.name}
position={councilMember.position} position={councilMember.position}
image={councilMember.image} image={councilMember.image}
onViewProfile={() => handleViewProfile(councilMember)} onViewProfile={() => handleViewProfile(councilMember)}
></CardCouncilBase> />
{/each} {/each}
</div> </div>
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -86,7 +85,7 @@
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
onclick={() => (selectedMember = null)} onclick={() => (selectedMember = null)}
> >
<CouncilCard <CouncilCardPopUp
name={selectedMember.name} name={selectedMember.name}
position={selectedMember.position} position={selectedMember.position}
email={selectedMember.email} email={selectedMember.email}