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

update type to enum and change css -> tailwindcss syntax + some ui change

Browse Source
This commit is contained in:
Minh Vo
2025-12-29 02:37:29 -05:00
parent 6ce42e7d36
commit 3e74ac4bcb
6 changed files with 116 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/app.css
View File

@@ -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 */ /* Scrollbar Styles */
*::-webkit-scrollbar { *::-webkit-scrollbar {
height: 4px; @apply h-1 w-1;
width: 4px;
} }
*::-webkit-scrollbar-track { *::-webkit-scrollbar-track {
border-radius: 3px; @apply rounded bg-ecsess-700;
background-color: var(--color-ecsess-700);
} }
*::-webkit-scrollbar-track:hover { *::-webkit-scrollbar-track:hover {
background-color: var(--color-ecsess-900); @apply bg-ecsess-900;
} }
*::-webkit-scrollbar-track:active { *::-webkit-scrollbar-track:active {
background-color: var(--color-ecsess-900); @apply bg-ecsess-900;
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
border-radius: 5px; @apply rounded-md bg-ecsess-100;
background-color: var(--color-ecsess-100);
} }
*::-webkit-scrollbar-thumb:hover { *::-webkit-scrollbar-thumb:hover {
background-color: var(--color-ecsess-300); @apply bg-ecsess-300;
} }
*::-webkit-scrollbar-thumb:active { *::-webkit-scrollbar-thumb:active {
background-color: var(--color-ecsess-300); @apply bg-ecsess-300;
} }

2
src/components/RichText.svelte
View File

@@ -4,6 +4,6 @@
let { value } = $props(); let { value } = $props();
</script> </script>
<div class="typography"> <div class="flex flex-col justify-center-safe">
<PortableText {value} /> <PortableText {value} />
</div> </div>

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

@@ -61,13 +61,13 @@
<div <div
class=" class="
flip-box flip-box
group relative flex flex-col rounded-2xl transition-all duration-300 hover:-translate-y-3" 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="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="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'}">
<!--Flip button--> <!--Flip button-->
<div <div
class=" class="
@@ -181,25 +181,28 @@
</div> </div>
</div> </div>
</div> </div>
<div class="relative px-6 pb-6 z-100 "> <div class="relative px-6 z-100 flex-1">
<!-- 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-2"> <div class="grid sm:grid-cols-3 grid-cols-2 gap-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 items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95" 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
<FilePen class="h-4 w-4" strokeWidth={2.5} /> "
Register >
</a> <FilePen class="h-4 w-4" strokeWidth={2.5} />
Register
</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 shadow-md" 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
@@ -207,7 +210,8 @@
{/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 shadow-md transition-all hover:shadow-lg active:scale-95" 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
shadow-md shadow-ecsess-200 transition-all hover:shadow-lg hover:-translate-y-1 "
> >
<CalendarPlus class="h-5 w-5" strokeWidth={2.5} /> <CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
Add to Calendar Add to Calendar
@@ -217,14 +221,15 @@
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 shadow-md transition-all hover:shadow-lg active:scale-95" 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
shadow-md shadow-ecsess-300 transition-all hover:shadow-lg hover:-translate-y-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 shadow-md" 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 "
> >
Free! Free!
</div> </div>
@@ -234,12 +239,12 @@
</div> </div>
{/if} {/if}
</div> </div>
<div class="pb-4"> <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=" flip-box-back bg-ecsess-950 shadow-xl shadow-ecsess-950/60 rounded-2xl"> <div class=" flex flex-col flip-box-back bg-ecsess-950 shadow-xl shadow-ecsess-950/60 rounded-2xl">
<!--Flip button--> <!--Flip button-->
<div <div
class=" class="
@@ -252,11 +257,11 @@
{eventTitle} {eventTitle}
</h3> </h3>
</div> </div>
<div class="relative h-80 flex flex-1 flex-col z-20 my-2" <div class="relative h-56 md:h-64 xl:h-84 flex flex-col z-20 my-2"
onclick={flipCard} onclick={flipCard}
> >
<!-- Description --> <!-- Description -->
<div class="text-ecsess-100 p-6 flex-1 overflow-y-auto"> <div class="text-ecsess-100 p-6 flex flex-1 justify-center overflow-y-auto border-y border-ecsess-800">
{#if eventDescription} {#if eventDescription}
<RichText value={eventDescription} /> <RichText value={eventDescription} />
{:else} {:else}
@@ -267,14 +272,15 @@
<!-- 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 pb-6 flex flex-wrap w-full items-center justify-center px-6 overflow-auto"> <div class="relative z-20 gap-4 flex flex-1 flex-wrap w-full items-center justify-center p-6 overflow-auto ">
{#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 shadow-md transition-all hover:shadow-lg active:scale-95" 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
shadow-md shadow-ecsess-200 transition-all hover:shadow-lg hover:-translate-y-1"
> >
<ExternalLinkIcon class="h-4 w-4" strokeWidth={2.5} /> <ExternalLinkIcon class="h-4 w-4" strokeWidth={2.5} />
{link.title} {link.title}
@@ -288,5 +294,52 @@
</div> </div>
<style> <style>
.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);
}
</style> </style>

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

@@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import EventBlock from 'components/event/EventBlock.svelte'; import EventBlock from 'components/event/EventBlock.svelte';
import type { EventPost, Category, EventLinkKind, LinkType } from '$lib/schemas'; import { type EventPost, type EventCategory, EventLinkKind, type LinkType } from '$lib/schemas';
let { category, events } = $props<{ let { category, events } = $props<{
category: Category; category: EventCategory;
events: EventPost[]; events: EventPost[];
}>(); }>();
@@ -75,7 +75,7 @@
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 == "general" && link.kind === "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 !== '') {
@@ -103,9 +103,9 @@
location={e.location} location={e.location}
eventDescription={e.description} eventDescription={e.description}
thumbnail={e.thumbnail} thumbnail={e.thumbnail}
registrationLink={getPaymentLink(e, 'registration')} registrationLink={getPaymentLink(e, EventLinkKind.REGISTRATION)}
paymentLink={getPaymentLink(e, 'payment')} paymentLink={getPaymentLink(e, EventLinkKind.PAYMENT)}
generalLink={getPaymentLink(e, 'general')} generalLink={getPaymentLink(e, EventLinkKind.GENERAL)}
eventCategory={e.category} eventCategory={e.category}
isPastEvent={false} isPastEvent={false}
/> />
@@ -129,9 +129,9 @@
location={e.location} location={e.location}
eventDescription={e.description} eventDescription={e.description}
thumbnail={e.thumbnail} thumbnail={e.thumbnail}
registrationLink={getPaymentLink(e, 'registration')} registrationLink={getPaymentLink(e, EventLinkKind.REGISTRATION)}
paymentLink={getPaymentLink(e, 'payment')} paymentLink={getPaymentLink(e, EventLinkKind.PAYMENT)}
generalLink={getPaymentLink(e, 'general')} generalLink={getPaymentLink(e, EventLinkKind.GENERAL)}
eventCategory={e.category} eventCategory={e.category}
isPastEvent={true} isPastEvent={true}
/> />

16
src/lib/schemas.ts
View File

@@ -9,18 +9,28 @@ export type EventPost = {
time: string; time: string;
location: string; location: string;
thumbnail: string; thumbnail: string;
category: string; category: EventCategory;
links: LinkType[]; links: LinkType[];
}; };
export type Category = 'allEvents' | 'academic' | 'professional' | 'social' | 'technical'; export enum EventCategory {
ALL_EVENTS = 'allEvents',
ACADEMIC = 'academic',
PROFESSIONAL = 'professional',
SOCIAL = 'social',
TECHNICAL = 'technical'
};
export type LinkType = { export type LinkType = {
title: string; title: string;
kind: EventLinkKind; kind: EventLinkKind;
url: string; url: string;
}; };
export type EventLinkKind = 'payment' | 'registration' | 'general'; export enum EventLinkKind {
PAYMENT = 'payment',
REGISTRATION = 'registration',
GENERAL = 'general'
};
export type FAQ = { export type FAQ = {
question: string; question: string;

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

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import type { EventPost, Category } from '$lib/schemas'; import { type EventPost, EventCategory } from '$lib/schemas';
import Section from 'components/layout/Section.svelte'; import Section from 'components/layout/Section.svelte';
import SeoMetaTags from 'components/layout/SeoMetaTags.svelte'; import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
import EventTabsTrigger from 'components/event/EventTabsTrigger.svelte'; import EventTabsTrigger from 'components/event/EventTabsTrigger.svelte';
@@ -8,16 +8,16 @@
let { data } = $props(); let { data } = $props();
let events: EventPost[] = data.events ?? []; let events: EventPost[] = data.events ?? [];
let group = $state<Category>('allEvents'); let group = $state<EventCategory>(EventCategory.ALL_EVENTS);
let categories: {value: Category; label: string}[] = [ let categories: {value: EventCategory; label: string}[] = [
{ value: 'allEvents', label: 'All Events' }, { value: EventCategory.ALL_EVENTS, label: 'All Events' },
{ value: 'academic', label: 'Academic' }, { value: EventCategory.ACADEMIC, label: 'Academic' },
{ value: 'professional', label: 'Professional' }, { value: EventCategory.PROFESSIONAL, label: 'Professional' },
{ value: 'social', label: 'Social' }, { value: EventCategory.SOCIAL, label: 'Social' },
{ value: 'technical', label: 'Technical' } { value: EventCategory.TECHNICAL, label: 'Technical' }
]; ];
// Handle tab change // Handle tab change
function handleTabChange(selectedCategory: Category) { function handleTabChange(selectedCategory: EventCategory) {
group = selectedCategory; group = selectedCategory;
} }
</script> </script>