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

Things seems like they are working

Browse Source
This commit is contained in:
Antoine Phan
2025-10-13 23:10:37 -04:00
parent 9052b02e56
commit 95e53b5153
16 changed files with 110 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Button.svelte
View File

@@ -3,11 +3,11 @@
</script>
<button
class="bg-ecsess-600 hover:bg-ecsess-400 active:bg-ecsess-800
inline-block rounded-lg border-none px-4
class="bg-ecsess-600 hover:bg-ecsess-500 active:bg-ecsess-700
inline-block rounded-md border-none px-4
py-2 text-white transition-all
duration-200 ease-out
hover:shadow-2xl"
hover:shadow-xl hover:scale-105"
{onclick}
>
{@render children()}

4
src/components/council/CouncilCard.svelte
View File

@@ -4,14 +4,14 @@
import Avatar from 'components/council/Avatar.svelte';
</script>
<div class="text-ecsess-200 flex max-w-md items-center gap-6 p-3">
<div class="text-ecsess-100 flex max-w-md items-center gap-6 p-3">
<!-- Profile picture -->
<div>
<Avatar {name} size={"size-26 md:size-32"} src={image}/>
</div>
<div class="text-left">
<div class="text-xl md:text-2xl font-bold">{name}</div>
<div class="text-sm md:text-base text-ecsess-200 mb-2 italic">{position}</div>
<div class="text-sm md:text-base text-ecsess-150 mb-2 italic">{position}</div>
<Button onclick={onViewProfile}>View Profile</Button>
</div>
</div>

8
src/components/council/CouncilCardPopUp.svelte
View File

@@ -7,16 +7,16 @@
<div
class="text-ecsess-800 m-4 flex h-[275px] max-w-[564px]
items-center gap-3 rounded-2xl border-transparent bg-transparent
bg-[linear-gradient(to_bottom_right,_#E8FFD9,_#97C583)] p-6"
items-center gap-3 rounded-md border-transparent bg-transparent
bg-gradient-to-br from-ecsess-50 to-ecsess-300 p-6"
transition:slide
>
<!-- AVATAR -->
<div class="avatar">
<div class="size-36 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-md 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>
<span class="yearProgram justify-center text-sm"> {yearProgram} </span>
</div>
<!-- CONTENT -->
<div class="content">

24
src/components/event/EventBlock.svelte
View File

@@ -14,10 +14,10 @@
} = $props();
</script>
<div class="mx-auto w-[100%] rounded-2xl bg-[#E8FFD9] p-5 text-[#0A3D2A] lg:w-[64%] lg:max-w-3xl">
<div class="rounded-[20px] bg-[#A6D6B8]">
<div class="mx-auto w-[100%] rounded-md bg-ecsess-50 p-5 text-ecsess-800 lg:w-[64%] lg:max-w-3xl">
<div class="rounded-md bg-ecsess-150">
<div
class="grid h-[200px] place-items-center overflow-hidden rounded-[16px] bg-[#5CAF95]"
class="grid h-[200px] place-items-center overflow-hidden rounded-md bg-ecsess-400"
aria-label="Event banner"
>
{#if thumbnail}
@@ -43,28 +43,28 @@
</p>
{#if eventDescription}
<div class="mx-auto max-w-[75ch] leading-relaxed text-[#5E8174]">
<div class="mx-auto max-w-[75ch] leading-relaxed text-ecsess-700">
<PortableText value={eventDescription} />
</div>
{/if}
<div class="mt-[6px] grid gap-4 md:grid-cols-2">
<div class="grid gap-[10px] rounded-2xl bg-[#CCE7BA] px-4 py-[14px]">
<div class="flex items-center gap-2 text-[#0A3D2A]">
<div class="grid gap-[10px] rounded-md bg-ecsess-100 px-4 py-[14px]">
<div class="flex items-center gap-2 text-ecsess-800">
<CalendarDays class="shrink-0" strokeWidth={2.5} />
<span class="font-bold tracking-[0.2px]">Datetime:</span>
<p class="m-0 text-left">{date}</p>
</div>
<div class="flex items-center gap-2 text-[#0A3D2A]">
<div class="flex items-center gap-2 text-ecsess-800">
<MapPin class="shrink-0" strokeWidth={2.5} />
<span class="font-bold tracking-[0.2px]">Location:</span>
<p class="m-0 text-left">{location ?? 'TBA'}</p>
</div>
</div>
<div class="grid gap-[10px] rounded-2xl bg-[#CCE7BA] px-4 py-[14px]">
<div class="flex items-center gap-2 text-[#0A3D2A]">
<div class="grid gap-[10px] rounded-md bg-ecsess-100 px-4 py-[14px]">
<div class="flex items-center gap-2 text-ecsess-800">
<FilePen class="shrink-0" strokeWidth={2.5} />
<span class="font-bold tracking-[0.2px]">Registration:</span>
{#if registrationLink}
@@ -72,7 +72,7 @@
href={registrationLink}
target="_blank"
rel="noopener noreferrer"
class="text-left text-[#0A3D2A] underline-offset-4 hover:underline"
class="text-left text-ecsess-800 underline-offset-4 hover:underline"
>
Register Here
</a>
@@ -81,7 +81,7 @@
{/if}
</div>
<div class="flex items-center gap-2 text-[#0A3D2A]">
<div class="flex items-center gap-2 text-ecsess-800">
<LinkIcon class="shrink-0" strokeWidth={2.5} />
<span class="font-bold tracking-[0.2px]">Payment:</span>
{#if paymentLink}
@@ -89,7 +89,7 @@
href={paymentLink}
target="_blank"
rel="noopener noreferrer"
class="text-left text-[#0A3D2A] underline-offset-4 hover:underline"
class="text-left text-ecsess-800 underline-offset-4 hover:underline"
>
Pay Here
</a>

4
src/components/event/EventTabControl.svelte
View File

@@ -5,8 +5,8 @@
<Tabs.Control
{value}
classes="hover:border-b-ecsess-200 border-b-4 transition-all ease-in-out pb-2 text-lg active:border-b-ecsess-600 px-2"
stateActive="border-b-ecsess-400"
classes="hover:border-b-ecsess-150 border-b-4 transition-all ease-in-out pb-2 text-lg active:border-b-ecsess-500 px-2"
stateActive="border-b-ecsess-350"
>
{@render children()}
</Tabs.Control>

4
src/components/homepage/FAQAccordion.svelte
View File

@@ -39,12 +39,12 @@
{#each entries as entry, index}
<Accordion.Item
value={index.toString()}
classes="border-ecsess-200 mb-4 rounded-xl border-2 hover:bg-ecsess-600/48 transition-all"
classes="border-ecsess-300 mb-4 rounded-md border-2 hover:bg-ecsess-500/30 transition-all"
leadClasses="text-lg font-bold"
controlClasses="
flex cursor-pointer justify-between
py-4 ease-in-out"
panelClasses=" border-t-ecsess-200 border-t-2 bg-transparent p-4 bg-ecsess-400"
panelClasses=" border-t-ecsess-300 border-t-2 bg-transparent p-4 bg-ecsess-350/50"
>
<!-- Control -->
{#snippet lead()}

4
src/components/layout/Footer.svelte
View File

@@ -3,10 +3,10 @@
</script>
<footer
class="bg-ecsess-black text-ecsess-200 mx-auto flex min-w-fit flex-wrap items-center justify-center px-4 py-4"
class="bg-ecsess-black text-ecsess-100 mx-auto flex min-w-fit flex-wrap items-center justify-center px-4 py-4"
>
<div>
<p class="text-ecsess-200 py-3 text-center">
<p class="text-ecsess-150 py-3 text-center">
Created by ECSESS with love {'<3'}. <br />
&copy; ECSESS {year}, under GNU General Public License v3.0.
</p>

4
src/components/layout/NavBar.svelte
View File

@@ -7,7 +7,7 @@
let menuHidden = $state(true);
</script>
<nav class="bg-ecsess-black text-ecsess-200 sticky w-full py-1">
<nav class="bg-ecsess-black text-ecsess-100 sticky w-full py-1">
<div class="block md:hidden">
<div class="mx-4 flex items-center-safe justify-between">
<a href="/">
@@ -16,7 +16,7 @@
<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"
class="bg-ecsess-black-hover hover:bg-ecsess-800 grid size-10 place-items-center rounded-md transition-colors ease-in-out active:bg-ecsess-900"
onclick={() => {
menuHidden = !menuHidden;
}}

4
src/components/layout/NavButton.svelte
View File

@@ -4,8 +4,8 @@
<a {href}>
<button
class="border-ecsess-black hover:border-ecsess-200 active:border-ecsess-400 border-b-4 px-6 py-2
font-semibold transition-all"
class="border-ecsess-black hover:border-ecsess-150 active:border-ecsess-300 border-b-4 px-6 py-2
font-semibold transition-all hover:text-ecsess-100"
>
{@render children()}
</button>

2
src/components/layout/Section.svelte
View File

@@ -2,7 +2,7 @@
let { children = () => 'Section placeholder', black = false } = $props();
let tailwindClasses = $state(
'mx-auto flex min-h-[90vh] flex-col items-center justify-center gap-4 p-4 text-center text-ecsess-200'
'mx-auto flex min-h-[90vh] flex-col items-center justify-center gap-4 p-4 text-center text-ecsess-100'
);
if (black) {

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

@@ -1,63 +1,23 @@
<script lang="ts">
import type { OfficeHour } from '$lib/schemas';
let { officeHour, compact = false, hideTime = false }: { officeHour: OfficeHour; compact?: boolean; hideTime?: boolean } = $props();
let { officeHour, isShortBlock }: { officeHour: OfficeHour; isShortBlock: boolean } = $props();
function parseTime(timeStr: string): number {
let timeRegexMatch = timeStr.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/i);
if (!timeRegexMatch) return 0;
let hours = parseInt(timeRegexMatch[1], 10);
let minutes = parseInt(timeRegexMatch[2] || '0', 10);
let period = timeRegexMatch[3];
if (period.toUpperCase() === 'PM' && hours !== 12) hours += 12;
if (period.toUpperCase() === 'AM' && hours === 12) hours = 0;
return hours * 60 + minutes;
function shortenPosition(position: string): string {
return position.replace(/Engineering Representative/gi, 'Rep.');
}
// Calculate duration in minutes
function getDuration(start: string, end: string): number {
return parseTime(end) - parseTime(start);
}
// Calculate dynamic height based on duration
// Base: 30 minutes = 3.5rem, scale proportionally
function getHeight(duration: number): string {
const baseMinutes = 30;
const baseHeight = 3.5; // Half of original 7rem
const heightRem = Math.max((duration / baseMinutes) * baseHeight, 2.5);
return `${heightRem}rem`;
}
const duration = getDuration(officeHour.startTime, officeHour.endTime);
const blockHeight = getHeight(duration);
// Shorten position name for display
const displayPosition = officeHour.member.position.replace(/Engineering Representative/gi, 'Rep.');
</script>
<div
class="bg-ecsess-200 text-ecsess-black grid place-content-center rounded-lg text-center h-full"
class:m-2={!compact && !hideTime}
class:m-0={hideTime}
class:p-2={!hideTime}
class:p-1={hideTime}
style={hideTime ? '' : `height: ${blockHeight};`}
class="bg-ecsess-100 text-ecsess-900 grid h-full place-content-center rounded-md text-center hover:bg-ecsess-200 border-ecsess-300 border shadow-md transition-all hover:shadow-lg"
>
{#if !hideTime}
<p class="border-b-ecsess-600 border-b-2 text-xs md:text-sm" class:lg:text-base={!compact} class:lg:text-sm={compact}>
{officeHour.startTime} - {officeHour.endTime}
</p>
{/if}
<p class="text-ecsess-800 font-extrabold text-base lg:text-lg">
<p class="text-base font-extrabold lg:text-lg">
{officeHour.member.name.split(' ')[0]}
</p>
<p class="italic text-xs">
{displayPosition}
</p>
{#if !isShortBlock}
<p class="text-ecsess-700 text-xs italic">
{shortenPosition(officeHour.member.position)}
</p>
{/if}
</div>

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

@@ -1,5 +1,6 @@
<script lang="ts">
import type { OfficeHour } from '$lib/schemas';
import OHBlock from './OHBlock.svelte';
// Constants
const SLOT_HEIGHT = 40; // pixels per 30-minute slot
@@ -8,7 +9,7 @@
const BLOCK_VERTICAL_PADDING = 8; // pixels total (4px top + 4px bottom)
const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] as const;
const DEFAULT_START_TIME = 10 * 60; // 10 AM in minutes
const DEFAULT_END_TIME = 17 * 60 ; // 5 PM in minutes
const DEFAULT_END_TIME = 17 * 60; // 5 PM in minutes
type Segment = {
startSlot: number;
@@ -42,14 +43,17 @@
};
const getSegmentId = (ohs: OfficeHour[]): string =>
ohs.map(oh => `${oh.member.name}|${oh.startTime}`).sort().join('||');
ohs
.map((oh) => `${oh.member.name}|${oh.startTime}`)
.sort()
.join('||');
// Derived values using Svelte 5 $derived
const timeRange = $derived.by(() => {
const allTimes = allOhs.flatMap(oh => [parseTime(oh.startTime), parseTime(oh.endTime)]);
const allTimes = allOhs.flatMap((oh) => [parseTime(oh.startTime), parseTime(oh.endTime)]);
return {
min: Math.min(...allTimes, DEFAULT_START_TIME),
max: Math.max(...allTimes, DEFAULT_END_TIME),
max: Math.max(...allTimes, DEFAULT_END_TIME)
};
});
@@ -74,7 +78,7 @@
// Get office hours active at a specific time slot
const getActiveOHs = (day: string, timeSlot: number): OfficeHour[] =>
allOhs.filter(oh => {
allOhs.filter((oh) => {
if (oh.day !== day) return false;
const start = parseTime(oh.startTime);
const end = parseTime(oh.endTime);
@@ -100,44 +104,44 @@
segments.push({
startSlot: currentSlot,
endSlot: currentSlot + SLOT_DURATION,
ohs: activeOHs,
ohs: activeOHs
});
}
}
return segments;
};
const shortenPosition = (position: string): string =>
position.replace(/Engineering Representative/gi, 'Rep.');
</script>
<div class="overflow-x-auto">
<div class="min-w-[800px] max-w-7xl mx-auto">
<div class="mx-auto max-w-7xl min-w-[800px]">
<!-- Header row -->
<div class="grid gap-0 mb-2" style:grid-template-columns="80px repeat(5, 1fr)">
<div class="text-center font-semibold text-ecsess-200 text-base px-2">Time</div>
<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>
{#each DAYS as day}
<div class="text-center font-semibold text-ecsess-200 text-base md:text-lg px-2">
<div class="text-ecsess-50 px-2 text-center text-base font-semibold md:text-lg">
{day}
</div>
{/each}
</div>
<!-- Calendar grid -->
<div class="grid gap-0 border-t-2 border-ecsess-600" style:grid-template-columns="80px repeat(5, 1fr)">
<div
class="border-ecsess-500 grid gap-0 border-t-2"
style:grid-template-columns="80px repeat(5, 1fr)"
>
{#each DAYS as day, dayIndex}
{@const segments = getSegmentsForDay(day)}
<!-- Time column (only for first day) -->
{#if dayIndex === 0}
<div class="relative border-b-2 border-ecsess-600">
<div class="border-ecsess-500 relative border-b-2">
{#each timeSlots as timeSlot}
{@const isHourMark = timeSlot % 60 === 0}
<div
class="flex items-start pt-1 text-right pr-2 text-sm text-ecsess-200 border-t border-ecsess-700"
class="text-ecsess-50 border-ecsess-400 flex items-start justify-end border-t pt-1 pr-2 text-sm"
class:border-t-4={isHourMark}
class:border-ecsess-600={isHourMark}
class:border-ecsess-500={isHourMark}
class:font-semibold={isHourMark}
style:height="{SLOT_HEIGHT}px"
>
@@ -148,14 +152,17 @@
{/if}
<!-- Day column with segments -->
<div class="relative border-l border-b-2 border-ecsess-700 border-b-ecsess-600" style:min-height="{timeSlots.length * SLOT_HEIGHT}px">
<div
class="border-ecsess-500 border-b-ecsess-500 relative border-b-2 border-l"
style:min-height="{timeSlots.length * SLOT_HEIGHT}px"
>
<!-- Background grid lines -->
{#each timeSlots as timeSlot, idx}
{@const isHourMark = timeSlot % 60 === 0}
<div
class="absolute inset-x-0 border-t border-ecsess-700"
class="border-ecsess-400 absolute inset-x-0 border-t"
class:border-t-4={isHourMark}
class:border-ecsess-600={isHourMark}
class:border-ecsess-500={isHourMark}
style:top="{idx * SLOT_HEIGHT}px"
style:height="{SLOT_HEIGHT}px"
></div>
@@ -163,32 +170,21 @@
<!-- Office hour segments -->
{#each segments as segment}
{@const startIndex = timeSlots.findIndex(ts => ts >= segment.startSlot)}
{@const startIndex = timeSlots.findIndex((ts) => ts >= segment.startSlot)}
{@const duration = segment.endSlot - segment.startSlot}
{@const heightPx = (duration / SLOT_DURATION) * SLOT_HEIGHT}
{@const isShortBlock = duration <= SLOT_DURATION}
{@const isShortBlock = duration <= 30}
<div
class="absolute grid gap-0.5 z-10"
style:top="{startIndex * SLOT_HEIGHT + BLOCK_MARGIN}px"
style:height="{heightPx - BLOCK_VERTICAL_PADDING}px"
class="absolute z-10 grid gap-0.5"
style:top="{startIndex * SLOT_HEIGHT + BLOCK_MARGIN + 3}px"
style:height="{heightPx - BLOCK_VERTICAL_PADDING - 3}px"
style:left="{BLOCK_MARGIN}px"
style:right="{BLOCK_MARGIN}px"
style:grid-template-columns="repeat({segment.ohs.length}, 1fr)"
>
{#each segment.ohs as oh}
<div class="min-w-0 bg-ecsess-200 rounded-sm flex items-center justify-center">
<div class="text-center px-1">
<p class="text-ecsess-800 font-extrabold text-base lg:text-lg">
{oh.member.name.split(' ')[0]}
</p>
{#if !isShortBlock}
<p class="italic text-sm leading-tight text-ecsess-900">
{shortenPosition(oh.member.position)}
</p>
{/if}
</div>
</div>
<OHBlock officeHour={oh} {isShortBlock} />
{/each}
</div>
{/each}
@@ -196,4 +192,4 @@
{/each}
</div>
</div>
</div>
</div>

6
src/components/resource/ResourceCard.svelte
View File

@@ -4,13 +4,13 @@
let { title = '_Resource Title_', description = "Lorem ipsum", link = 'https://example.com' } = $props();
</script>
<div class="bg-ecsess-50 relative h-fit max-w-xl min-w-12 rounded-lg px-4 py-2 md:py-0">
<div class="bg-ecsess-50 relative h-fit max-w-xl min-w-12 rounded-md px-4 py-2 md:py-0 hover:shadow-md transition-shadow border border-ecsess-150">
<div class="grid grid-cols-1 md:grid-cols-[7fr_1fr]">
<div class="flex flex-col items-start p-4">
<p class="text-ecsess-900 my-1 pb-1 text-left text-xl font-extrabold">
{title}
</p>
<p class="text-ecsess-600 text-left text-base">
<p class="text-ecsess-700 text-left text-base">
{description}
</p>
</div>
@@ -18,7 +18,7 @@
<Link href={link}>
<CircleArrowRight
size="42"
class="stroke-ecsess-800 hover:stroke-ecsess-400 cursor-pointer transition duration-200 active:scale-90"
class="stroke-ecsess-700 hover:stroke-ecsess-500 cursor-pointer transition duration-200 active:scale-90"
/>
</Link>
</div>