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

Reponsive homepage: Office hours and sponsors

Browse Source
This commit is contained in:
Antoine Phan
2025-08-04 14:06:59 -04:00
parent 775d13fee2
commit 4b8f7887e8
2 changed files with 51 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/OHSchedule.svelte
View File

@@ -1,45 +1,45 @@
<script lang="ts"> <script lang="ts">
import type { OfficeHour } from '$lib/schemas'; import type { OfficeHour } from '$lib/schemas';
function parseTime(timeStr: string): number { function parseTime(timeStr: string): number {
let timeRegexMatch = timeStr.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/i); let timeRegexMatch = timeStr.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/i);
if (!timeRegexMatch) return 0; if (!timeRegexMatch) return 0;
let hours = parseInt(timeRegexMatch[1], 10); let hours = parseInt(timeRegexMatch[1], 10);
let minutes = parseInt(timeRegexMatch[2] || '0', 10); let minutes = parseInt(timeRegexMatch[2] || '0', 10);
let period = timeRegexMatch[3]; let period = timeRegexMatch[3];
if (period.toUpperCase() === 'PM' && hours !== 12) hours += 12; if (period.toUpperCase() === 'PM' && hours !== 12) hours += 12;
if (period.toUpperCase() === 'AM' && hours === 12) hours = 0; if (period.toUpperCase() === 'AM' && hours === 12) hours = 0;
return Number(hours * 60 + minutes); // total minutes since midnight return Number(hours * 60 + minutes); // total minutes since midnight
} }
let { allOhs }: { allOhs: OfficeHour[] } = $props(); let { allOhs }: { allOhs: OfficeHour[] } = $props();
let sortedOHs = allOhs.sort((a, b) => { let sortedOHs = allOhs.sort((a, b) => {
return parseTime(a.startTime) - parseTime(b.startTime); return parseTime(a.startTime) - parseTime(b.startTime);
}); });
</script> </script>
<div class="grid min-w-2/3 grid-cols-5 gap-2 place-self-center"> <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-2 place-self-center place-content-center">
{#each ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] as day} {#each ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] as day}
<div>
<div> <p class="text-center text-xl">{day}</p>
<p class="text-center text-xl">{day}</p> {#each sortedOHs.filter((OH) => OH.day == day) as OH}
{#each sortedOHs.filter((OH) => OH.day == day) as OH} <div
<div class="bg-ecsess-200 text-ecsess-black m-2 grid h-28 lg:h-36 max-w-md
class=" min-w-50 grid-cols-1 grid-rows-[2fr_4fr_3fr]
bg-ecsess-200 text-ecsess-black m-2 grid h-36 max-w-md min-w-50 place-content-center rounded-xl p-3 text-center"
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 class="border-b-ecsess-600 border-b-2 text-lg">{OH.startTime} - {OH.endTime}</p> </p>
<p class="text-ecsess-800 place-self-center text-2xl font-bold"> <p class="text-ecsess-800 place-self-center font-extrabold text-lg md:text-xl lg:text-2xl">
{OH.member.name.split(' ')[0]} {OH.member.name.split(' ')[0]}
</p> </p>
<p class="text-sm italic">{OH.member.position}</p> <p class="text-sm italic lg:text-base">{OH.member.position}</p>
</div> </div>
{/each} {/each}
</div> </div>
{/each} {/each}
</div> </div>

31
src/routes/+page.svelte
View File

@@ -49,34 +49,31 @@
<!-- Office Hours Calendar --> <!-- Office Hours Calendar -->
<Section black> <Section black>
<div class="w-full"> <div class="w-full">
<div class=""> <h1 id="office-hours">Office Hours</h1>
<h1 id="office-hours">Office Hours</h1> <OhSchedule allOhs={data.allOHs} />
<OhSchedule allOhs={data.allOHs} />
</div>
</div> </div>
</Section> </Section>
<Section> <Section>
<div class="grid grid-cols-2 w-full max-w-[80vw] gap-24"> <div class="grid w-full max-w-[80vw] grid-cols-1 gap-12 lg:gap-24 lg:grid-cols-2">
<div>
<div class="col-span-1">
<h1>FAQs</h1> <h1>FAQs</h1>
<hr class="hr py-4 border-dashed w-full"> <hr class="hr w-full border-dashed py-4" />
<FaqAccordion entries={data.faqs} /> <FaqAccordion entries={data.faqs} />
</div> </div>
<div id="sponsors" class="col-span-1"> <div id="sponsors" class="mb-24">
<h1>Sponsors</h1> <h1>Sponsors</h1>
<hr class="hr py-4 border-dashed w-full"> <hr class="hr w-full border-dashed py-4" />
<div class="flex gap-12"> <div class="flex gap-12">
{#each data.sponsors as sponsor} {#each data.sponsors as sponsor}
<div class="max-h-20"> <div class="max-h-20">
<Link href={sponsor.url}> <Link href={sponsor.url}>
<img src={sponsor.logo} alt="{sponsor.name} Logo" class="max-h-24"/> <img src={sponsor.logo} alt="{sponsor.name} Logo" class="max-h-24" />
</Link> </Link>
</div> </div>
{/each} {/each}
</div> </div>
</div> </div>
</div> </div>
</Section> </Section>