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

fix: Custom scrollIntoView function with offsets and onFocus handlers for containers

Browse Source
This commit is contained in:
Aleksi Lassila
2024-04-05 12:51:11 +03:00
parent 754227737b
commit b436e809de
12 changed files with 275 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/lib/pages/BrowseSeriesPage.svelte
View File

@@ -13,7 +13,7 @@
import CarouselPlaceholderItems from '../components/Carousel/CarouselPlaceholderItems.svelte';
import HeroShowcase from '../components/HeroShowcase/HeroShowcase.svelte';
import { getShowcasePropsFromTmdb } from '../components/HeroShowcase/HeroShowcase';
import { scrollWithOffset } from '../selectable';
import { scrollIntoView } from '../selectable';
import SidebarMargin from '../components/SidebarMargin.svelte';
const jellyfinItemsPromise = new Promise<JellyfinItem[]>((resolve) => {
@@ -75,8 +75,10 @@
</script>
<Container focusOnMount>
<div class="h-screen flex flex-col">
<HeroShowcase items={tmdbApi.getPopularMovies().then(getShowcasePropsFromTmdb)} />
<div class="flex flex-col h-screen">
<div class="flex-1 flex relative px-20">
<HeroShowcase items={tmdbApi.getPopularMovies().then(getShowcasePropsFromTmdb)} />
</div>
<div class="mt-8">
<Carousel scrollClass="">
<SidebarMargin slot="title" class="mx-4">
@@ -89,30 +91,12 @@
{:then props}
<div class="w-[4.5rem] h-1 shrink-0" />
{#each props as prop (prop.tmdbId)}
<div class="m-2">
<Container class="m-2" handleFocus={scrollIntoView({ left: 64 + 16 })}>
<Card {...prop} />
</div>
</Container>
{/each}
{/await}
</Carousel>
</div>
</div>
<!-- <Carousel scrollClass="px-2 sm:px-8 2xl:px-16">-->
<!-- <div slot="title" class="text-lg font-semibold text-zinc-300">-->
<!-- {$_('discover.library')}-->
<!-- </div>-->
<!-- {#await fetchLibraryItems()}-->
<!-- <CarouselPlaceholderItems />-->
<!-- {:then props}-->
<!-- {#each props as prop (prop.tmdbId)}-->
<!-- <Container>-->
<!-- <Poster {...prop} />-->
<!-- </Container>-->
<!-- {/each}-->
<!-- {/await}-->
<!-- </Carousel>-->
<!-- <Poster-->
<!-- backdropUrl="http://192.168.0.129:8096/Items/8cc44d55dba1495a2ffcda104286d611/Images/Primary?quality=80&fillWidth=432&tag=d026e7eb1d9ba9934c8769695e396dc4"-->
<!-- />-->
<!-- <VideoPlayer jellyfinId="8cc44d55dba1495a2ffcda104286d611" />-->
</Container>

5
src/lib/pages/MoviesPage.svelte
View File

@@ -10,6 +10,7 @@
import TmdbCard from '../components/Card/TmdbCard.svelte';
import Button from '../components/Button.svelte';
import { useNavigate } from 'svelte-navigator';
import { scrollIntoView } from '../selectable';
const popularMovies = tmdbApi.getPopularMovies();
const navigate = useNavigate();
@@ -32,9 +33,9 @@
{:then items}
<div class="w-[4.5rem] h-1 shrink-0" />
{#each items as item (item.id)}
<div class="m-2">
<Container class="m-2" handleFocus={scrollIntoView({ left: 64 + 16 })}>
<TmdbCard {item} />
</div>
</Container>
{/each}
{/await}
</Carousel>