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

Lint format with Prettier

Browse Source
This commit is contained in:
Antoine Phan
2026-01-11 21:41:40 -05:00
parent 9fc25f3072
commit 4ffa937600
9 changed files with 67 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.css
View File

@@ -29,7 +29,7 @@
--color-ecsess-black-hover: #161917;
--animate-wiggle: wiggle 1s ease-in-out;
@keyframes wiggle {
@keyframes wiggle {
0% {
transform: rotateY(0);
}

24
src/components/event/EBComponents/EventActionButtons.svelte
View File

@@ -2,11 +2,7 @@
import { FilePen, CalendarPlus, Link as LinkIcon } from '@lucide/svelte';
import type { LinkType } from '$lib/schemas';
let {
registrationLink,
paymentLink,
addToCalendar
} = $props<{
let { registrationLink, paymentLink, addToCalendar } = $props<{
registrationLink?: LinkType[] | null;
paymentLink?: LinkType[] | null;
addToCalendar: () => void;
@@ -17,21 +13,23 @@
};
</script>
<div class="space-y-2 pointer-events-auto">
<div class="pointer-events-auto space-y-2">
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-2">
{#if registrationLink}
<a
href={registrationLink[0].url}
target="_blank"
rel="noopener noreferrer"
class="flex flex-1 items-center justify-center gap-2 rounded-xl bg-ecsess-500 px-4 py-3 text-sm font-bold text-white transition-colors hover:bg-ecsess-600"
class="bg-ecsess-500 hover:bg-ecsess-600 flex flex-1 items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white transition-colors"
onclick={handleClick}
>
<FilePen class="h-4 w-4" strokeWidth={2.5} />
Register
</a>
{:else}
<div class="flex items-center justify-center gap-2 rounded-xl bg-ecsess-700/50 px-4 py-3 text-sm font-bold text-ecsess-300/70 opacity-60">
<div
class="bg-ecsess-700/50 text-ecsess-300/70 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold opacity-60"
>
<FilePen class="h-4 w-4" strokeWidth={2.5} />
Drop In
</div>
@@ -43,7 +41,7 @@
e.stopPropagation();
addToCalendar();
}}
class="flex w-full items-center justify-center gap-2 rounded-xl bg-ecsess-700 px-4 py-3 text-sm font-bold text-white transition-colors hover:bg-ecsess-800"
class="bg-ecsess-700 hover:bg-ecsess-800 flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white transition-colors"
>
<CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
Add to Calendar
@@ -54,16 +52,18 @@
href={paymentLink[0].url}
target="_blank"
rel="noopener noreferrer"
class="col-span-2 flex items-center justify-center gap-2 rounded-xl bg-ecsess-800 px-4 py-3 text-sm font-bold text-white transition-colors hover:bg-ecsess-900 sm:col-span-1"
class="bg-ecsess-800 hover:bg-ecsess-900 col-span-2 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white transition-colors sm:col-span-1"
onclick={handleClick}
>
<LinkIcon class="h-4 w-4" strokeWidth={2.5} />
Pay
</a>
{:else}
<div class="col-span-2 flex items-center justify-center gap-2 rounded-xl bg-ecsess-800/50 px-4 py-3 text-sm font-bold text-ecsess-300/70 opacity-60 sm:col-span-1">
<div
class="bg-ecsess-800/50 text-ecsess-300/70 col-span-2 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold opacity-60 sm:col-span-1"
>
Free!
</div>
{/if}
</div>
</div>
</div>

18
src/components/event/EBComponents/EventBadges.svelte
View File

@@ -5,13 +5,19 @@
}>();
</script>
<div class="absolute top-0 left-0 right-0 z-30 flex items-start justify-between gap-2 p-4 pointer-events-none">
<div
class="pointer-events-none absolute top-0 right-0 left-0 z-30 flex items-start justify-between gap-2 p-4"
>
{#if isPastEvent}
<span class="rounded-full bg-ecsess-800/90 px-4 py-1.5 text-xs font-bold uppercase tracking-wider text-gray-300 backdrop-blur-sm">
<span
class="bg-ecsess-800/90 rounded-full px-4 py-1.5 text-xs font-bold tracking-wider text-gray-300 uppercase backdrop-blur-sm"
>
Past Event
</span>
{:else}
<span class="rounded-full bg-ecsess-400 px-4 py-1.5 text-xs font-bold uppercase tracking-wider text-white backdrop-blur-sm">
<span
class="bg-ecsess-400 rounded-full px-4 py-1.5 text-xs font-bold tracking-wider text-white uppercase backdrop-blur-sm"
>
Upcoming
</span>
{/if}
@@ -19,10 +25,12 @@
{#if eventCategory && eventCategory.length > 0}
<div class="flex flex-wrap justify-end gap-2">
{#each eventCategory as category}
<span class="rounded-full bg-ecsess-500/90 px-3 py-1.5 text-xs font-bold uppercase tracking-wider text-white backdrop-blur-sm">
<span
class="bg-ecsess-500/90 rounded-full px-3 py-1.5 text-xs font-bold tracking-wider text-white uppercase backdrop-blur-sm"
>
{category}
</span>
{/each}
</div>
{/if}
</div>
</div>

22
src/components/event/EBComponents/EventDescription.svelte
View File

@@ -15,12 +15,14 @@
};
</script>
<div class="relative z-30 p-6 pointer-events-auto">
<h3 class="text-2xl font-bold leading-tight text-white">{eventTitle}</h3>
<div class="pointer-events-auto relative z-30 p-6">
<h3 class="text-2xl leading-tight font-bold text-white">{eventTitle}</h3>
</div>
<div class="relative z-30 my-2 flex h-56 flex-col md:h-64 xl:h-80 pointer-events-auto">
<div class="flex flex-1 justify-center overflow-y-auto border-y border-ecsess-800 p-6 text-ecsess-100">
<div class="pointer-events-auto relative z-30 my-2 flex h-56 flex-col md:h-64 xl:h-80">
<div
class="border-ecsess-800 text-ecsess-100 flex flex-1 justify-center overflow-y-auto border-y p-6"
>
{#if eventDescription}
<RichText value={eventDescription} />
{:else}
@@ -30,13 +32,15 @@
</div>
{#if generalLink}
<div class="relative z-30 flex w-full flex-wrap items-center justify-center gap-3 overflow-auto p-6 pb-8 pointer-events-auto">
<div
class="pointer-events-auto relative z-30 flex w-full flex-wrap items-center justify-center gap-3 overflow-auto p-6 pb-8"
>
{#each generalLink.slice(0, 4) as link}
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
class="flex items-center justify-center gap-2 rounded-xl bg-ecsess-600 px-4 py-3 text-sm font-bold text-white transition-colors hover:bg-ecsess-700"
class="bg-ecsess-600 hover:bg-ecsess-700 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white transition-colors"
onclick={handleClick}
>
<ExternalLinkIcon class="h-4 w-4" strokeWidth={2.5} />
@@ -46,6 +50,6 @@
</div>
{/if}
<div class="relative z-30 p-4 lg:hidden pointer-events-auto">
<p class="text-sm text-ecsess-400">Click to flip back</p>
</div>
<div class="pointer-events-auto relative z-30 p-4 lg:hidden">
<p class="text-ecsess-400 text-sm">Click to flip back</p>
</div>

14
src/components/event/EBComponents/EventImageHeader.svelte
View File

@@ -26,10 +26,12 @@
const imageAlt = $derived(thumbnail ? eventTitle : `${eventCategory?.[0] || 'Default'} Event`);
</script>
<div class="relative z-30 h-80 overflow-hidden rounded-t-2xl pointer-events-none">
<img class="h-full w-full object-cover pointer-events-none" src={imageSrc} alt={imageAlt} />
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-ecsess-800/20 to-ecsess-950 rounded-t-2xl pointer-events-none"></div>
<div class="absolute bottom-0 left-0 right-0 p-6 pointer-events-none">
<h3 class="text-2xl font-bold leading-tight text-white">{eventTitle}</h3>
<div class="pointer-events-none relative z-30 h-80 overflow-hidden rounded-t-2xl">
<img class="pointer-events-none h-full w-full object-cover" src={imageSrc} alt={imageAlt} />
<div
class="via-ecsess-800/20 to-ecsess-950 pointer-events-none absolute inset-0 rounded-t-2xl bg-gradient-to-b from-transparent"
></div>
<div class="pointer-events-none absolute right-0 bottom-0 left-0 p-6">
<h3 class="text-2xl leading-tight font-bold text-white">{eventTitle}</h3>
</div>
</div>
</div>

14
src/components/event/EBComponents/EventInfoGrid.svelte
View File

@@ -7,22 +7,24 @@
}>();
</script>
<div class="relative z-30 m-5 space-y-3 rounded-xl border border-ecsess-800/30 bg-ecsess-900/60 p-4 backdrop-blur-sm pointer-events-none">
<div
class="border-ecsess-800/30 bg-ecsess-900/60 pointer-events-none relative z-30 m-5 space-y-3 rounded-xl border p-4 backdrop-blur-sm"
>
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-ecsess-400">
<div class="bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full">
<CalendarDays class="h-5 w-5 text-white" strokeWidth={2.5} />
</div>
<div class="flex-1">
<p class="text-sm font-semibold text-ecsess-50">{date}</p>
<p class="text-ecsess-50 text-sm font-semibold">{date}</p>
</div>
</div>
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-ecsess-400">
<div class="bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full">
<MapPin class="h-5 w-5 text-white" strokeWidth={2.5} />
</div>
<div class="flex-1">
<p class="text-sm font-semibold text-ecsess-50">{location ?? 'TBA'}</p>
<p class="text-ecsess-50 text-sm font-semibold">{location ?? 'TBA'}</p>
</div>
</div>
</div>
</div>

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

@@ -80,13 +80,13 @@
<div class="group relative flex h-full w-full flex-col rounded-2xl perspective-[1000px]">
<div
class="grid h-full w-full text-center transition-transform duration-500 rounded-2xl transform-3d {showDescription
class="grid h-full w-full rounded-2xl text-center transition-transform duration-500 transform-3d {showDescription
? 'transform-[rotateY(180deg)]'
: ''}"
>
<!-- Front Side -->
<div
class="col-start-1 row-start-1 flex h-full w-full flex-col rounded-2xl bg-ecsess-950 transition-opacity duration-500 backface-hidden transform-3d transform-[rotateY(0)] cursor-pointer {showDescription
class="bg-ecsess-950 col-start-1 row-start-1 flex h-full w-full transform-[rotateY(0)] cursor-pointer flex-col rounded-2xl transition-opacity duration-500 backface-hidden transform-3d {showDescription
? 'pointer-events-none opacity-0'
: 'opacity-100'}"
data-flip-side="front"
@@ -96,26 +96,25 @@
onkeydown={handleKeyDown}
aria-label="Flip event card to view description"
>
<EventImageHeader {eventTitle} {thumbnail} {eventCategory} />
<EventBadges {isPastEvent} {eventCategory} />
<EventInfoGrid {date} {location} />
{#if !isPastEvent}
<div class="relative z-30 flex-1 px-6 pb-4 pt-0 pointer-events-auto">
<div class="pointer-events-auto relative z-30 flex-1 px-6 pt-0 pb-4">
<EventActionButtons {registrationLink} {paymentLink} {addToCalendar} />
</div>
{/if}
<div class="p-4 lg:hidden">
<p class="text-sm text-ecsess-400">Click to view more</p>
<p class="text-ecsess-400 text-sm">Click to view more</p>
</div>
</div>
<!-- Back Side -->
<div
class="col-start-1 row-start-1 flex h-full w-full flex-col rounded-2xl bg-ecsess-950 transition-opacity duration-500 backface-hidden transform-3d transform-[rotateY(180deg)] cursor-pointer {showDescription
class="bg-ecsess-950 col-start-1 row-start-1 flex h-full w-full transform-[rotateY(180deg)] cursor-pointer flex-col rounded-2xl transition-opacity duration-500 backface-hidden transform-3d {showDescription
? 'opacity-100'
: 'pointer-events-none opacity-0'}"
data-flip-side="back"
@@ -177,4 +176,4 @@
transform: rotateY(180deg);
}
}
</style>
</style>

6
src/routes/council/+page.server.ts
View File

@@ -19,7 +19,11 @@ const councilQuery = `{
}`;
export const load = async ({ url }) => {
const { members, councilGoofyPic }: { members: CouncilMember[], councilGoofyPic: { url: string } } = await getFromCMS(councilQuery);
const {
members,
councilGoofyPic
}: { members: CouncilMember[]; councilGoofyPic: { url: string } } =
await getFromCMS(councilQuery);
return {
members: members,