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

Merge pull request #37 from mcgill-ecsess/responsive-navbar

Browse Source
This commit is contained in:
ECSESS VP Tech Dev
2025-08-25 02:33:31 -04:00
committed by GitHub
parent 06b3d9cb55 71fb247752
commit 9acc9b1ae1
10 changed files with 105 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
bun.lock
View File

@@ -5,24 +5,23 @@
"name": "ecsess-website",
"dependencies": {
"@lucide/svelte": "^0.539.0",
"@sanity/client": "^7.5.0",
"@vercel/analytics": "^1.5.0",
"@sanity/client": "^7.8.2",
},
"devDependencies": {
"@portabletext/svelte": "^3.0.0",
"@skeletonlabs/skeleton": "^3.1.3",
"@skeletonlabs/skeleton-svelte": "^1.2.3",
"@sveltejs/adapter-auto": "^6.0.1",
"@sveltejs/kit": "^2.21.3",
"@sveltejs/vite-plugin-svelte": "^5.1.0",
"@tailwindcss/vite": "^4.1.8",
"prettier": "^3.5.3",
"@skeletonlabs/skeleton": "^3.1.7",
"@skeletonlabs/skeleton-svelte": "^1.3.1",
"@sveltejs/adapter-auto": "^6.0.2",
"@sveltejs/kit": "^2.27.3",
"@sveltejs/vite-plugin-svelte": "^5.1.1",
"@tailwindcss/vite": "^4.1.11",
"prettier": "^3.6.2",
"prettier-plugin-svelte": "^3.4.0",
"prettier-plugin-tailwindcss": "^0.6.12",
"svelte": "^5.33.18",
"svelte-check": "^4.2.1",
"tailwindcss": "^4.1.8",
"typescript": "^5.8.3",
"prettier-plugin-tailwindcss": "^0.6.14",
"svelte": "^5.38.1",
"svelte-check": "^4.3.1",
"tailwindcss": "^4.1.11",
"typescript": "^5.9.2",
"vite": "^6.3.5",
},
},
@@ -212,8 +211,6 @@
"@types/node": ["@types/node@24.0.15", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-oaeTSbCef7U/z7rDeJA138xpG3NuKc64/rZ2qmUFkFJmnMsAPaluIifqyWd8hSSMxyP9oie3dLAqYPblag9KgA=="],
"@vercel/analytics": ["@vercel/analytics@1.5.0", "", { "peerDependencies": { "@remix-run/react": "^2", "@sveltejs/kit": "^1 || ^2", "next": ">= 13", "react": "^18 || ^19 || ^19.0.0-rc", "svelte": ">= 4", "vue": "^3", "vue-router": "^4" }, "optionalPeers": ["@remix-run/react", "@sveltejs/kit", "next", "react", "svelte", "vue", "vue-router"] }, "sha512-MYsBzfPki4gthY5HnYN7jgInhAZ7Ac1cYDoRWFomwGHWEX7odTEzbtg9kf/QSo7XEsEAqlQugA6gJ2WS2DEa3g=="],
"@zag-js/accordion": ["@zag-js/accordion@1.18.4", "", { "dependencies": { "@zag-js/anatomy": "1.18.4", "@zag-js/core": "1.18.4", "@zag-js/dom-query": "1.18.4", "@zag-js/types": "1.18.4", "@zag-js/utils": "1.18.4" } }, "sha512-lwLq38eSJs6zC9HfmvPxK3LbWSjJJm8Lg+yu8jYHOQlMwWymJAXM2yaLGVqz2HBDwv4jJCqUQ+sYFPEpuITfTw=="],
"@zag-js/anatomy": ["@zag-js/anatomy@1.18.4", "", {}, "sha512-t1vWjWOnjmslHCpDx7wQTHTuT7DRs4H3rqvL2Mq+uLKMzbkLfjBMBVU70L23WdRKkdhCML5lzoH+EXcEn2PQ1g=="],

3
package.json
View File

@@ -32,7 +32,6 @@
"type": "module",
"dependencies": {
"@lucide/svelte": "^0.539.0",
"@sanity/client": "^7.8.2",
"@vercel/analytics": "^1.5.0"
"@sanity/client": "^7.8.2"
}
}

2
src/app.css
View File

@@ -26,7 +26,7 @@ h2 {
}
.page-title {
@apply py-4 text-3xl font-bold md:text-4xl lg:text-6xl;
@apply my-6 text-3xl font-bold md:text-4xl lg:text-6xl;
}
.typography {

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}/>

23
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 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" />
<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>
</div>
<hr class="hr border-ecsess-600 border-1 border-dashed" />
<p class="py-2 text-base">{positionDescription}</p>
</li>
</ul>
</div>
</div>
</div>

42
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"
>
<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>

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"

26
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>
<div class="flex flex-col place-items-center">
<p class="page-title">Meet the council!</p>
<div>
<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>