diff --git a/src/app.css b/src/app.css index 635e97e..6359b7c 100644 --- a/src/app.css +++ b/src/app.css @@ -207,29 +207,29 @@ h2 { /* Scrollbar Styles */ *::-webkit-scrollbar { - @apply h-1 w-1; + @apply h-1 w-1; } *::-webkit-scrollbar-track { - @apply rounded bg-ecsess-700; + @apply bg-ecsess-700 rounded; } *::-webkit-scrollbar-track:hover { - @apply bg-ecsess-900; + @apply bg-ecsess-900; } *::-webkit-scrollbar-track:active { - @apply bg-ecsess-900; + @apply bg-ecsess-900; } *::-webkit-scrollbar-thumb { - @apply rounded-md bg-ecsess-100; + @apply bg-ecsess-100 rounded-md; } *::-webkit-scrollbar-thumb:hover { - @apply bg-ecsess-300; + @apply bg-ecsess-300; } *::-webkit-scrollbar-thumb:active { - @apply bg-ecsess-300; + @apply bg-ecsess-300; } diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte index e357951..f98c9a0 100644 --- a/src/components/event/EventBlock.svelte +++ b/src/components/event/EventBlock.svelte @@ -1,5 +1,12 @@ -
+>
-
+
- {#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 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} - -
- -
-

- {eventTitle} -

-
+ +
+ +
+

+ {eventTitle} +

+
@@ -154,9 +143,8 @@ {/if}
- -
+
-
+
{#if !isPastEvent}
-
+
{#if registrationLink} - - - Register - - + > + + Register + {:else}
Drop In -
+
{/if}
{/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}