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

Merge branch 'dev' into person-screen

Browse Source
This commit is contained in:
Aleksi Lassila
2023-09-18 01:50:41 +03:00
parent 666a93f91b 4ab1a2e3b3
commit cc0e90e0d0
17 changed files with 833 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,17 +9,21 @@
let carousel: HTMLDivElement | undefined;
let scrollX = 0;
export let scrollClass = '';
</script>
<div class={classNames('flex flex-col gap-4', $$restProps.class)}>
<div class={'flex justify-between items-center gap-4'}>
<div class={classNames('flex flex-col gap-4 group/carousel', $$restProps.class)}>
<div class={'flex justify-between items-center gap-4 ' + scrollClass}>
<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)
})}
class={classNames(
'flex gap-2 sm:opacity-0 transition-opacity sm:group-hover/carousel:opacity-100',
{
hidden: (carousel?.scrollWidth || 0) === (carousel?.clientWidth || 0)
}
)}
>
<IconButton
on:click={() => {
@@ -40,7 +44,10 @@
<div class="relative">
<div
class="flex overflow-x-scroll items-center overflow-y-hidden gap-4 relative scrollbar-hide p-1"
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)}