mirror of
https://github.com/immich-app/immich.git
synced 2025-07-09 09:12:57 +02:00
feat: mobile-web improvements - scrubber (#16856)
* 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:
parent
b5d5c40c69
commit
55b52ecbec
4 changed files with 115 additions and 15 deletions
web/src/lib/components/photos-page
|
@ -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())}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue