Responsive navbar, council card and popup update for accessibility, remove analytics from Vercel

This commit is contained in:
Antoine Phan
2025-08-25 02:26:48 -04:00
parent 15fe42d046
commit 32c2970574
10 changed files with 105 additions and 65 deletions

View File

@@ -3,7 +3,8 @@
import Section from 'components/Section.svelte';
import CardCouncil from 'components/CouncilCard.svelte';
import type { CouncilMember } from '$lib/schemas';
import { fly, slide } from 'svelte/transition';
import { fly } from 'svelte/transition';
import Button from 'components/Button.svelte';
let { data } = $props();
@@ -32,7 +33,6 @@
});
let selectedMember = $state<CouncilMember | null>(null);
function handleViewProfile(member: CouncilMember) {
selectedMember = member;
}
@@ -40,12 +40,13 @@
<title> ECSESS council </title>
<Section>
<p class="page-title">Meet the council!</p>
<div>
<div class="flex flex-col place-items-center">
<p class="page-title">Meet the council!</p>
<img
src={data.councilGoofyPic.url}
alt="ECSESS Council, but we are goofy"
class="ring-ecsess-400 shadow-ecsess-black mb-8 place-self-center rounded-lg shadow-2xl ring-4 lg:w-[90%]"
class="ring-ecsess-400 shadow-ecsess-black mb-8 rounded-lg shadow-2xl ring-4 lg:w-[90%]"
transition:fly
/>
</div>
@@ -61,13 +62,13 @@
/>
</div>
<div class="flex flex-col justify-center">
<div class="grid place-items-center">
<h2
class="border-b-ecsess-200 w-full place-self-center-safe border-b-2 border-dashed md:w-1/2 lg:w-1/3"
>
Vice Presidents
</h2>
<div class="flex flex-row flex-wrap justify-baseline gap-10 p-4 align-middle md:justify-center">
<div class="grid gap-2 py-8 md:grid-cols-2 lg:grid-cols-3">
{#each vps as vp}
<CardCouncil
name={vp.name}
@@ -77,13 +78,12 @@
/>
{/each}
</div>
<h2
class="border-b-ecsess-200 w-full place-self-center-safe border-b-2 border-dashed md:w-1/2 lg:w-1/3"
>
Year Representative
</h2>
<div class="flex flex-row flex-wrap justify-baseline gap-10 p-4 align-middle md:justify-center">
<div class="grid gap-2 py-8 md:grid-cols-2 lg:grid-cols-3">
{#each ureps as urep}
<CardCouncil
name={urep.name}
@@ -94,13 +94,8 @@
{/each}
</div>
</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)}
>
<div class="fixed inset-0 z-10 flex flex-col items-center justify-center bg-black/70">
<CouncilCardPopUp
name={selectedMember.name}
position={selectedMember.position}
@@ -109,6 +104,9 @@
yearProgram={selectedMember.yearProgram}
image={selectedMember.image}
/>
<div transition:fly>
<Button onclick={() => (selectedMember = null)}>Close</Button>
</div>
</div>
{/if}
</Section>