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

Merge pull request #22 from mcgill-ecsess/council_card_component

Browse Source 
Council Card Component
This commit is contained in:
Mel
2025-07-07 18:55:46 -04:00
committed by GitHub
parent 4f982e7ce3 3924afb72d
commit 0639f07bf7
8 changed files with 213 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Button.svelte
View File

@@ -1,3 +1,14 @@
<button class="btn bg-ecsess-600 text-ecsess-200 px-4 py-2 m-1 rounded-lg border-none hover:shadow-lg hover:shadow-ecsess-800 active:bg-ecsess-800 transition-all">
<slot />
<script lang="ts">
let { children, onclick } = $props();
</script>
<button
class="bg-ecsess-600 hover:bg-ecsess-400 active:bg-ecsess-800
m-1 inline-block rounded-lg border-none px-4
py-2 text-white transition-all
duration-200 ease-out
hover:shadow-2xl"
{onclick}
>
{@render children()}
</button>

72
src/components/CouncilCard.svelte
View File

@@ -1,31 +1,49 @@
<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';
import { Avatar } from '@skeletonlabs/skeleton-svelte';
let { onViewProfile, name, position, image } = $props();
import placeholder from 'assets/placeholderAvatar.png';
import Button from 'components/Button.svelte';
</script>
<div class="card h-1/2 max-h-1/2 w-full max-w-1/6 rounded-lg border-4 p-4">
<!-- <img class="size-4/5" src={placeholder} alt="Placeholder"> -->
<!-- <Avatar src={placeholder} {name} /> -->
{#if image}
<Avatar src={image} {name} />
{:else}
<Avatar src={placeholder} {name} />
{/if}
<p class="pb-2 text-xl font-bold">{name} - <span class="text-sm"> {yearProgram} </span></p>
<hr />
<p class="py-2 text-base font-bold">~ {position} ~</p>
<p class="underline">{email}</p>
<p class="text-sm">{positionDescription}</p>
<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>

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

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

3
src/components/NavBar.svelte
View File

@@ -12,7 +12,4 @@
<NavButton href="/events">Events</NavButton>
<NavButton href="/resources">Resources</NavButton>
<NavButton href="/join">Join ECSESS</NavButton>
{#if import.meta.env.DEV}
<NavButton href="/showroom">Componenets</NavButton>
{/if}
</nav>

7
src/routes/council/+page.server.js
View File

@@ -9,8 +9,13 @@ const query = `*[_type == "members"]{
yearProgram
}`;
const councilGoofyPicQuery = `*[_type == "homepage"]{
"url": councilGoofyPic.asset->url+"?h=1000&fm=webp"
}[0]`;
export const load = async () => {
return {
members: await getFromCMS(query)
members: await getFromCMS(query),
councilGoofyPic: await getFromCMS(councilGoofyPicQuery),
};
};

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

@@ -1,26 +1,108 @@
<script>
import CouncilCard from 'components/CouncilCard.svelte';
<script lang="ts">
import CouncilCardPopUp from 'components/CouncilCardPopUp.svelte';
import Section from 'components/Section.svelte';
// import CouncilMember from 'utils/schemas.ts';
import CardCouncil from 'components/CouncilCard.svelte';
import type CouncilMember from 'utils/schemas';
let { data } = $props();
let years = ['U4', 'U3', 'U2', 'U1', 'U0'];
let vps: CouncilMember[] = [];
let ureps: CouncilMember[] = [];
// svelte-ignore non_reactive_update
let president: CouncilMember | null = null;
data.members.forEach((member: CouncilMember) => {
if (
member.position.includes('VP') ||
member.position.includes('Equity and Mental Health Officer')
) {
vps.push(member);
} else if (member.position.includes('Representative')) {
ureps.push(member);
ureps.sort((a, b) => {
const aYear = years.findIndex((y) => a.position.includes(y));
const bYear = years.findIndex((y) => b.position.includes(y));
return aYear - bYear;
});
} else if (member.position.includes('President')) {
president = member;
}
});
let selectedMember = $state<CouncilMember | null>(null);
function handleViewProfile(member: CouncilMember) {
selectedMember = member;
}
console.log(ureps)
// svelte-ignore state_referenced_locally
// console.log(selectedMember);
</script>
<title> ECSESS council </title>
<Section>
<p class="page-title">Meet the council!</p>
<p>Group picture!</p>
<div class="flex flex-row flex-wrap items-center align-middle gap-10 p-4">
{#each data.members as councilMember}
<CouncilCard
name={councilMember.name}
position={councilMember.position}
email={councilMember.email}
positionDescription={councilMember.positionDescription}
yearProgram={councilMember.yearProgram}
image={councilMember.image}
></CouncilCard>
{/each}
<div>
<h1>Our Student Council</h1>
<img src={data.councilGoofyPic.url} alt="ECSESS Council, but we are goofy" />
</div>
</Section>
<Section>
<div class="president">
{#if president}
<CardCouncil
name={president.name}
position={president.position}
image={president.image}
onViewProfile={() => handleViewProfile(president!)}
/>
{/if}
</div>
<div class="flex justify-center">
<div class="flex flex-row flex-wrap justify-center gap-10 p-4 align-middle">
{#each vps as councilMember}
<CardCouncil
name={councilMember.name}
position={councilMember.position}
image={councilMember.image}
onViewProfile={() => handleViewProfile(councilMember)}
/>
{/each}
{#each ureps as councilMember}
<CardCouncil
name={councilMember.name}
position={councilMember.position}
image={councilMember.image}
onViewProfile={() => handleViewProfile(councilMember)}
/>
{/each}
</div>
<!-- svelte-ignore a11y_no_static_element_interactions -->
{#if selectedMember}
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
onclick={() => (selectedMember = null)}
>
<CouncilCardPopUp
name={selectedMember.name}
position={selectedMember.position}
email={selectedMember.email}
positionDescription={selectedMember.positionDescription}
yearProgram={selectedMember.yearProgram}
image={selectedMember.image}
/>
</div>
{/if}
</div>
</Section>
<!-- <CouncilCard
name={vps[1].name}
position={vps[1].position}
email={vps[1].email}
positionDescription={vps[1].positionDescription}
yearProgram={vps[1].yearProgram}
image={vps[1].image}
></CouncilCard> -->

22
src/routes/showroom/+page.svelte
View File

@@ -1,22 +0,0 @@
<script>
import Button from 'components/Button.svelte';
import ResourceCard from 'components/ResourceCard.svelte';
import Section from 'components/Section.svelte';
</script>
<title> Component showroom for developers </title>
<Section>
<Button>Button</Button>
<ResourceCard></ResourceCard>
</Section>
<Section black>
<Button>Button</Button>
<ResourceCard title="Workshop feedback">
Description of the workshop
</ResourceCard>
</Section>
<Section>
<Button>Button</Button>
</Section>

14
src/utils/schemas.ts
View File

@@ -1,8 +1,8 @@
type CouncilMember = {
name: string,
email: string,
position: string,
positionDescription: string,
image: string, // URL
yearProgram: string
export default interface CouncilMember {
name: string;
email: string;
position: string;
positionDescription: string;
image: string; // URL
yearProgram: string;
}