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

update event tab and edit event card

Browse Source
This commit is contained in:
Minh Vo
2025-12-26 19:14:16 -05:00
parent dcdfb4ac6a
commit bbc4e373a3
4 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app.css
View File

@@ -230,7 +230,8 @@ h2 {
animation: rotate-and-back 0.3s ease-in-out;
}
.flip-box-front,.flip-box-back {
.flip-box-front,
.flip-box-back {
grid-area: 1/1;
width: 100%;
-webkit-backface-visibility: hidden; /* Safari */
@@ -252,32 +253,32 @@ h2 {
/* Scrollbar Styles */
*::-webkit-scrollbar {
height: 3px;
width: 2px;
height: 4px;
width: 4px;
}
*::-webkit-scrollbar-track {
border-radius: 3px;
background-color: var(--color-ecsess-50);
background-color: var(--color-ecsess-700);
}
*::-webkit-scrollbar-track:hover {
background-color: var(--color-ecsess-200);
background-color: var(--color-ecsess-900);
}
*::-webkit-scrollbar-track:active {
background-color: var(--color-ecsess-200);
background-color: var(--color-ecsess-900);
}
*::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: var(--color-ecsess-800);
background-color: var(--color-ecsess-100);
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--color-ecsess-500);
background-color: var(--color-ecsess-300);
}
*::-webkit-scrollbar-thumb:active {
background-color: var(--color-ecsess-500);
background-color: var(--color-ecsess-300);
}

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

@@ -66,7 +66,8 @@
<!--Flip Card container-->
<div class="flip-box-inner rounded-2xl " class:show-back={showDescription}>
<!--Front Side-->
<div class="flip-box-front bg-ecsess-950 shadow-ecsess-950/50 rounded-2xl">
<!--Opacity thing is to fix the visual bug on ios-->
<div class="flip-box-front bg-ecsess-950 shadow-ecsess-950/50 rounded-2xl transition-opacity duration-500 {showDescription ? 'opacity-0 pointer-events-none' : 'opacity-100'}">
<!--Flip button-->
<div
class="
@@ -265,7 +266,8 @@
</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">
<!--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">
{#if generalLink}
{#each generalLink as link}
<a

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

@@ -1,5 +1,5 @@
<script>
let { value, onclick, children } = $props();
let { value, selected, onclick, children } = $props();
</script>
@@ -7,7 +7,7 @@
<button
{value}
onclick={() => onclick(value)}
class="hover:border-b-ecsess-200 data-[state=active]:border-b-ecsess-400 border-b-4 border-b-transparent 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()}
</button>

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

@@ -34,7 +34,7 @@
<div>
<ul class="flex justify-center flex-wrap gap-2">
{#each categories as category}
<EventTabsTrigger value={category.value} onclick={handleTabChange}>{category.label}</EventTabsTrigger>
<EventTabsTrigger value={category.value} selected={group=== category.value} onclick={handleTabChange}>{category.label}</EventTabsTrigger>
{/each}
</ul>