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

create flip card to separate description from event image

Browse Source
This commit is contained in:
Minh Vo
2025-12-23 22:54:40 -05:00
parent b4bb7dec0c
commit b70337e949
2 changed files with 242 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/app.css
View File

@@ -204,3 +204,44 @@ h2 {
@apply mt-3 text-sm leading-5;
}
}
.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;
}
.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);
}
.flip-box-front {
z-index: 2;
transform: rotateY(0deg);
}
.flip-box-back {
transform: rotateY(180deg);
}
.show-back {
transform: rotateY(180deg);
}

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

@@ -1,5 +1,4 @@
<script lang="ts">
//import { PortableText } from '@portabletext/svelte';
import { CalendarDays, MapPin, Link as LinkIcon, FilePen, CalendarPlus } from '@lucide/svelte';
import RichText from 'components/RichText.svelte';
@@ -15,6 +14,8 @@
isPastEvent = false
} = $props();
let showDescription = $state(false);
// Function to generate .ics file for calendar
const addToCalendar = () => {
const eventDate = new Date(date);
@@ -48,46 +49,58 @@
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
const flipCard = (e: MouseEvent) => {
showDescription = !showDescription;
};
</script>
<div
class="group bg-ecsess-950 shadow-ecsess-950/50 relative flex h-full flex-col overflow-hidden rounded-2xl shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
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 Card container-->
<div class="flip-box-inner" class:show-back={showDescription}>
<!--Front Side-->
<div class="flip-box-front">
<!-- Image Container with Gradient Overlay -->
<div class="relative h-64 overflow-hidden">
<div class="relative h-100 overflow-hidden ">
{#if thumbnail}
<img
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
class="h-full w-full object-cover "
src={thumbnail}
alt={eventTitle}
/>
{:else if eventCategory?.[0] === 'social'}
<img
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
class="h-full w-full object-cover "
src="/Social.jpg"
alt="Social Event"
/>
{:else if eventCategory?.[0] === 'technical'}
<img
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
class="h-full w-full object-cover "
src="/Technical.jpg"
alt="Technical Event"
/>
{:else if eventCategory?.[0] === 'professional'}
<img
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
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 transition-transform duration-500 group-hover:scale-110"
class="h-full w-full object-cover "
src="/Academic.jpg"
alt="Academic Event"
/>
{:else}
<img
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
class="h-full w-full object-cover "
src="/ECSESS.png"
alt="ECSESS Event"
/>
@@ -95,9 +108,9 @@
<!-- Gradient overlay -->
<div
class="via-ecsess-800/30 to-ecsess-950 absolute inset-0 bg-gradient-to-b from-transparent"
class="absolute inset-0 bg-gradient-to-b from-transparent via-ecsess-800/30 to-ecsess-950"
></div>
</div>
<!-- Badges -->
<div class="absolute top-0 right-0 left-0 flex items-start justify-between gap-2 p-4">
{#if isPastEvent}
@@ -128,24 +141,13 @@
</div>
<!-- Event Title Overlay -->
<div class="absolute right-0 bottom-0 left-0 p-6">
<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>
<!-- Content Section -->
<div class="flex flex-1 flex-col p-6">
<!-- Description -->
{#if eventDescription}
<div class="text-ecsess-100 mb-6 line-clamp-5">
<RichText value={eventDescription} />
</div>
{/if}
<!-- Info Grid -->
<div class="bg-ecsess-900/40 mb-6 space-y-3 rounded-xl p-4">
<div class="bg-ecsess-900/40 space-y-3 rounded-xl p-4 m-5">
<div class="flex items-center gap-3">
<div
class="bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full shadow-md"
@@ -170,7 +172,35 @@
</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">
<!-- Action Buttons -->
{#if !isPastEvent}
<div class="space-y-2">
@@ -225,4 +255,16 @@
</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>
</div>
</div>
</div>