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

format using prettier

Browse Source
This commit is contained in:
Minh Vo
2025-12-30 10:27:10 -05:00
parent ce494e182a
commit b92ab62f1d
7 changed files with 144 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app.css
View File

@@ -207,29 +207,29 @@ h2 {
/* Scrollbar Styles */ /* Scrollbar Styles */
*::-webkit-scrollbar { *::-webkit-scrollbar {
@apply h-1 w-1; @apply h-1 w-1;
} }
*::-webkit-scrollbar-track { *::-webkit-scrollbar-track {
@apply rounded bg-ecsess-700; @apply bg-ecsess-700 rounded;
} }
*::-webkit-scrollbar-track:hover { *::-webkit-scrollbar-track:hover {
@apply bg-ecsess-900; @apply bg-ecsess-900;
} }
*::-webkit-scrollbar-track:active { *::-webkit-scrollbar-track:active {
@apply bg-ecsess-900; @apply bg-ecsess-900;
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
@apply rounded-md bg-ecsess-100; @apply bg-ecsess-100 rounded-md;
} }
*::-webkit-scrollbar-thumb:hover { *::-webkit-scrollbar-thumb:hover {
@apply bg-ecsess-300; @apply bg-ecsess-300;
} }
*::-webkit-scrollbar-thumb:active { *::-webkit-scrollbar-thumb:active {
@apply bg-ecsess-300; @apply bg-ecsess-300;
} }

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

@@ -1,5 +1,12 @@
<script lang="ts"> <script lang="ts">
import { CalendarDays, MapPin, Link as LinkIcon, FilePen, CalendarPlus, ExternalLink as ExternalLinkIcon } from '@lucide/svelte'; import {
CalendarDays,
MapPin,
Link as LinkIcon,
FilePen,
CalendarPlus,
ExternalLink as ExternalLinkIcon
} from '@lucide/svelte';
import RichText from 'components/RichText.svelte'; import RichText from 'components/RichText.svelte';
let { let {
@@ -12,7 +19,7 @@
paymentLink, //[LinkType] paymentLink, //[LinkType]
generalLink, //[LinkType] generalLink, //[LinkType]
eventCategory, eventCategory,
isPastEvent = false, isPastEvent = false
} = $props(); } = $props();
let showDescription = $state(false); let showDescription = $state(false);
@@ -54,20 +61,22 @@
const flipCard = (e: MouseEvent) => { const flipCard = (e: MouseEvent) => {
showDescription = !showDescription; showDescription = !showDescription;
}; };
</script> </script>
<div <div
class=" class="
flip-box flip-box
group relative flex flex-col rounded-2xl" group relative flex flex-col rounded-2xl"
> >
<!--Flip Card container--> <!--Flip Card container-->
<div class="flip-box-inner rounded-2xl" class:show-back={showDescription}> <div class="flip-box-inner rounded-2xl" class:show-back={showDescription}>
<!--Front Side--> <!--Front Side-->
<!--Opacity thing is to fix the visual bug on ios--> <!--Opacity thing is to fix the visual bug on ios-->
<div class="flex flex-col flip-box-front bg-ecsess-950 shadow-xl shadow-ecsess-950/60 rounded-2xl transition-opacity duration-500 {showDescription ? 'opacity-0 pointer-events-none' : 'opacity-100'}"> <div
class="flip-box-front bg-ecsess-950 shadow-ecsess-950/60 flex flex-col rounded-2xl shadow-xl transition-opacity duration-500 {showDescription
? 'pointer-events-none opacity-0'
: 'opacity-100'}"
>
<!--Flip button--> <!--Flip button-->
<div <div
class=" class="
@@ -75,55 +84,35 @@
onclick={flipCard} onclick={flipCard}
></div> ></div>
<!-- Image Container with Gradient Overlay --> <!-- Image Container with Gradient Overlay -->
<div class="relative h-80 overflow-hidden rounded-2xl "> <div class="relative h-80 overflow-hidden rounded-2xl">
{#if thumbnail} {#if thumbnail}
<img <img class="h-full w-full object-cover" src={thumbnail} alt={eventTitle} />
class="h-full w-full object-cover " {:else if eventCategory?.[0] === 'social'}
src={thumbnail} <img class="h-full w-full object-cover" src="/Social.jpg" alt="Social Event" />
alt={eventTitle} {:else if eventCategory?.[0] === 'technical'}
/> <img class="h-full w-full object-cover" src="/Technical.jpg" alt="Technical Event" />
{:else if eventCategory?.[0] === 'social'} {:else if eventCategory?.[0] === 'professional'}
<img <img
class="h-full w-full object-cover " class="h-full w-full object-cover"
src="/Social.jpg" src="/Professional.jpg"
alt="Social Event" alt="Professional Event"
/> />
{:else if eventCategory?.[0] === 'technical'} {:else if eventCategory?.[0] === 'academic'}
<img <img class="h-full w-full object-cover" src="/Academic.jpg" alt="Academic Event" />
class="h-full w-full object-cover " {:else}
src="/Technical.jpg" <img class="h-full w-full object-cover" src="/ECSESS.png" alt="ECSESS Event" />
alt="Technical Event" {/if}
/>
{:else if eventCategory?.[0] === 'professional'}
<img
class="h-full w-full object-cover "
src="/Professional.jpg"
alt="Professional Event"
/>
{:else if eventCategory?.[0] === 'academic'}
<img
class="h-full w-full object-cover "
src="/Academic.jpg"
alt="Academic Event"
/>
{:else}
<img
class="h-full w-full object-cover "
src="/ECSESS.png"
alt="ECSESS Event"
/>
{/if}
<!-- Gradient overlay --> <!-- Gradient overlay -->
<div <div
class="absolute inset-0 rounded-2xl bg-gradient-to-b from-transparent via-ecsess-800/30 to-ecsess-950" class="via-ecsess-800/30 to-ecsess-950 absolute inset-0 rounded-2xl bg-gradient-to-b from-transparent"
></div> ></div>
<!-- Event Title Overlay --> <!-- Event Title Overlay -->
<div class="absolute right-0 bottom-0 left-0 p-6"> <div class="absolute right-0 bottom-0 left-0 p-6">
<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl"> <h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
{eventTitle} {eventTitle}
</h3> </h3>
</div> </div>
</div> </div>
<!-- Badges --> <!-- Badges -->
<div class="absolute top-0 right-0 left-0 flex items-start justify-between gap-2 p-4"> <div class="absolute top-0 right-0 left-0 flex items-start justify-between gap-2 p-4">
@@ -154,9 +143,8 @@
{/if} {/if}
</div> </div>
<!-- Info Grid --> <!-- Info Grid -->
<div class="bg-ecsess-900/40 space-y-3 rounded-xl p-4 m-5"> <div class="bg-ecsess-900/40 m-5 space-y-3 rounded-xl p-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div <div
class="bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full shadow-md" class="bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full shadow-md"
@@ -181,37 +169,36 @@
</div> </div>
</div> </div>
</div> </div>
<div class="relative p-4 px-6 z-100 flex-1"> <div class="relative z-100 flex-1 p-4 px-6">
<!-- Action Buttons --> <!-- Action Buttons -->
{#if !isPastEvent} {#if !isPastEvent}
<div class="space-y-2"> <div class="space-y-2">
<!-- Registration & Payment Row & Add to Calendar Button --> <!-- Registration & Payment Row & Add to Calendar Button -->
<div class="grid sm:grid-cols-3 grid-cols-2 gap-3 md:gap-2"> <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-2">
{#if registrationLink} {#if registrationLink}
<a <a
href={registrationLink[0].url} href={registrationLink[0].url}
target="_blank" target="_blank"
rel="noopener noreferrer" 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 class="bg-ecsess-500 hover:bg-ecsess-600 p3 shadow-ecsess-300 flex flex-1 items-center justify-center gap-2 rounded-xl px-4 text-sm font-bold
shadow-md shadow-ecsess-300 transition-all hover:shadow-lg hover:-translate-y-1 text-white shadow-md transition-all hover:-translate-y-1 hover:shadow-lg
" "
> >
<FilePen class="h-4 w-4" strokeWidth={2.5} /> <FilePen class="h-4 w-4" strokeWidth={2.5} />
Register Register
</a> </a>
{:else} {:else}
<div <div
class="bg-ecsess-500 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white " class="bg-ecsess-500 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white"
> >
<FilePen class="h-4 w-4" strokeWidth={2.5} /> <FilePen class="h-4 w-4" strokeWidth={2.5} />
Drop In Drop In
</div> </div>
{/if} {/if}
<button <button
onclick={addToCalendar} onclick={addToCalendar}
class="hover:cursor-pointer 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 class="bg-ecsess-700 hover:bg-ecsess-800 shadow-ecsess-400 flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white
shadow-md shadow-ecsess-400 transition-all hover:shadow-lg hover:-translate-y-1 " shadow-md transition-all hover:-translate-y-1 hover:cursor-pointer hover:shadow-lg"
> >
<CalendarPlus class="h-5 w-5" strokeWidth={2.5} /> <CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
Add to Calendar Add to Calendar
@@ -221,20 +208,19 @@
href={paymentLink[0].url} href={paymentLink[0].url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="sm:col-span-1 col-span-2 bg-ecsess-800 hover:bg-ecsess-900 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white class="bg-ecsess-800 hover:bg-ecsess-900 shadow-ecsess-500 col-span-2 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white
shadow-md shadow-ecsess-500 transition-all hover:shadow-lg hover:-translate-y-1 " shadow-md transition-all hover:-translate-y-1 hover:shadow-lg sm:col-span-1"
> >
<LinkIcon class="h-4 w-4" strokeWidth={2.5} /> <LinkIcon class="h-4 w-4" strokeWidth={2.5} />
Pay Pay
</a> </a>
{:else} {:else}
<div <div
class="sm:col-span-1 col-span-2 bg-ecsess-800 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white " class="bg-ecsess-800 col-span-2 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white sm:col-span-1"
> >
Free! Free!
</div> </div>
{/if} {/if}
</div> </div>
</div> </div>
{/if} {/if}
@@ -242,9 +228,11 @@
<div class="p-4 lg:hidden"> <div class="p-4 lg:hidden">
<p>Click to view more</p> <p>Click to view more</p>
</div> </div>
</div> </div>
<!-- Back Side --> <!-- Back Side -->
<div class=" flex flex-col flip-box-back bg-ecsess-950 shadow-xl shadow-ecsess-950/60 rounded-2xl"> <div
class=" flip-box-back bg-ecsess-950 shadow-ecsess-950/60 flex flex-col rounded-2xl shadow-xl"
>
<!--Flip button--> <!--Flip button-->
<div <div
class=" class="
@@ -257,11 +245,11 @@
{eventTitle} {eventTitle}
</h3> </h3>
</div> </div>
<div class="relative h-56 md:h-64 xl:h-84 flex flex-col z-20 my-2" <div class="relative z-20 my-2 flex h-56 flex-col md:h-64 xl:h-84" onclick={flipCard}>
onclick={flipCard}
>
<!-- Description --> <!-- Description -->
<div class="text-ecsess-100 p-6 flex flex-1 justify-center overflow-y-auto border-y border-ecsess-800"> <div
class="text-ecsess-100 border-ecsess-800 flex flex-1 justify-center overflow-y-auto border-y p-6"
>
{#if eventDescription} {#if eventDescription}
<RichText value={eventDescription} /> <RichText value={eventDescription} />
{:else} {:else}
@@ -272,15 +260,17 @@
<!-- General Links --> <!-- General Links -->
<!--add max-h-41 we decide to go back to scrollable--> <!--add max-h-41 we decide to go back to scrollable-->
<div class="relative z-20 gap-4 flex flex-1 flex-wrap w-full items-center justify-center p-6 overflow-auto "> <div
class="relative z-20 flex w-full flex-1 flex-wrap items-center justify-center gap-4 overflow-auto p-6"
>
{#if generalLink} {#if generalLink}
{#each generalLink as link} {#each generalLink as link}
<a <a
href={link.url} href={link.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
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 class="bg-ecsess-600 hover:bg-ecsess-700 shadow-ecsess-400 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold
shadow-md shadow-ecsess-400 transition-all hover:shadow-lg hover:-translate-y-1" text-white shadow-md transition-all hover:-translate-y-1 hover:shadow-lg"
> >
<ExternalLinkIcon class="h-4 w-4" strokeWidth={2.5} /> <ExternalLinkIcon class="h-4 w-4" strokeWidth={2.5} />
{link.title} {link.title}
@@ -289,7 +279,6 @@
{/if} {/if}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -302,18 +291,27 @@
} }
.flip-box-inner { .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 { @keyframes rotate-and-back {
0% { transform: rotateY(0); } 0% {
33% { transform: rotateY(5deg); } transform: rotateY(0);
66% { transform: rotateY(-5deg); } }
100% { transform: rotateY(0); } 33% {
transform: rotateY(5deg);
}
66% {
transform: rotateY(-5deg);
}
100% {
transform: rotateY(0);
}
} }
/*Only work with normal css for now */ /*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 { .flip-box:hover .flip-box-front {
animation: rotate-and-back 0.3s ease-in-out; animation: rotate-and-back 0.3s ease-in-out;
} }
@@ -321,10 +319,10 @@
.flip-box-front, .flip-box-front,
.flip-box-back { .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 { .flip-box-front {
@apply z-2 transform-rotate-y-0 transform-3d; @apply transform-rotate-y-0 z-2 transform-3d;
} }
.flip-box-back { .flip-box-back {
@@ -334,4 +332,4 @@
.show-back { .show-back {
@apply rotate-y-180; @apply rotate-y-180;
} }
</style> </style>

21
src/components/event/EventTabsContent.svelte
View File

@@ -62,26 +62,31 @@
const upcomingEvents = $derived( const upcomingEvents = $derived(
filtered filtered
.filter((e: { date: string; }) => !isPastEvent(e.date)) .filter((e: { date: string }) => !isPastEvent(e.date))
.sort((a: { date: string; }, b: { date: string; }) => parseEventDate(a.date).getTime() - parseEventDate(b.date).getTime()) .sort(
(a: { date: string }, b: { date: string }) =>
parseEventDate(a.date).getTime() - parseEventDate(b.date).getTime()
)
); );
const finishedEvents = $derived( const finishedEvents = $derived(
filtered filtered
.filter((e: { date: string; }) => isPastEvent(e.date)) .filter((e: { date: string }) => isPastEvent(e.date))
.sort((a: { date: string; }, b: { date: string; }) => parseEventDate(b.date).getTime() - parseEventDate(a.date).getTime()) .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[] = []; let generalLinks: LinkType[] = [];
for (const link of e.links ?? []) { for (const link of e.links ?? []) {
if (type == EventLinkKind.GENERAL && link.kind === EventLinkKind.GENERAL && link.url !== '') { if (type == EventLinkKind.GENERAL && link.kind === EventLinkKind.GENERAL && link.url !== '') {
generalLinks.push(link); generalLinks.push(link);
} } else if (link.kind === type && link.url !== '') {
else if (link.kind === type && link.url !== '') {
return [link]; return [link];
} }
} }
return generalLinks.length > 0 ? generalLinks : null; return generalLinks.length > 0 ? generalLinks : null;
}; };
</script> </script>

5
src/components/event/EventTabsTrigger.svelte
View File

@@ -1,13 +1,14 @@
<script> <script>
let { value, selected, onclick, children } = $props(); let { value, selected, onclick, children } = $props();
</script> </script>
<div> <div>
<button <button
{value} {value}
onclick={() => onclick(value)} onclick={() => onclick(value)}
class="hover:border-b-ecsess-200 {selected ? 'border-b-ecsess-200' : 'border-b-transparent'} border-b-4 px-2 pb-2 text-lg transition-all ease-in-out" class="hover:border-b-ecsess-200 {selected
? 'border-b-ecsess-200'
: 'border-b-transparent'} border-b-4 px-2 pb-2 text-lg transition-all ease-in-out"
> >
{@render children()} {@render children()}
</button> </button>

11
src/lib/schemas.ts
View File

@@ -1,6 +1,5 @@
import type { InputValue } from '@portabletext/svelte'; import type { InputValue } from '@portabletext/svelte';
export type EventPost = { export type EventPost = {
id: string; id: string;
name: string; name: string;
@@ -19,18 +18,18 @@ export enum EventCategory {
PROFESSIONAL = 'professional', PROFESSIONAL = 'professional',
SOCIAL = 'social', SOCIAL = 'social',
TECHNICAL = 'technical' TECHNICAL = 'technical'
}; }
export type LinkType = { export type LinkType = {
title: string; title: string;
kind: EventLinkKind; kind: EventLinkKind;
url: string; url: string;
}; };
export enum EventLinkKind { export enum EventLinkKind {
PAYMENT = 'payment', PAYMENT = 'payment',
REGISTRATION = 'registration', REGISTRATION = 'registration',
GENERAL = 'general' GENERAL = 'general'
}; }
export type FAQ = { export type FAQ = {
question: string; question: string;

16
src/routes/events/+page.server.ts
View File

@@ -17,14 +17,14 @@ const eventQuery = `*[_type == "events"]{
}`; }`;
export const load = async ({ url }) => { export const load = async ({ url }) => {
let listOfEvents: EventPost[] = await getFromCMS(eventQuery); let listOfEvents: EventPost[] = await getFromCMS(eventQuery);
let sortedEvents = listOfEvents.sort( let sortedEvents = listOfEvents.sort(
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime() (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
); );
return { return {
events: sortedEvents, events: sortedEvents,
canonical: url.href canonical: url.href
}; };
}; };

22
src/routes/events/+page.svelte
View File

@@ -9,13 +9,13 @@
let events: EventPost[] = data.events ?? []; let events: EventPost[] = data.events ?? [];
let group = $state<EventCategory>(EventCategory.ALL_EVENTS); let group = $state<EventCategory>(EventCategory.ALL_EVENTS);
let categories: {value: EventCategory; label: string}[] = [ let categories: { value: EventCategory; label: string }[] = [
{ value: EventCategory.ALL_EVENTS, label: 'All Events' }, { value: EventCategory.ALL_EVENTS, label: 'All Events' },
{ value: EventCategory.ACADEMIC, label: 'Academic' }, { value: EventCategory.ACADEMIC, label: 'Academic' },
{ value: EventCategory.PROFESSIONAL, label: 'Professional' }, { value: EventCategory.PROFESSIONAL, label: 'Professional' },
{ value: EventCategory.SOCIAL, label: 'Social' }, { value: EventCategory.SOCIAL, label: 'Social' },
{ value: EventCategory.TECHNICAL, label: 'Technical' } { value: EventCategory.TECHNICAL, label: 'Technical' }
]; ];
// Handle tab change // Handle tab change
function handleTabChange(selectedCategory: EventCategory) { function handleTabChange(selectedCategory: EventCategory) {
group = selectedCategory; group = selectedCategory;
@@ -32,9 +32,13 @@
<p class="page-title">Events</p> <p class="page-title">Events</p>
<div> <div>
<ul class="flex justify-center flex-wrap gap-2"> <ul class="flex flex-wrap justify-center gap-2">
{#each categories as category} {#each categories as category}
<EventTabsTrigger value={category.value} selected={group=== category.value} onclick={handleTabChange}>{category.label}</EventTabsTrigger> <EventTabsTrigger
value={category.value}
selected={group === category.value}
onclick={handleTabChange}>{category.label}</EventTabsTrigger
>
{/each} {/each}
</ul> </ul>