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

Project refactoring

Browse Source
This commit is contained in:
Aleksi Lassila
2024-03-02 00:52:01 +02:00
parent 1c1fbbf043
commit 27b9fc57b3
94 changed files with 128 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
import IconButton from '../IconButton.svelte';
import { ChevronLeft, ChevronRight } from 'radix-icons-svelte';
import classNames from 'classnames';
import type { Registerer } from '../../selectable';
import Container from '../../../Container.svelte';
export let gradientFromColor = 'from-stone-950';
export let heading = '';
@@ -44,17 +44,19 @@
</div>
<div class="relative">
<div
class={classNames(
'flex overflow-x-scroll items-center overflow-y-visible gap-4 relative scrollbar-hide p-1',
scrollClass
)}
bind:this={carousel}
tabindex="-1"
on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
>
<slot />
</div>
<Container horizontal>
<div
class={classNames(
'flex overflow-x-scroll items-center overflow-y-visible gap-4 relative scrollbar-hide p-1',
scrollClass
)}
bind:this={carousel}
tabindex="-1"
on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
>
<slot />
</div>
</Container>
{#if scrollX > 50}
<div
transition:fade={{ duration: 200 }}

35
src/lib/components/Carousel/UICarousel.svelte
View File

@@ -1,35 +0,0 @@
<script lang="ts">
import classNames from 'classnames';
import { onMount } from 'svelte';
let element: HTMLDivElement;
let scrollX = 0;
let maxScrollX = 0;
let fadeLeft = false;
let fadeRight = true;
$: {
fadeLeft = scrollX > 10;
fadeRight = scrollX < maxScrollX - 10;
}
function updateScrollPosition() {
scrollX = element.scrollLeft;
maxScrollX = element.scrollWidth - element.clientWidth;
}
onMount(() => {
updateScrollPosition();
});
</script>
<div
class={classNames($$restProps.class, 'overflow-x-scroll scrollbar-hide relative p-1')}
style={`mask-image: linear-gradient(to right, transparent 0%, ${
fadeLeft ? '' : 'black 0%, '
}black 5%, black 95%, ${fadeRight ? '' : 'black 100%, '}transparent 100%);`}
on:scroll={updateScrollPosition}
bind:this={element}
>
<slot />
</div>