feat: mobile-web improvements - scrubber ()

* feat: mobile-web improvements - scrubber

* lint

* cruft

* lint

* fix: thumb style

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Min Idzelis 2025-03-21 14:00:24 -04:00 committed by GitHub
parent b5d5c40c69
commit 55b52ecbec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 115 additions and 15 deletions
web/src/lib/components/photos-page

View file

@ -25,6 +25,7 @@
import { page } from '$app/stores';
import type { UpdatePayload } from 'vite';
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { mobileDevice } from '$lib/stores/mobile-device.svelte';
interface Props {
isSelectionMode?: boolean;
@ -82,6 +83,8 @@
let bottomSectionHeight = 60;
let leadout = $state(false);
const usingMobileDevice = $derived(mobileDevice.hoverNone);
const scrollTo = (top: number) => {
element?.scrollTo({ top });
showSkeleton = false;
@ -714,7 +717,12 @@
<!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
<section
id="asset-grid"
class="scrollbar-hidden h-full overflow-y-auto outline-none {isEmpty ? 'm-0' : 'ml-4 tall:ml-0 mr-[60px]'}"
class={[
'scrollbar-hidden h-full overflow-y-auto outline-none',
{ 'm-0': isEmpty },
{ 'ml-4 tall:ml-0': !isEmpty },
{ 'mr-[60px]': !isEmpty && !usingMobileDevice },
]}
tabindex="-1"
bind:clientHeight={assetStore.viewportHeight}
bind:clientWidth={null, (v) => ((assetStore.viewportWidth = v), updateSlidingWindow())}