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

Rework the error page and OH schedule

Browse Source
This commit is contained in:
Antoine Phan
2026-01-25 01:47:13 -05:00
parent f9fbca9531
commit eb22c73f11
6 changed files with 42 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/RichText.svelte
View File

@@ -4,6 +4,6 @@
let { value } = $props(); let { value } = $props();
</script> </script>
<div class="flex flex-col justify-center-safe typography"> <div class="typography flex flex-col justify-center-safe">
<PortableText {value} /> <PortableText {value} />
</div> </div>

18
src/components/homepage/AffiliatedGroups.svelte
View File

@@ -70,7 +70,7 @@
{#each groups as group, i (group.name)} {#each groups as group, i (group.name)}
{@const Icon = group.icon} {@const Icon = group.icon}
<article <article
class="bg-ecsess-950 border border-ecsess-800 flex flex-col overflow-hidden rounded-lg text-left" class="bg-ecsess-950 border-ecsess-800 flex flex-col overflow-hidden rounded-lg border text-left"
aria-labelledby={`group-${i}-title`} aria-labelledby={`group-${i}-title`}
> >
<div class="flex flex-1 flex-col p-7 md:p-8"> <div class="flex flex-1 flex-col p-7 md:p-8">
@@ -100,28 +100,24 @@
<ul class="mb-5 list-none space-y-2 ps-0 text-base md:text-lg" role="list"> <ul class="mb-5 list-none space-y-2 ps-0 text-base md:text-lg" role="list">
{#each group.features as feature (feature)} {#each group.features as feature (feature)}
<li class="flex items-center gap-2"> <li class="flex items-center gap-2">
<span class="bg-ecsess-500 h-1.5 w-1.5 shrink-0 rounded-full" aria-hidden="true"></span> <span class="bg-ecsess-500 h-1.5 w-1.5 shrink-0 rounded-full" aria-hidden="true"
></span>
<span class="text-ecsess-100 font-medium">{feature}</span> <span class="text-ecsess-100 font-medium">{feature}</span>
</li> </li>
{/each} {/each}
</ul> </ul>
<!-- Links --> <!-- Links -->
<div class="mt-auto flex flex-wrap items-center gap-3 border-t border-ecsess-800 pt-5"> <div class="border-ecsess-800 mt-auto flex flex-wrap items-center gap-3 border-t pt-5">
{#if group.instagram} {#if group.instagram}
<a <a
href={group.instagram} href={group.instagram}
target="_blank" target="_blank"
rel="noopener noreferrer external" rel="noopener noreferrer external"
aria-label={`Follow ${group.name} on Instagram`} aria-label={`Follow ${group.name} on Instagram`}
class="text-ecsess-300 hover:text-ecsess-100 inline-flex items-center gap-2 rounded-md border border-ecsess-700 bg-ecsess-900/50 px-4 py-2 text-base hover:bg-ecsess-800/80" class="text-ecsess-300 hover:text-ecsess-100 border-ecsess-700 bg-ecsess-900/50 hover:bg-ecsess-800/80 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-base"
> >
<Instagram <Instagram class="size-5" strokeWidth={2.5} aria-hidden="true" focusable="false" />
class="size-5"
strokeWidth={2.5}
aria-hidden="true"
focusable="false"
/>
<span>Instagram</span> <span>Instagram</span>
</a> </a>
{/if} {/if}
@@ -131,7 +127,7 @@
target="_blank" target="_blank"
rel="noopener noreferrer external" rel="noopener noreferrer external"
aria-label={`Visit ${group.name} website`} aria-label={`Visit ${group.name} website`}
class="text-ecsess-300 hover:text-ecsess-100 inline-flex items-center gap-2 rounded-md border border-ecsess-700 bg-ecsess-900/50 px-4 py-2 text-base hover:bg-ecsess-800/80" class="text-ecsess-300 hover:text-ecsess-100 border-ecsess-700 bg-ecsess-900/50 hover:bg-ecsess-800/80 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-base"
> >
<Globe class="size-5" strokeWidth={2.5} aria-hidden="true" focusable="false" /> <Globe class="size-5" strokeWidth={2.5} aria-hidden="true" focusable="false" />
<span>Website</span> <span>Website</span>

6
src/components/officehour/OHBlock.svelte
View File

@@ -9,14 +9,14 @@
</script> </script>
<div <div
class="bg-ecsess-100 text-ecsess-900 hover:bg-ecsess-200 border-ecsess-300 grid h-full place-content-center rounded-md border text-center shadow-md transition-all hover:shadow-lg" class="bg-ecsess-100 text-ecsess-900 hover:bg-ecsess-200 grid h-full place-content-center rounded-md border-transparent text-center shadow-md transition-all hover:shadow-lg"
> >
<p class="text-base font-extrabold lg:text-lg"> <p class="text-base leading-tight font-semibold">
{officeHour.member.name.split(' ')[0]} {officeHour.member.name.split(' ')[0]}
</p> </p>
{#if !isShortBlock} {#if !isShortBlock}
<p class="text-ecsess-700 text-xs italic"> <p class="text-ecsess-700 mt-0.5 text-[11px] leading-tight opacity-90">
{shortenPosition(officeHour.member.position)} {shortenPosition(officeHour.member.position)}
</p> </p>
{/if} {/if}

12
src/components/officehour/OHSchedule.svelte
View File

@@ -114,10 +114,14 @@
</script> </script>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div class="mx-auto max-w-7xl min-w-[800px]"> <div class="border-ecsess-500 bg-ecsess-900 mx-auto max-w-7xl min-w-[800px] border-t pt-2">
<!-- Header row --> <!-- Header row -->
<div class="mb-2 grid gap-0" style:grid-template-columns="80px repeat(5, 1fr)"> <div class="mb-2 grid gap-0" style:grid-template-columns="80px repeat(5, 1fr)">
<div class="text-ecsess-50 px-2 text-center text-base font-semibold">Time</div> <div
class="text-ecsess-50 bg-ecsess-900 sticky left-0 z-20 px-2 text-center text-base font-semibold"
>
Time
</div>
{#each DAYS as day} {#each DAYS as day}
<div class="text-ecsess-50 px-2 text-center text-base font-semibold md:text-lg"> <div class="text-ecsess-50 px-2 text-center text-base font-semibold md:text-lg">
{day} {day}
@@ -135,7 +139,9 @@
<!-- Time column (only for first day) --> <!-- Time column (only for first day) -->
{#if dayIndex === 0} {#if dayIndex === 0}
<div class="border-ecsess-500 relative border-b-2"> <div
class="border-ecsess-500 bg-ecsess-900 sticky left-0 z-20 border-b-2"
>
{#each timeSlots as timeSlot} {#each timeSlots as timeSlot}
{@const isHourMark = timeSlot % 60 === 0} {@const isHourMark = timeSlot % 60 === 0}
<div <div

4
src/routes/+error.svelte
View File

@@ -18,8 +18,8 @@
</Link> </Link>
<p class="text-ecsess-200 text-lg leading-relaxed md:text-xl"> <p class="text-ecsess-200 text-lg leading-relaxed md:text-xl">
The page you are looking for is not implemented because we are too lazy to do it. But if you The page you are looking for is not implemented because we are too lazy to do it. <br />
really want to see it, you can reboot to the homepage and try again. But if you really want to see it, you can reboot to the homepage and try again.
<br /> <br />
<br /> <br />
Or even better, you can join us and help us implement it. Or even better, you can join us and help us implement it.

35
src/routes/+page.svelte
View File

@@ -22,25 +22,25 @@
class="mx-auto grid w-full max-w-[84dvw] grid-cols-1 place-items-center gap-16 py-6 lg:min-h-[75vh] lg:grid-cols-[1fr_2fr]" class="mx-auto grid w-full max-w-[84dvw] grid-cols-1 place-items-center gap-16 py-6 lg:min-h-[75vh] lg:grid-cols-[1fr_2fr]"
> >
<!-- Left: Description and Quick Links --> <!-- Left: Description and Quick Links -->
<div class="flex flex-col items-center text-center lg:items-start lg:text-left gap-2 ml-4"> <div class="ml-4 flex flex-col items-center gap-2 text-center lg:items-start lg:text-left">
<h1 class="mb-2"> <h1 class="mb-2">
{#each 'We are ECSESS!'.split('') as char, i} {#each 'We are ECSESS!'.split('') as char, i}
<span <span class="page-title" in:fade|global={{ delay: 150 + i * 60, duration: 800 }}>
class="page-title"
in:fade|global={{ delay: 150 + i * 60, duration: 800 }}
>
{char} {char}
</span> </span>
{/each} {/each}
</h1> </h1>
<p <p
class="max-w-xl text-base leading-relaxed text-ecsess-200/90 md:text-lg lg:max-w-lg lg:leading-8" class="text-ecsess-200/90 max-w-xl text-base leading-relaxed md:text-lg lg:max-w-lg lg:leading-8"
> >
<span class="font-bold text-ecsess-50">Electrical, Computer & Software Engineering Students' Society at McGill (ECSESS)</span> is the student council which helps McGill ECSE students in their <span class="text-ecsess-50 font-bold"
<span class="font-bold text-ecsess-50">academic</span>, >Electrical, Computer & Software Engineering Students' Society at McGill (ECSESS)</span
<span class="font-bold text-ecsess-50">technical</span>, >
<span class="font-bold text-ecsess-50">social</span> and is the student council which helps McGill ECSE students in their
<span class="font-bold text-ecsess-50">professional</span> progression. <span class="text-ecsess-50 font-bold">academic</span>,
<span class="text-ecsess-50 font-bold">technical</span>,
<span class="text-ecsess-50 font-bold">social</span> and
<span class="text-ecsess-50 font-bold">professional</span> progression.
</p> </p>
<div class="mt-8 w-full max-w-xl lg:max-w-none"> <div class="mt-8 w-full max-w-xl lg:max-w-none">
@@ -49,18 +49,18 @@
</div> </div>
<!-- Right: Council Photo --> <!-- Right: Council Photo -->
<div class="relative w-full lg:max-w-none flex justify-center items-center"> <div class="relative flex w-full items-center justify-center lg:max-w-none">
<div <div
class="relative overflow-hidden rounded-2xl shadow-2xl ring-1 ring-ecsess-400/20 ring-offset-2 ring-offset-ecsess-900/50 flex justify-center items-center" class="ring-ecsess-400/20 ring-offset-ecsess-900/50 relative flex items-center justify-center overflow-hidden rounded-2xl shadow-2xl ring-1 ring-offset-2"
> >
<div <div
class="absolute inset-0 rounded-2xl bg-linear-to-br from-ecsess-500/10 to-transparent" class="from-ecsess-500/10 absolute inset-0 rounded-2xl bg-linear-to-br to-transparent"
aria-hidden="true" aria-hidden="true"
></div> ></div>
<img <img
src={data.councilPhoto} src={data.councilPhoto}
alt="ECSESS Council" alt="ECSESS Council"
class="relative w-full h-full object-contain object-center" class="relative h-full w-full object-contain object-center"
/> />
</div> </div>
</div> </div>
@@ -71,7 +71,10 @@
<Section from="from-ecsess-800" to="to-ecsess-900"> <Section from="from-ecsess-800" to="to-ecsess-900">
<div class="w-full"> <div class="w-full">
<h2 class="text-2xl font-bold" id="office-hours">Lounge Office Hours</h2> <h2 class="text-2xl font-bold" id="office-hours">Lounge Office Hours</h2>
<p class="text-ecsess-200 mb-8">Come visit us in our student lounge at ENGTR 1060 to grab a coffee (free), play Mario Kart, or just chat about anything!</p> <p class="text-ecsess-200 mb-8">
Come visit us in our student lounge at ENGTR 1060 to grab a coffee (free), play Mario Kart, or
just chat about anything!
</p>
<OhSchedule allOhs={data.allOHs} /> <OhSchedule allOhs={data.allOHs} />
</div> </div>
</Section> </Section>