From b4bb7dec0cc9cd79666d71bbe6105c8c0d241077 Mon Sep 17 00:00:00 2001 From: Minh Vo Date: Mon, 22 Dec 2025 19:52:46 -0500 Subject: [PATCH 01/14] remove skeleton ui --- bun.lock | 1 + src/components/event/EventBlock.svelte | 2 +- src/components/event/EventTabsContent.svelte | 20 +++++------ src/components/event/EventTabsTrigger.svelte | 23 ++++++------ src/lib/schemas.ts | 3 ++ src/routes/events/+page.svelte | 38 +++++++++++--------- 6 files changed, 45 insertions(+), 42 deletions(-) diff --git a/bun.lock b/bun.lock index 59f8f07..463ce6f 100644 --- a/bun.lock +++ b/bun.lock @@ -1,5 +1,6 @@ { "lockfileVersion": 1, + "configVersion": 0, "workspaces": { "": { "name": "ecsess-website", diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte index 077d428..3548c1a 100644 --- a/src/components/event/EventBlock.svelte +++ b/src/components/event/EventBlock.svelte @@ -1,5 +1,5 @@ - +
{#if upcomingEvents.length > 0} @@ -139,4 +135,4 @@
{/if}
- + diff --git a/src/components/event/EventTabsTrigger.svelte b/src/components/event/EventTabsTrigger.svelte index 6fc8ad9..0e815d7 100644 --- a/src/components/event/EventTabsTrigger.svelte +++ b/src/components/event/EventTabsTrigger.svelte @@ -1,15 +1,14 @@ - - {#snippet element(attributes)} - - {/snippet} - +
+ +
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts index 47a2e64..2e3dffe 100644 --- a/src/lib/schemas.ts +++ b/src/lib/schemas.ts @@ -13,6 +13,9 @@ export type EventPost = { paylink: string; // event payment link (e.g., Zeffy) }; +export type Category = 'allEvents' | 'academic' | 'professional' | 'social' | 'technical'; + + export type FAQ = { question: string; answer: string; diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte index 28a0dd8..7b1f87a 100644 --- a/src/routes/events/+page.svelte +++ b/src/routes/events/+page.svelte @@ -1,6 +1,5 @@

Events

- (group = e.value)} composite={true}> - - All Events - Academic - Professional - Social - Technical - +
+
    + {#each categories as category} + {category.label} + {/each} +
- - - - - - + +
From b70337e949240a767483b78c8c27da357f406ba1 Mon Sep 17 00:00:00 2001 From: Minh Vo Date: Tue, 23 Dec 2025 22:54:40 -0500 Subject: [PATCH 02/14] create flip card to separate description from event image --- src/app.css | 41 +++ src/components/event/EventBlock.svelte | 360 ++++++++++++++----------- 2 files changed, 242 insertions(+), 159 deletions(-) diff --git a/src/app.css b/src/app.css index d1dd4f3..627bef5 100644 --- a/src/app.css +++ b/src/app.css @@ -204,3 +204,44 @@ h2 { @apply mt-3 text-sm leading-5; } } + +.flip-box { + height: 100%; + width: 100%; + perspective: 1000px; /* Remove this if you don't want the 3D effect */ + } + + .flip-box-inner { + display: grid; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.8s; + transform-style: preserve-3d; + } + + + .flip-box-front,.flip-box-back { + grid-area: 1/1; + width: 100%; + -webkit-backface-visibility: hidden; /* Safari */ + backface-visibility: hidden; + } + .flip-box-front { + z-index: 2; + transform: rotateY(0deg); + } + + .flip-box-front { + z-index: 2; + transform: rotateY(0deg); + } + + .flip-box-back { + transform: rotateY(180deg); + } + + .show-back { + transform: rotateY(180deg); + } + diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte index 3548c1a..c6c7a44 100644 --- a/src/components/event/EventBlock.svelte +++ b/src/components/event/EventBlock.svelte @@ -1,5 +1,4 @@ +
- -
- {#if thumbnail} - {eventTitle} - {:else if eventCategory?.[0] === 'social'} - Social Event - {:else if eventCategory?.[0] === 'technical'} - Technical Event - {:else if eventCategory?.[0] === 'professional'} - Professional Event - {:else if eventCategory?.[0] === 'academic'} - Academic Event - {:else} - ECSESS Event - {/if} - - -
- - -
- {#if isPastEvent} - - Past Event - + class=" + flip-box + group bg-ecsess-950 shadow-ecsess-950/50 relative flex flex-col overflow-hidden rounded-2xl shadow-lg transition-all duration-300 hover:-translate-y-3 hover:shadow-2xl" + > + +
+ +
+ +
+ {#if thumbnail} + {eventTitle} + {:else if eventCategory?.[0] === 'social'} + Social Event + {:else if eventCategory?.[0] === 'technical'} + Technical Event + {:else if eventCategory?.[0] === 'professional'} + Professional Event + {:else if eventCategory?.[0] === 'academic'} + Academic Event {:else} - - Upcoming - + ECSESS Event {/if} - {#if eventCategory && eventCategory.length > 0} -
- {#each eventCategory as category} - - {category} - - {/each} -
- {/if} -
- - -
-

- {eventTitle} -

-
-
- - -
- - {#if eventDescription} -
- + +
- {/if} + +
+ {#if isPastEvent} + + Past Event + + {:else} + + Upcoming + + {/if} - -
-
-
- -
-
-

{date}

-
+ {#if eventCategory && eventCategory.length > 0} +
+ {#each eventCategory as category} + + {category} + + {/each} +
+ {/if}
-
-
- + +
+

+ {eventTitle} +

+
+ +
+
+
+ +
+
+

{date}

+
-
-

- {location ?? 'TBA'} -

+ +
+
+ +
+
+

+ {location ?? 'TBA'} +

+
-
- - - {#if !isPastEvent} -
- +
+ View Details + +
+
+ +
+ +
+

+ {eventTitle} +

+
+
+ +
+ {#if eventDescription} + + {:else} +

No description available for this event.

+ {/if} - -
- {#if registrationLink} - - - Register - - {:else} -
- - Drop In -
- {/if} - - {#if paymentLink} - - - Pay - - {:else} -
- Free! -
- {/if}
- {/if} +
+ + {#if !isPastEvent} +
+ + + + +
+ {#if registrationLink} + + + Register + + {:else} +
+ + Drop In +
+ {/if} + + {#if paymentLink} + + + Pay + + {:else} +
+ Free! +
+ {/if} +
+
+ {/if} +
+
+ +
+ +
+
From 157bdec9ea011472f885755f76050842c55f5f71 Mon Sep 17 00:00:00 2001 From: Antoine Phan Date: Thu, 25 Dec 2025 22:18:51 -0500 Subject: [PATCH 03/14] Update links type for events --- src/lib/schemas.ts | 9 ++++++--- src/routes/events/+page.server.ts | 23 +++++++++++++---------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts index 2e3dffe..311e675 100644 --- a/src/lib/schemas.ts +++ b/src/lib/schemas.ts @@ -1,5 +1,6 @@ import type { InputValue } from '@portabletext/svelte'; + export type EventPost = { id: string; name: string; @@ -8,14 +9,16 @@ export type EventPost = { time: string; location: string; thumbnail: string; - reglink: string; category: string; - paylink: string; // event payment link (e.g., Zeffy) + links: [{ + title: string, + kind: string, // payment, registration, general (enum `kind`) + url: string + }], }; export type Category = 'allEvents' | 'academic' | 'professional' | 'social' | 'technical'; - export type FAQ = { question: string; answer: string; diff --git a/src/routes/events/+page.server.ts b/src/routes/events/+page.server.ts index 603e2d6..6cf92fb 100644 --- a/src/routes/events/+page.server.ts +++ b/src/routes/events/+page.server.ts @@ -7,21 +7,24 @@ const eventQuery = `*[_type == "events"]{ date, location, description, - reglink, - paylink, + "links": links[]{ + "kind": kind, + "title": title, + "url": url + }, "thumbnail": thumbnail.asset->url+"?h=800&fm=webp", "lastUpdated": _updatedAt, }`; export const load = async ({ url }) => { - let listOfEvents: EventPost[] = await getFromCMS(eventQuery); + let listOfEvents: EventPost[] = await getFromCMS(eventQuery); - let sortedEvents = listOfEvents.sort( - (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime() - ); + let sortedEvents = listOfEvents.sort( + (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime() + ); - return { - events: sortedEvents, - canonical: url.href - }; + return { + events: sortedEvents, + canonical: url.href + }; }; From dcdfb4ac6a8803ddfd4571efe809902aea6fb23b Mon Sep 17 00:00:00 2001 From: Minh Vo Date: Fri, 26 Dec 2025 17:28:32 -0500 Subject: [PATCH 04/14] update the event flip card + add remodel scrollbar --- src/app.css | 102 ++++++++---- src/components/event/EventBlock.svelte | 162 +++++++++++-------- src/components/event/EventTabsContent.svelte | 25 ++- src/lib/schemas.ts | 13 +- 4 files changed, 188 insertions(+), 114 deletions(-) diff --git a/src/app.css b/src/app.css index 627bef5..ed81920 100644 --- a/src/app.css +++ b/src/app.css @@ -206,42 +206,78 @@ h2 { } .flip-box { - height: 100%; - width: 100%; - perspective: 1000px; /* Remove this if you don't want the 3D effect */ - } + height: 100%; + width: 100%; + perspective: 1000px; /* Remove this if you don't want the 3D effect */; +} - .flip-box-inner { - display: grid; - width: 100%; - height: 100%; - text-align: center; - transition: transform 0.8s; - transform-style: preserve-3d; - } +.flip-box-inner { + display: grid; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.8s; + transform-style: preserve-3d; +} - - .flip-box-front,.flip-box-back { - grid-area: 1/1; - width: 100%; - -webkit-backface-visibility: hidden; /* Safari */ - backface-visibility: hidden; - } - .flip-box-front { - z-index: 2; - transform: rotateY(0deg); - } +@keyframes rotate-and-back { + 0% { transform: rotateY(0); } + 50% { transform: rotateY(15deg); } + 100% { transform: rotateY(0); } +} - .flip-box-front { - z-index: 2; - transform: rotateY(0deg); - } +.flip-box:hover .flip-box-front{ + animation: rotate-and-back 0.3s ease-in-out; +} - .flip-box-back { - transform: rotateY(180deg); - } +.flip-box-front,.flip-box-back { + grid-area: 1/1; + width: 100%; + -webkit-backface-visibility: hidden; /* Safari */ + backface-visibility: hidden; +} +.flip-box-front { + z-index: 2; + transform: rotateY(0deg); + transform-style: preserve-3d; +} - .show-back { - transform: rotateY(180deg); - } +.flip-box-back { + transform: rotateY(180deg); +} + +.show-back { + transform: rotateY(180deg); +} + +/* Scrollbar Styles */ +*::-webkit-scrollbar { + height: 3px; + width: 2px; +} +*::-webkit-scrollbar-track { + border-radius: 3px; + background-color: var(--color-ecsess-50); +} + +*::-webkit-scrollbar-track:hover { + background-color: var(--color-ecsess-200); +} + +*::-webkit-scrollbar-track:active { + background-color: var(--color-ecsess-200); +} + +*::-webkit-scrollbar-thumb { + border-radius: 5px; + background-color: var(--color-ecsess-800); +} + +*::-webkit-scrollbar-thumb:hover { + background-color: var(--color-ecsess-500); +} + +*::-webkit-scrollbar-thumb:active { + background-color: var(--color-ecsess-500); +} diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte index c6c7a44..1415f41 100644 --- a/src/components/event/EventBlock.svelte +++ b/src/components/event/EventBlock.svelte @@ -1,5 +1,5 @@
@@ -90,8 +103,9 @@ location={e.location} eventDescription={e.description} thumbnail={e.thumbnail} - registrationLink={e.reglink} - paymentLink={e.paylink} + registrationLink={getPaymentLink(e, 'registration')} + paymentLink={getPaymentLink(e, 'payment')} + generalLink={getPaymentLink(e, 'general')} eventCategory={e.category} isPastEvent={false} /> @@ -115,8 +129,9 @@ location={e.location} eventDescription={e.description} thumbnail={e.thumbnail} - registrationLink={e.reglink} - paymentLink={e.paylink} + registrationLink={getPaymentLink(e, 'registration')} + paymentLink={getPaymentLink(e, 'payment')} + generalLink={getPaymentLink(e, 'general')} eventCategory={e.category} isPastEvent={true} /> diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts index 311e675..c8e8bfc 100644 --- a/src/lib/schemas.ts +++ b/src/lib/schemas.ts @@ -10,15 +10,18 @@ export type EventPost = { location: string; thumbnail: string; category: string; - links: [{ - title: string, - kind: string, // payment, registration, general (enum `kind`) - url: string - }], + links: LinkType[]; }; export type Category = 'allEvents' | 'academic' | 'professional' | 'social' | 'technical'; +export type LinkType = { + title: string; + kind: EventLinkKind; + url: string; +}; +export type EventLinkKind = 'payment' | 'registration' | 'general'; + export type FAQ = { question: string; answer: string; From bbc4e373a36993a7c16517e97b05d45556b0eeda Mon Sep 17 00:00:00 2001 From: Minh Vo Date: Fri, 26 Dec 2025 19:14:16 -0500 Subject: [PATCH 05/14] update event tab and edit event card --- src/app.css | 19 ++++++++++--------- src/components/event/EventBlock.svelte | 6 ++++-- src/components/event/EventTabsTrigger.svelte | 4 ++-- src/routes/events/+page.svelte | 2 +- 4 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/app.css b/src/app.css index ed81920..9f34fa1 100644 --- a/src/app.css +++ b/src/app.css @@ -230,7 +230,8 @@ h2 { animation: rotate-and-back 0.3s ease-in-out; } -.flip-box-front,.flip-box-back { +.flip-box-front, +.flip-box-back { grid-area: 1/1; width: 100%; -webkit-backface-visibility: hidden; /* Safari */ @@ -252,32 +253,32 @@ h2 { /* Scrollbar Styles */ *::-webkit-scrollbar { - height: 3px; - width: 2px; + height: 4px; + width: 4px; } *::-webkit-scrollbar-track { border-radius: 3px; - background-color: var(--color-ecsess-50); + background-color: var(--color-ecsess-700); } *::-webkit-scrollbar-track:hover { - background-color: var(--color-ecsess-200); + background-color: var(--color-ecsess-900); } *::-webkit-scrollbar-track:active { - background-color: var(--color-ecsess-200); + background-color: var(--color-ecsess-900); } *::-webkit-scrollbar-thumb { border-radius: 5px; - background-color: var(--color-ecsess-800); + background-color: var(--color-ecsess-100); } *::-webkit-scrollbar-thumb:hover { - background-color: var(--color-ecsess-500); + background-color: var(--color-ecsess-300); } *::-webkit-scrollbar-thumb:active { - background-color: var(--color-ecsess-500); + background-color: var(--color-ecsess-300); } diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte index 1415f41..9af1c24 100644 --- a/src/components/event/EventBlock.svelte +++ b/src/components/event/EventBlock.svelte @@ -66,7 +66,8 @@
-
+ +
+ +
{#if generalLink} {#each generalLink as link} - let { value, onclick, children } = $props(); + let { value, selected, onclick, children } = $props(); @@ -7,7 +7,7 @@ diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte index 7b1f87a..1e39004 100644 --- a/src/routes/events/+page.svelte +++ b/src/routes/events/+page.svelte @@ -34,7 +34,7 @@
    {#each categories as category} - {category.label} + {category.label} {/each}
From 36632b025fea8b08f89322d962718492bff2141c Mon Sep 17 00:00:00 2001 From: Minh Vo Date: Sat, 27 Dec 2025 00:38:27 -0500 Subject: [PATCH 06/14] remove peeking effect for smaller devices and add back shadow to the card --- src/app.css | 6 ++++-- src/components/event/EventBlock.svelte | 8 ++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/app.css b/src/app.css index 9f34fa1..a985451 100644 --- a/src/app.css +++ b/src/app.css @@ -226,8 +226,10 @@ h2 { 100% { transform: rotateY(0); } } -.flip-box:hover .flip-box-front{ - animation: rotate-and-back 0.3s ease-in-out; +@media (min-width: 448px) { /* Apply hover effect only on screens wider than md*/ + .flip-box:hover .flip-box-front { + animation: rotate-and-back 0.3s ease-in-out; + } } .flip-box-front, diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte index 9af1c24..9e1adda 100644 --- a/src/components/event/EventBlock.svelte +++ b/src/components/event/EventBlock.svelte @@ -61,13 +61,13 @@
-
+
-
+
+
-
+
From 3e74ac4bcbe2089cb9cf66e55369a1b0ebef8ab0 Mon Sep 17 00:00:00 2001 From: Minh Vo Date: Mon, 29 Dec 2025 02:37:29 -0500 Subject: [PATCH 08/14] update type to enum and change css -> tailwindcss syntax + some ui change --- src/app.css | 68 ++------------ src/components/RichText.svelte | 2 +- src/components/event/EventBlock.svelte | 99 +++++++++++++++----- src/components/event/EventTabsContent.svelte | 18 ++-- src/lib/schemas.ts | 16 +++- src/routes/events/+page.svelte | 18 ++-- 6 files changed, 116 insertions(+), 105 deletions(-) diff --git a/src/app.css b/src/app.css index 2bdff0a..635e97e 100644 --- a/src/app.css +++ b/src/app.css @@ -205,83 +205,31 @@ h2 { } } -.flip-box { - height: 100%; - width: 100%; - perspective: 1000px; /* Remove this if you don't want the 3D effect */; -} - -.flip-box-inner { - display: grid; - width: 100%; - height: 100%; - text-align: center; - transition: transform 0.8s; - transform-style: preserve-3d; -} - -@keyframes rotate-and-back { - 0% { transform: rotateY(0); } - 33% { transform: rotateY(5deg); } - 66% { transform: rotateY(-5deg); } - 100% { transform: rotateY(0); } -} - -@media (min-width: 448px) { /* Apply hover effect only on screens wider than md*/ - .flip-box:hover .flip-box-front { - animation: rotate-and-back 0.3s ease-in-out; - } -} - -.flip-box-front, -.flip-box-back { - grid-area: 1/1; - width: 100%; - -webkit-backface-visibility: hidden; /* Safari */ - backface-visibility: hidden; -} -.flip-box-front { - z-index: 2; - transform: rotateY(0deg); - transform-style: preserve-3d; -} - -.flip-box-back { - transform: rotateY(180deg); -} - -.show-back { - transform: rotateY(180deg); -} - /* Scrollbar Styles */ *::-webkit-scrollbar { - height: 4px; - width: 4px; + @apply h-1 w-1; } + *::-webkit-scrollbar-track { - border-radius: 3px; - background-color: var(--color-ecsess-700); + @apply rounded bg-ecsess-700; } *::-webkit-scrollbar-track:hover { - background-color: var(--color-ecsess-900); + @apply bg-ecsess-900; } *::-webkit-scrollbar-track:active { - background-color: var(--color-ecsess-900); + @apply bg-ecsess-900; } *::-webkit-scrollbar-thumb { - border-radius: 5px; - background-color: var(--color-ecsess-100); + @apply rounded-md bg-ecsess-100; } *::-webkit-scrollbar-thumb:hover { - background-color: var(--color-ecsess-300); + @apply bg-ecsess-300; } *::-webkit-scrollbar-thumb:active { - background-color: var(--color-ecsess-300); + @apply bg-ecsess-300; } - diff --git a/src/components/RichText.svelte b/src/components/RichText.svelte index 5e760e1..b6662c9 100644 --- a/src/components/RichText.svelte +++ b/src/components/RichText.svelte @@ -4,6 +4,6 @@ let { value } = $props(); -
+
diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte index e828ee0..26d0cde 100644 --- a/src/components/event/EventBlock.svelte +++ b/src/components/event/EventBlock.svelte @@ -61,13 +61,13 @@
-
+
+
{#if !isPastEvent}
-
+
{#if registrationLink} - - - Register - + + + Register + + {:else}
Drop In @@ -207,7 +210,8 @@ {/if}
{/if}
-
+

Click to view more

-
+
-
+
{#if eventDescription} {:else} @@ -267,14 +272,15 @@ -
+
{#if generalLink} {#each generalLink as link} {link.title} @@ -288,5 +294,52 @@
\ No newline at end of file diff --git a/src/components/event/EventTabsContent.svelte b/src/components/event/EventTabsContent.svelte index 4cc1097..e5b60c8 100644 --- a/src/components/event/EventTabsContent.svelte +++ b/src/components/event/EventTabsContent.svelte @@ -1,9 +1,9 @@ From c74efd9c05bb1b14a79d984e1d36b0a43695b349 Mon Sep 17 00:00:00 2001 From: Minh Vo Date: Mon, 29 Dec 2025 12:21:26 -0500 Subject: [PATCH 09/14] add padding so it looks nicer and change shadow color --- src/components/event/EventBlock.svelte | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte index 26d0cde..8738d81 100644 --- a/src/components/event/EventBlock.svelte +++ b/src/components/event/EventBlock.svelte @@ -181,7 +181,7 @@
-
+
{#if !isPastEvent}
@@ -193,7 +193,7 @@ target="_blank" rel="noopener noreferrer" class="bg-ecsess-500 hover:bg-ecsess-600 flex flex-1 items-center justify-center gap-2 rounded-xl px-4 p3 text-sm font-bold text-white - shadow-md shadow-ecsess-100 transition-all hover:shadow-lg hover:-translate-y-1 + shadow-md shadow-ecsess-300 transition-all hover:shadow-lg hover:-translate-y-1 " > @@ -211,7 +211,7 @@
{/if} @@ -242,9 +228,11 @@

Click to view more

-
+
-
+
+
-
+
{#if eventDescription} {:else} @@ -272,15 +260,17 @@ -
+
{#if generalLink} {#each generalLink as link} {link.title} @@ -289,7 +279,6 @@ {/if}
-
@@ -302,18 +291,27 @@ } .flip-box-inner { - @apply grid w-full h-full text-center duration-800 transform-3d; + @apply grid h-full w-full text-center duration-800 transform-3d; } - + @keyframes rotate-and-back { - 0% { transform: rotateY(0); } - 33% { transform: rotateY(5deg); } - 66% { transform: rotateY(-5deg); } - 100% { transform: rotateY(0); } + 0% { + transform: rotateY(0); + } + 33% { + transform: rotateY(5deg); + } + 66% { + transform: rotateY(-5deg); + } + 100% { + transform: rotateY(0); + } } /*Only work with normal css for now */ - @media (min-width: 448px) { /* Apply hover effect only on screens wider than md*/ + @media (min-width: 448px) { + /* Apply hover effect only on screens wider than md*/ .flip-box:hover .flip-box-front { animation: rotate-and-back 0.3s ease-in-out; } @@ -321,10 +319,10 @@ .flip-box-front, .flip-box-back { - @apply grid-1/1 h-full w-full backface-hidden rounded-2xl [-webkit-backface-visibility:hidden]; + @apply grid-1/1 h-full w-full rounded-2xl [-webkit-backface-visibility:hidden] backface-hidden; } .flip-box-front { - @apply z-2 transform-rotate-y-0 transform-3d; + @apply transform-rotate-y-0 z-2 transform-3d; } .flip-box-back { @@ -334,4 +332,4 @@ .show-back { @apply rotate-y-180; } - \ No newline at end of file + diff --git a/src/components/event/EventTabsContent.svelte b/src/components/event/EventTabsContent.svelte index e5b60c8..d61a835 100644 --- a/src/components/event/EventTabsContent.svelte +++ b/src/components/event/EventTabsContent.svelte @@ -62,26 +62,31 @@ const upcomingEvents = $derived( filtered - .filter((e: { date: string; }) => !isPastEvent(e.date)) - .sort((a: { date: string; }, b: { date: string; }) => parseEventDate(a.date).getTime() - parseEventDate(b.date).getTime()) + .filter((e: { date: string }) => !isPastEvent(e.date)) + .sort( + (a: { date: string }, b: { date: string }) => + parseEventDate(a.date).getTime() - parseEventDate(b.date).getTime() + ) ); const finishedEvents = $derived( filtered - .filter((e: { date: string; }) => isPastEvent(e.date)) - .sort((a: { date: string; }, b: { date: string; }) => parseEventDate(b.date).getTime() - parseEventDate(a.date).getTime()) + .filter((e: { date: string }) => isPastEvent(e.date)) + .sort( + (a: { date: string }, b: { date: string }) => + parseEventDate(b.date).getTime() - parseEventDate(a.date).getTime() + ) ); - const getPaymentLink = (e: EventPost, type: EventLinkKind ):LinkType[] | null => { + const getPaymentLink = (e: EventPost, type: EventLinkKind): LinkType[] | null => { let generalLinks: LinkType[] = []; for (const link of e.links ?? []) { if (type == EventLinkKind.GENERAL && link.kind === EventLinkKind.GENERAL && link.url !== '') { generalLinks.push(link); - } - else if (link.kind === type && link.url !== '') { + } else if (link.kind === type && link.url !== '') { return [link]; } - } + } return generalLinks.length > 0 ? generalLinks : null; }; diff --git a/src/components/event/EventTabsTrigger.svelte b/src/components/event/EventTabsTrigger.svelte index 9770157..9c09c45 100644 --- a/src/components/event/EventTabsTrigger.svelte +++ b/src/components/event/EventTabsTrigger.svelte @@ -1,13 +1,14 @@
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts index 548d296..eb9eba2 100644 --- a/src/lib/schemas.ts +++ b/src/lib/schemas.ts @@ -1,6 +1,5 @@ import type { InputValue } from '@portabletext/svelte'; - export type EventPost = { id: string; name: string; @@ -19,18 +18,18 @@ export enum EventCategory { PROFESSIONAL = 'professional', SOCIAL = 'social', TECHNICAL = 'technical' -}; +} export type LinkType = { - title: string; - kind: EventLinkKind; - url: string; + title: string; + kind: EventLinkKind; + url: string; }; export enum EventLinkKind { PAYMENT = 'payment', REGISTRATION = 'registration', GENERAL = 'general' -}; +} export type FAQ = { question: string; diff --git a/src/routes/events/+page.server.ts b/src/routes/events/+page.server.ts index 6cf92fb..6b6c9bf 100644 --- a/src/routes/events/+page.server.ts +++ b/src/routes/events/+page.server.ts @@ -17,14 +17,14 @@ const eventQuery = `*[_type == "events"]{ }`; export const load = async ({ url }) => { - let listOfEvents: EventPost[] = await getFromCMS(eventQuery); + let listOfEvents: EventPost[] = await getFromCMS(eventQuery); - let sortedEvents = listOfEvents.sort( - (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime() - ); + let sortedEvents = listOfEvents.sort( + (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime() + ); - return { - events: sortedEvents, - canonical: url.href - }; + return { + events: sortedEvents, + canonical: url.href + }; }; diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte index b5fecae..8161c9b 100644 --- a/src/routes/events/+page.svelte +++ b/src/routes/events/+page.svelte @@ -9,13 +9,13 @@ let events: EventPost[] = data.events ?? []; let group = $state(EventCategory.ALL_EVENTS); - let categories: {value: EventCategory; label: string}[] = [ - { value: EventCategory.ALL_EVENTS, label: 'All Events' }, - { value: EventCategory.ACADEMIC, label: 'Academic' }, - { value: EventCategory.PROFESSIONAL, label: 'Professional' }, - { value: EventCategory.SOCIAL, label: 'Social' }, - { value: EventCategory.TECHNICAL, label: 'Technical' } -]; + let categories: { value: EventCategory; label: string }[] = [ + { value: EventCategory.ALL_EVENTS, label: 'All Events' }, + { value: EventCategory.ACADEMIC, label: 'Academic' }, + { value: EventCategory.PROFESSIONAL, label: 'Professional' }, + { value: EventCategory.SOCIAL, label: 'Social' }, + { value: EventCategory.TECHNICAL, label: 'Technical' } + ]; // Handle tab change function handleTabChange(selectedCategory: EventCategory) { group = selectedCategory; @@ -32,9 +32,13 @@

Events

-
    +
      {#each categories as category} - {category.label} + {category.label} {/each}
    From 76f1bedf662e6eca0df72e52f237c6d622c54177 Mon Sep 17 00:00:00 2001 From: Minh Vo Date: Tue, 30 Dec 2025 11:03:05 -0500 Subject: [PATCH 12/14] fix styling issue --- src/components/event/EventBlock.svelte | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte index f98c9a0..d5fea7c 100644 --- a/src/components/event/EventBlock.svelte +++ b/src/components/event/EventBlock.svelte @@ -84,7 +84,7 @@ onclick={flipCard} >
-
+
{#if thumbnail} {eventTitle} {:else if eventCategory?.[0] === 'social'} @@ -105,7 +105,7 @@
@@ -284,9 +284,6 @@