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

update the event flip card + add remodel scrollbar

Browse Source
This commit is contained in:
Minh Vo
2025-12-26 17:28:32 -05:00
parent 157bdec9ea
commit dcdfb4ac6a
4 changed files with 188 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/app.css
View File

@@ -206,42 +206,78 @@ h2 {
} }
.flip-box { .flip-box {
height: 100%; height: 100%;
width: 100%; width: 100%;
perspective: 1000px; /* Remove this if you don't want the 3D effect */ perspective: 1000px; /* Remove this if you don't want the 3D effect */;
} }
.flip-box-inner { .flip-box-inner {
display: grid; display: grid;
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
transition: transform 0.8s; transition: transform 0.8s;
transform-style: preserve-3d; transform-style: preserve-3d;
} }
@keyframes rotate-and-back {
.flip-box-front,.flip-box-back { 0% { transform: rotateY(0); }
grid-area: 1/1; 50% { transform: rotateY(15deg); }
width: 100%; 100% { transform: rotateY(0); }
-webkit-backface-visibility: hidden; /* Safari */ }
backface-visibility: hidden;
}
.flip-box-front {
z-index: 2;
transform: rotateY(0deg);
}
.flip-box-front { .flip-box:hover .flip-box-front{
z-index: 2; animation: rotate-and-back 0.3s ease-in-out;
transform: rotateY(0deg); }
}
.flip-box-back { .flip-box-front,.flip-box-back {
transform: rotateY(180deg); 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 { .flip-box-back {
transform: rotateY(180deg); 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);
}

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

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { CalendarDays, MapPin, Link as LinkIcon, FilePen, CalendarPlus } 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 {
@@ -8,10 +8,11 @@
location, location,
eventDescription, eventDescription,
thumbnail, thumbnail,
registrationLink, registrationLink, //[LinkType]
paymentLink, paymentLink, //[LinkType]
generalLink, //[LinkType]
eventCategory, eventCategory,
isPastEvent = false isPastEvent = false,
} = $props(); } = $props();
let showDescription = $state(false); let showDescription = $state(false);
@@ -59,18 +60,24 @@
<div <div
class=" class="
flip-box 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" group relative flex flex-col overflow-hidden rounded-2xl transition-all duration-300 hover:-translate-y-3 "
> >
<!--Flip Card container--> <!--Flip Card container-->
<div class="flip-box-inner" class:show-back={showDescription}> <div class="flip-box-inner rounded-2xl " class:show-back={showDescription}>
<!--Front Side--> <!--Front Side-->
<div class="flip-box-front"> <div class="flip-box-front bg-ecsess-950 shadow-ecsess-950/50 rounded-2xl">
<!--Flip button-->
<div
class="
absolute inset-0 z-10 cursor-pointer rounded-2xl bg-transparent"
onclick={flipCard}
></div>
<!-- Image Container with Gradient Overlay --> <!-- Image Container with Gradient Overlay -->
<div class="relative h-100 overflow-hidden "> <div class="relative h-80 overflow-hidden rounded-2xl ">
{#if thumbnail} {#if thumbnail}
<img <img
class="h-full w-full object-cover " class="h-full w-full object-cover "
src={thumbnail} src={thumbnail}
alt={eventTitle} alt={eventTitle}
/> />
@@ -108,8 +115,14 @@
<!-- Gradient overlay --> <!-- Gradient overlay -->
<div <div
class="absolute inset-0 bg-gradient-to-b from-transparent via-ecsess-800/30 to-ecsess-950" class="absolute inset-0 rounded-2xl bg-gradient-to-b from-transparent via-ecsess-800/30 to-ecsess-950"
></div> ></div>
<!-- Event Title Overlay -->
<div class="absolute right-0 bottom-0 left-0 p-6">
<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
{eventTitle}
</h3>
</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">
@@ -140,12 +153,7 @@
{/if} {/if}
</div> </div>
<!-- Event Title Overlay -->
<div class="right-0 bottom-0 left-0 p-6">
<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
{eventTitle}
</h3>
</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 space-y-3 rounded-xl p-4 m-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
@@ -172,52 +180,15 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex justify-center pb-6"> <div class="relative px-6 pb-6 z-100 ">
<button
class="cursor-pointer rounded-full bg-ecsess-600/80 px-4 py-2 text-sm font-bold text-white shadow-md transition-all hover:bg-ecsess-700 hover:shadow-lg active:scale-95"
onclick={flipCard}
>
View Details
</button>
</div>
</div>
<!-- Back Side -->
<div class=" flip-box-back">
<!--Event Title-->
<div class="right-0 bottom-0 left-0 p-6">
<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
{eventTitle}
</h3>
</div>
<div class="h-100 flex flex-1 flex-col p-6">
<!-- Description -->
<div class="text-ecsess-100 mb-6 flex-1 overflow-y-auto">
{#if eventDescription}
<RichText value={eventDescription} />
{:else}
<p>No description available for this event.</p>
{/if}
</div>
</div>
<div class="px-6 pb-6">
<!-- Action Buttons --> <!-- Action Buttons -->
{#if !isPastEvent} {#if !isPastEvent}
<div class="space-y-2"> <div class="space-y-2">
<!-- Add to Calendar Button --> <!-- Registration & Payment Row & Add to Calendar Button -->
<button <div class="grid sm:grid-cols-3 grid-cols-2 gap-2">
onclick={addToCalendar}
class="bg-ecsess-400 hover:bg-ecsess-500 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"
>
<CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
Add to Calendar
</button>
<!-- Registration & Payment Row -->
<div class="grid grid-cols-2 gap-2">
{#if registrationLink} {#if registrationLink}
<a <a
href={registrationLink} 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 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"
@@ -227,44 +198,93 @@
</a> </a>
{:else} {:else}
<div <div
class="bg-ecsess-900 text-ecsess-200 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold" 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"
> >
<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
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"
>
<CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
Add to Calendar
</button>
{#if paymentLink} {#if paymentLink}
<a <a
href={paymentLink} href={paymentLink[0].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="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"
> >
<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="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="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"
> >
Free! Free!
</div> </div>
{/if} {/if}
</div> </div>
</div> </div>
{/if} {/if}
</div> </div>
<div class="flex justify-center p-6"> <div class="pb-4">
<button <p>Click to view more</p>
class="cursor-pointer rounded-full bg-ecsess-600/80 px-4 py-2 text-sm font-bold text-white shadow-md transition-all hover:bg-ecsess-700 hover:shadow-lg active:scale-95" </div>
onclick={flipCard} </div>
> <!-- Back Side -->
View Post <div class=" flip-box-back bg-ecsess-950 shadow-ecsess-950/50 rounded-2xl">
</button> <!--Flip button-->
<div
class="
absolute inset-0 z-10 cursor-pointer rounded-2xl bg-transparent"
onclick={flipCard}
></div>
<!--Event Title-->
<div class="right-0 bottom-0 left-0 p-6">
<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
{eventTitle}
</h3>
</div>
<div class="relative h-80 flex flex-1 flex-col z-20 my-2"
onclick={flipCard}
>
<!-- Description -->
<div class="text-ecsess-100 p-6 flex-1 overflow-y-auto">
{#if eventDescription}
<RichText value={eventDescription} />
{:else}
<p>No description available for this event.</p>
{/if}
</div>
</div> </div>
<!-- General Links -->
<div class="max-h-41 relative z-20 gap-4 pb-6 flex flex-wrap w-full items-center justify-center px-6 overflow-auto">
{#if generalLink}
{#each generalLink as link}
<a
href={link.url}
target="_blank"
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"
>
<ExternalLinkIcon class="h-4 w-4" strokeWidth={2.5} />
{link.title}
</a>
{/each}
{/if}
</div>
</div> </div>
</div> </div>
</div> </div>
<style>
</style>

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

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import EventBlock from 'components/event/EventBlock.svelte'; import EventBlock from 'components/event/EventBlock.svelte';
import type { EventPost, Category } from '$lib/schemas'; import type { EventPost, Category, EventLinkKind, LinkType } from '$lib/schemas';
let { category, events } = $props<{ let { category, events } = $props<{
category: Category; category: Category;
@@ -71,6 +71,19 @@
.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 => {
let generalLinks: LinkType[] = [];
for (const link of e.links ?? []) {
if (type == "general" && link.kind === "general" && link.url !== '') {
generalLinks.push(link);
}
else if (link.kind === type && link.url !== '') {
return [link];
}
}
return generalLinks.length > 0 ? generalLinks : null;
};
</script> </script>
<div> <div>
@@ -90,8 +103,9 @@
location={e.location} location={e.location}
eventDescription={e.description} eventDescription={e.description}
thumbnail={e.thumbnail} thumbnail={e.thumbnail}
registrationLink={e.reglink} registrationLink={getPaymentLink(e, 'registration')}
paymentLink={e.paylink} paymentLink={getPaymentLink(e, 'payment')}
generalLink={getPaymentLink(e, 'general')}
eventCategory={e.category} eventCategory={e.category}
isPastEvent={false} isPastEvent={false}
/> />
@@ -115,8 +129,9 @@
location={e.location} location={e.location}
eventDescription={e.description} eventDescription={e.description}
thumbnail={e.thumbnail} thumbnail={e.thumbnail}
registrationLink={e.reglink} registrationLink={getPaymentLink(e, 'registration')}
paymentLink={e.paylink} paymentLink={getPaymentLink(e, 'payment')}
generalLink={getPaymentLink(e, 'general')}
eventCategory={e.category} eventCategory={e.category}
isPastEvent={true} isPastEvent={true}
/> />

13
src/lib/schemas.ts
View File

@@ -10,15 +10,18 @@ export type EventPost = {
location: string; location: string;
thumbnail: string; thumbnail: string;
category: string; category: string;
links: [{ links: LinkType[];
title: string,
kind: string, // payment, registration, general (enum `kind`)
url: string
}],
}; };
export type Category = 'allEvents' | 'academic' | 'professional' | 'social' | 'technical'; 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 = { export type FAQ = {
question: string; question: string;
answer: string; answer: string;