feat(web): support long-press selection on mobile web (#16906)

* feat(web): max grid row height responsive

* also gallery-viewer

* lint

* feat(web): support long-press selection on mobile web

* use svelte-gestures

* fix test

* Bug fix

* globalThis

* format

* revert generator

* Testing

* bad merge

* Fix typo/tap on thumbnail

* feat: shrink header on small screens (#16909)

* feat(web): shrink header on small screens

* fix test

* test

* Fix test

* Revert user-page-layout chagne

* Restore icons sizes, make consistent, improve logo responsiveness

* remove 4 more pix, lint

* lint

* chore

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

* Revert "Testing"

This reverts commit 442f11c9e1.

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Min Idzelis
2025-03-24 17:36:36 -04:00
committed by GitHub
parent a651a4bf0e
commit 4a0045db44
23 changed files with 201 additions and 61 deletions
@@ -603,7 +603,9 @@
{/if}
{/if}
<main class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg">
<main
class="relative h-screen overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
>
<AssetGrid
enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
{album}
@@ -486,7 +486,7 @@
</header>
<main
class="relative h-screen overflow-hidden bg-immich-bg tall:ml-4 pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
class="relative h-screen overflow-hidden bg-immich-bg tall:ml-4 md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
use:scrollMemoryClearer={{
routeStartsWith: AppRoute.PEOPLE,
beforeClear: () => {
@@ -27,7 +27,6 @@
let { title, description } = $state(meta);
let isOwned = $derived($user ? $user.id === sharedLink?.userId : false);
let password = $state('');
let innerWidth: number = $state(0);
const handlePasswordSubmit = async () => {
try {
@@ -54,8 +53,6 @@
};
</script>
<svelte:window bind:innerWidth />
<svelte:head>
<title>{title}</title>
<meta name="description" content={description} />
@@ -64,7 +61,7 @@
<header>
<ControlAppBar showBackButton={false}>
{#snippet leading()}
<ImmichLogoSmallLink width={innerWidth} />
<ImmichLogoSmallLink />
{/snippet}
{#snippet trailing()}
@@ -73,7 +70,7 @@
</ControlAppBar>
</header>
<main
class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
class="relative h-screen overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
>
<div class="flex flex-col items-center justify-center mt-20">
<div class="text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">{$t('password_required')}</div>