Responsive navbar, council card and popup update for accessibility, remove analytics from Vercel
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user