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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/+layout.svelte
View File

@@ -2,9 +2,7 @@
import '../app.css';
import Navbar from 'components/NavBar.svelte';
import Footer from 'components/Footer.svelte';
import { injectAnalytics } from '@vercel/analytics/sveltekit';
injectAnalytics({ mode: 'auto' });
let { children } = $props();
</script>

15
src/routes/+page.svelte
View File

@@ -4,6 +4,7 @@
import RichText from 'components/RichText.svelte';
import OhSchedule from 'components/OHSchedule.svelte';
import Link from 'components/Link.svelte';
import { fade } from 'svelte/transition';
/** loading things from the server side */
let { data } = $props();
@@ -17,10 +18,14 @@
<!-- ECSESS Introduction -->
<Section>
<div class="place-self-center-safe md:grid md:gap-6 lg:grid-cols-3">
<div class="m-8 w-full place-self-center md:place-content-around lg:col-span-1">
<div class="flex h-1/2 flex-col items-center justify-center text-center">
<p class="page-title">What is ECSESS?</p>
<div class="place-self-center md:grid md:grid-cols-1 md:gap-6 lg:grid-cols-3">
<div class="place-self-center md:place-content-around lg:col-span-1 lg:m-8">
<div class="flex h-1/2 flex-col place-content-center text-center">
<p>
{#each 'We are ECSESS!' as char, i}
<span class="page-title" in:fade|global={{ delay: 200 + i * 100, duration: 800 }}>{char}</span>
{/each}
</p>
<div class="p-4">
<RichText value={data.description} />
</div>
@@ -35,7 +40,7 @@
</div>
</div>
</div>
<div class="m-4 place-content-around lg:col-span-2 lg:mx-12 lg:my-0">
<div class="m-2 place-content-around lg:col-span-2 lg:mx-12 lg:my-0">
<img
src={data.councilPhoto}
alt="ECSESS Council"

28
src/routes/council/+page.svelte
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>