Lint format with Prettier
This commit is contained in:
@@ -29,7 +29,7 @@
|
||||
--color-ecsess-black-hover: #161917;
|
||||
|
||||
--animate-wiggle: wiggle 1s ease-in-out;
|
||||
@keyframes wiggle {
|
||||
@keyframes wiggle {
|
||||
0% {
|
||||
transform: rotateY(0);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -7,11 +7,7 @@ export default defineConfig({
|
||||
|
||||
// Optimize dependency pre-bundling
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
'@portabletext/svelte',
|
||||
'@lucide/svelte',
|
||||
'@sanity/client'
|
||||
],
|
||||
include: ['@portabletext/svelte', '@lucide/svelte', '@sanity/client'],
|
||||
// Force pre-bundle these dependencies
|
||||
force: false
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user