update the event flip card + add remodel scrollbar
This commit is contained in:
Minh Vo
102
src/app.css
102
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);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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';
|
||||
|
||||
let {
|
||||
@@ -8,10 +8,11 @@
|
||||
location,
|
||||
eventDescription,
|
||||
thumbnail,
|
||||
registrationLink,
|
||||
paymentLink,
|
||||
registrationLink, //[LinkType]
|
||||
paymentLink, //[LinkType]
|
||||
generalLink, //[LinkType]
|
||||
eventCategory,
|
||||
isPastEvent = false
|
||||
isPastEvent = false,
|
||||
} = $props();
|
||||
|
||||
let showDescription = $state(false);
|
||||
@@ -59,18 +60,24 @@
|
||||
|
||||
<div
|
||||
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"
|
||||
flip-box
|
||||
group relative flex flex-col overflow-hidden rounded-2xl transition-all duration-300 hover:-translate-y-3 "
|
||||
>
|
||||
<!--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-->
|
||||
<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 -->
|
||||
<div class="relative h-100 overflow-hidden ">
|
||||
<div class="relative h-80 overflow-hidden rounded-2xl ">
|
||||
{#if thumbnail}
|
||||
<img
|
||||
class="h-full w-full object-cover "
|
||||
class="h-full w-full object-cover "
|
||||
src={thumbnail}
|
||||
alt={eventTitle}
|
||||
/>
|
||||
@@ -108,8 +115,14 @@
|
||||
|
||||
<!-- Gradient overlay -->
|
||||
<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>
|
||||
<!-- 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>
|
||||
<!-- Badges -->
|
||||
<div class="absolute top-0 right-0 left-0 flex items-start justify-between gap-2 p-4">
|
||||
@@ -140,12 +153,7 @@
|
||||
{/if}
|
||||
</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 -->
|
||||
<div class="bg-ecsess-900/40 space-y-3 rounded-xl p-4 m-5">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -172,52 +180,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center pb-6">
|
||||
<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">
|
||||
<div class="relative px-6 pb-6 z-100 ">
|
||||
<!-- Action Buttons -->
|
||||
{#if !isPastEvent}
|
||||
<div class="space-y-2">
|
||||
<!-- Add to Calendar Button -->
|
||||
<button
|
||||
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">
|
||||
<!-- Registration & Payment Row & Add to Calendar Button -->
|
||||
<div class="grid sm:grid-cols-3 grid-cols-2 gap-2">
|
||||
{#if registrationLink}
|
||||
<a
|
||||
href={registrationLink}
|
||||
href={registrationLink[0].url}
|
||||
target="_blank"
|
||||
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"
|
||||
@@ -227,44 +198,93 @@
|
||||
</a>
|
||||
{:else}
|
||||
<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} />
|
||||
Drop In
|
||||
</div>
|
||||
</div>
|
||||
{/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}
|
||||
<a
|
||||
href={paymentLink}
|
||||
href={paymentLink[0].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"
|
||||
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} />
|
||||
Pay
|
||||
</a>
|
||||
{:else}
|
||||
<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!
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex justify-center p-6">
|
||||
<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 Post
|
||||
</button>
|
||||
<div class="pb-4">
|
||||
<p>Click to view more</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Back Side -->
|
||||
<div class=" flip-box-back 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>
|
||||
<!--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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
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<{
|
||||
category: Category;
|
||||
@@ -71,6 +71,19 @@
|
||||
.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 => {
|
||||
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>
|
||||
|
||||
<div>
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user