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; 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; grid-area: 1/1;
width: 100%; width: 100%;
-webkit-backface-visibility: hidden; /* Safari */ -webkit-backface-visibility: hidden; /* Safari */
@@ -252,32 +253,32 @@ h2 {
/* Scrollbar Styles */ /* Scrollbar Styles */
*::-webkit-scrollbar { *::-webkit-scrollbar {
height: 3px; height: 4px;
width: 2px; width: 4px;
} }
*::-webkit-scrollbar-track { *::-webkit-scrollbar-track {
border-radius: 3px; border-radius: 3px;
background-color: var(--color-ecsess-50); background-color: var(--color-ecsess-700);
} }
*::-webkit-scrollbar-track:hover { *::-webkit-scrollbar-track:hover {
background-color: var(--color-ecsess-200); background-color: var(--color-ecsess-900);
} }
*::-webkit-scrollbar-track:active { *::-webkit-scrollbar-track:active {
background-color: var(--color-ecsess-200); background-color: var(--color-ecsess-900);
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
border-radius: 5px; border-radius: 5px;
background-color: var(--color-ecsess-800); background-color: var(--color-ecsess-100);
} }
*::-webkit-scrollbar-thumb:hover { *::-webkit-scrollbar-thumb:hover {
background-color: var(--color-ecsess-500); background-color: var(--color-ecsess-300);
} }
*::-webkit-scrollbar-thumb:active { *::-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--> <!--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-->
<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--> <!--Flip button-->
<div <div
class=" class="
@@ -265,7 +266,8 @@
</div> </div>
<!-- General Links --> <!-- 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} {#if generalLink}
{#each generalLink as link} {#each generalLink as link}
<a <a

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

@@ -1,5 +1,5 @@
<script> <script>
let { value, onclick, children } = $props(); let { value, selected, onclick, children } = $props();
</script> </script>
@@ -7,7 +7,7 @@
<button <button
{value} {value}
onclick={() => onclick(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()} {@render children()}
</button> </button>

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

@@ -34,7 +34,7 @@
<div> <div>
<ul class="flex justify-center flex-wrap gap-2"> <ul class="flex justify-center flex-wrap gap-2">
{#each categories as category} {#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} {/each}
</ul> </ul>