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

3
src/components/CouncilCard.svelte
View File

@@ -1,11 +1,10 @@
<script>
let { onViewProfile, name, position, image } = $props();
import placeholder from 'assets/placeholderAvatar.png';
import Button from 'components/Button.svelte';
import Avatar from 'components/Avatar.svelte';
</script>
<div class="text-ecsess-200 flex max-w-md items-center gap-6 justify-between p-3">
<div class="text-ecsess-200 flex max-w-md items-center gap-6 p-3">
<!-- Profile picture -->
<div>
<Avatar {name} size={"size-26 md:size-32"} src={image}/>

25
src/components/CouncilCardPopUp.svelte
View File

@@ -1,5 +1,6 @@
<script>
let { name, position, email, positionDescription, yearProgram, image } = $props();
import { Mail, NotepadText } from '@lucide/svelte';
import placeholder from 'assets/placeholderAvatar.png';
import { slide } from 'svelte/transition';
</script>
@@ -12,22 +13,30 @@
>
<!-- AVATAR -->
<div class="avatar">
<div class="size-42 justify-center place-self-center-safe overflow-hidden rounded-lg shadow-md">
<div class="size-36 justify-center place-self-center-safe overflow-hidden rounded-lg shadow-md">
<img src={image || placeholder} alt={name} class="h-full w-full object-cover" />
</div>
<span class="yearProgram justify-center text-sm"> Major: {yearProgram} </span>
</div>
<!-- CONTENT -->
<div class="content">
<p class="my-2 text-3xl font-bold">{name}</p>
<hr class="hr border-ecsess-600 border-1 border-dashed" />
<div class="my-2">
<p>{position}</p>
<p>
Email: <a href="mailto:{email}" class="py-2 text-base underline">{email}</a>
</p>
<p class="text-2xl font-bold lg:text-3xl">{name}</p>
<p class="text-base italic">{position}</p>
</div>
<hr class="hr border-ecsess-600 border-1 border-dashed" />
<p class="py-2 text-base">{positionDescription}</p>
<div class="my-2 text-left">
<ul>
<li>
<p class="py-2 text-base">{positionDescription}</p>
</li>
<li class="flex flex-row place-items-center gap-2">
<Mail class="size-4" />
<p>
Email: <a href="mailto:{email}" class="py-2 text-base underline">{email}</a>
</p>
</li>
</ul>
</div>
</div>
</div>

54
src/components/NavBar.svelte
View File

@@ -1,15 +1,51 @@
<script>
import Button from './Button.svelte';
import NavButton from './NavButton.svelte';
import ECSESS from 'assets/ECSESS.png';
import { Menu } from '@lucide/svelte';
import { slide } from 'svelte/transition';
let menuHidden = $state(true);
</script>
<nav
class="bg-ecsess-black text-ecsess-200 mx-auto flex min-w-fit flex-wrap items-center justify-center px-4 pt-2"
>
<img src={ECSESS} alt="ECSESS Logo" class="w-20 p-2" />
<NavButton href="/">Home</NavButton>
<NavButton href="/council">Meet the council</NavButton>
<NavButton href="/events">Events</NavButton>
<NavButton href="/resources">Resources</NavButton>
<NavButton href="/join">Join ECSESS</NavButton>
<nav class="bg-ecsess-black text-ecsess-200 sticky w-screen py-1">
<div class="block md:hidden">
<div class="mx-4 flex items-center-safe justify-between">
<a href="/">
<img src={ECSESS} alt="ECSESS Logo" class="w-20 p-2" />
</a>
<button
type="button"
class="bg-ecsess-black-hover hover:bg-ecsess-800 grid size-10 place-items-center rounded-lg transition-colors ease-in-out active:bg-green-900"
onclick={() => {
menuHidden = !menuHidden;
}}
>
<Menu class="size-6 transition-transform duration-300 ease-in-out" />
</button>
</div>
{#if !menuHidden}
<div class="flex flex-col place-items-center gap-1" transition:slide>
<NavButton href="/">Home</NavButton>
<NavButton href="/council">Meet the council</NavButton>
<NavButton href="/events">Events</NavButton>
<NavButton href="/resources">Resources</NavButton>
<NavButton href="/join">Join ECSESS</NavButton>
</div>
{/if}
</div>
<div class="hidden md:block">
<div class="flex place-content-center items-end">
<a href="/">
<img src={ECSESS} alt="ECSESS Logo" class="h-12 p-2" />
</a>
<NavButton href="/">Home</NavButton>
<NavButton href="/council">Meet the council</NavButton>
<NavButton href="/events">Events</NavButton>
<NavButton href="/resources">Resources</NavButton>
<NavButton href="/join">Join ECSESS</NavButton>
</div>
</div>
</nav>

9
src/components/OHSchedule.svelte
View File

@@ -20,21 +20,20 @@
});
</script>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-2 place-self-center place-content-center">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-2">
{#each ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] as day}
<div>
<div class="items-stretch justify-self-center min-w-[80%] max-w-[16rem] md:min-w-[90%] md:max-w-[20rem]">
<p class="text-center text-xl">{day}</p>
{#each sortedOHs.filter((OH) => OH.day == day) as OH}
<div
class="bg-ecsess-200 text-ecsess-black m-2 grid h-28 lg:h-36 max-w-md
min-w-50 grid-cols-1 grid-rows-[2fr_4fr_3fr]
class="bg-ecsess-200 text-ecsess-black m-2 grid h-28 lg:h-36 grid-cols-1 grid-rows-[2fr_4fr_3fr]
place-content-center rounded-xl p-3 text-center"
>
<p class="border-b-ecsess-600 md:text-md border-b-2 text-base lg:text-lg">
{OH.startTime} - {OH.endTime}
</p>
<p class="text-ecsess-800 place-self-center font-extrabold text-lg md:text-xl lg:text-2xl">
<p class="text-ecsess-800 place-self-center font-extrabold text-lg md:text-xl lg:text-xl">
{OH.member.name.split(' ')[0]}
</p>
<p class="text-sm italic lg:text-base">{OH.member.position}</p>