starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-21 16:25:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

Initial work on seasons section

Browse Source
This commit is contained in:
Aleksi Lassila
2023-07-12 01:37:17 +03:00
parent e544eff886
commit ea6a42d8e2
14 changed files with 198 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/lib/components/Carousel/Carousel.svelte
View File

@@ -3,35 +3,40 @@
import IconButton from '../IconButton.svelte';
import { ChevronLeft, ChevronRight } from 'radix-icons-svelte';
let carousel;
let scrollX;
let carousel: HTMLDivElement | undefined;
let scrollX: number;
</script>
<div class="flex justify-between items-center mx-8">
<slot name="title" />
<div class="flex gap-2">
<IconButton>
<ChevronLeft size="20" />
<ChevronLeft size={20} />
</IconButton>
<IconButton>
<ChevronRight size="20" />
<ChevronRight size={20} />
</IconButton>
</div>
</div>
<div class="relative">
<div
class="flex overflow-x-scroll items-center overflow-y-hidden gap-4 relative pl-8 scrollbar-hide py-4"
class="flex overflow-x-scroll items-center overflow-y-hidden gap-4 relative px-8 scrollbar-hide py-4"
bind:this={carousel}
on:scroll={() => (scrollX = carousel.scrollLeft)}
on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
>
<slot />
</div>
{#if scrollX > 0}
{#if scrollX > 50}
<div
transition:fade={{ duration: 200 }}
class="absolute inset-y-4 left-0 w-24 bg-gradient-to-r from-darken"
/>
{/if}
<div class="absolute inset-y-4 right-0 w-24 bg-gradient-to-l from-darken" />
{#if carousel && scrollX < carousel?.scrollWidth - carousel?.clientWidth - 50}
<div
transition:fade={{ duration: 200 }}
class="absolute inset-y-4 right-0 w-24 bg-gradient-to-l from-darken"
/>
{/if}
</div>