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

Styling improvements

Browse Source
This commit is contained in:
Aleksi Lassila
2023-08-09 02:36:09 +03:00
parent 536d11cf78
commit a8d328dec5
15 changed files with 308 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,58 +4,62 @@
import { ChevronLeft, ChevronRight } from 'radix-icons-svelte';
import classNames from 'classnames';
export let gradientFromColor = 'from-stone-900';
export let gradientFromColor = 'from-stone-950';
export let heading = '';
let carousel: HTMLDivElement | undefined;
let scrollX = 0;
</script>
<div class="flex justify-between items-center mx-2 sm:mx-8 gap-4">
<slot name="title">
<div class="font-semibold text-xl">{heading}</div>
</slot>
<div
class={classNames('flex gap-2', {
hidden: (carousel?.scrollWidth || 0) === (carousel?.clientWidth || 0)
})}
>
<IconButton
on:click={() => {
carousel?.scrollTo({ left: scrollX - carousel?.clientWidth * 0.8, behavior: 'smooth' });
}}
<div class={classNames('flex flex-col gap-4', $$restProps.class)}>
<div class={'flex justify-between items-center gap-4'}>
<slot name="title">
<div class="font-semibold text-xl">{heading}</div>
</slot>
<div
class={classNames('flex gap-2', {
hidden: (carousel?.scrollWidth || 0) === (carousel?.clientWidth || 0)
})}
>
<ChevronLeft size={20} />
</IconButton>
<IconButton
on:click={() => {
carousel?.scrollTo({ left: scrollX + carousel?.clientWidth * 0.8, behavior: 'smooth' });
}}
>
<ChevronRight size={20} />
</IconButton>
<IconButton
on:click={() => {
carousel?.scrollTo({ left: scrollX - carousel?.clientWidth * 0.8, behavior: 'smooth' });
}}
>
<ChevronLeft size={20} />
</IconButton>
<IconButton
on:click={() => {
carousel?.scrollTo({ left: scrollX + carousel?.clientWidth * 0.8, behavior: 'smooth' });
}}
>
<ChevronRight size={20} />
</IconButton>
</div>
</div>
</div>
<div class="relative">
<div
class="flex overflow-x-scroll items-center overflow-y-hidden gap-4 relative px-2 sm:px-8 scrollbar-hide py-4"
bind:this={carousel}
tabindex="-1"
on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
>
<slot />
<div class="relative">
<div
class="flex overflow-x-scroll items-center overflow-y-hidden gap-4 relative scrollbar-hide"
bind:this={carousel}
tabindex="-1"
on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
>
<slot />
</div>
{#if scrollX > 50}
<div
transition:fade={{ duration: 200 }}
class={'absolute inset-y-0 left-0 w-0 sm:w-16 md:w-24 bg-gradient-to-r ' +
gradientFromColor}
/>
{/if}
{#if carousel && scrollX < carousel?.scrollWidth - carousel?.clientWidth - 50}
<div
transition:fade={{ duration: 200 }}
class={'absolute inset-y-0 right-0 w-0 sm:w-16 md:w-24 bg-gradient-to-l ' +
gradientFromColor}
/>
{/if}
</div>
{#if scrollX > 50}
<div
transition:fade={{ duration: 200 }}
class={'absolute inset-y-4 left-0 w-0 sm:w-16 md:w-24 bg-gradient-to-r ' + gradientFromColor}
/>
{/if}
{#if carousel && scrollX < carousel?.scrollWidth - carousel?.clientWidth - 50}
<div
transition:fade={{ duration: 200 }}
class={'absolute inset-y-4 right-0 w-0 sm:w-16 md:w-24 bg-gradient-to-l ' + gradientFromColor}
/>
{/if}
</div>