KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): scrollbar offset (#4518)

Browse Source 
* fix(web): scrollbar offset

* fix offset on photo page

* proper fix

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Jason Rasmussen
2023-10-18 11:54:20 -04:00
committed by GitHub
parent 335216f6dd
commit f4a12acd29
6 changed files with 50 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/lib/components/layouts/user-page-layout.svelte
View File

@@ -13,6 +13,7 @@
export let admin = false; export let admin = false;
$: scrollbarClass = scrollbar ? 'immich-scrollbar p-4 pb-8' : 'scrollbar-hidden pl-4'; $: scrollbarClass = scrollbar ? 'immich-scrollbar p-4 pb-8' : 'scrollbar-hidden pl-4';
$: hasTitleClass = title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full';
</script> </script>
<header> <header>
@@ -32,20 +33,19 @@
<SideBar /> <SideBar />
{/if} {/if}
</slot> </slot>
<slot name="content">
{#if title}
<section class="relative">
<div
class="absolute flex h-16 w-full place-items-center justify-between border-b p-4 dark:border-immich-dark-gray dark:text-immich-dark-fg"
>
<p class="font-medium">{title}</p>
<slot name="buttons" />
</div>
<div class="{scrollbarClass} absolute top-16 h-[calc(100%-theme(spacing.16))] w-full overflow-y-auto"> <section class="relative">
<slot /> {#if title}
</div> <div
</section> class="absolute flex h-16 w-full place-items-center justify-between border-b p-4 dark:border-immich-dark-gray dark:text-immich-dark-fg"
>
<p class="font-medium">{title}</p>
<slot name="buttons" />
</div>
{/if} {/if}
</slot>
<div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto">
<slot />
</div>
</section>
</main> </main>

1
web/src/lib/components/photos-page/asset-grid.svelte
View File

@@ -25,6 +25,7 @@
export let assetStore: AssetStore; export let assetStore: AssetStore;
export let assetInteractionStore: AssetInteractionStore; export let assetInteractionStore: AssetInteractionStore;
export let removeAction: AssetAction | null = null; export let removeAction: AssetAction | null = null;
$: isTrashEnabled = $featureFlags.loaded && $featureFlags.trash; $: isTrashEnabled = $featureFlags.loaded && $featureFlags.trash;
export let forceDelete = false; export let forceDelete = false;

2
web/src/routes/(user)/archive/+page.svelte
View File

@@ -45,7 +45,7 @@
</AssetSelectControlBar> </AssetSelectControlBar>
{/if} {/if}
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title}> <UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNARCHIVE}> <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNARCHIVE}>
<EmptyPlaceholder <EmptyPlaceholder
text="Archive photos and videos to hide them from your Photos view" text="Archive photos and videos to hide them from your Photos view"

2
web/src/routes/(user)/favorites/+page.svelte
View File

@@ -46,7 +46,7 @@
</AssetSelectControlBar> </AssetSelectControlBar>
{/if} {/if}
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title}> <UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNFAVORITE}> <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNFAVORITE}>
<EmptyPlaceholder <EmptyPlaceholder
text="Add favorites to quickly find your best pictures and videos" text="Add favorites to quickly find your best pictures and videos"

65
web/src/routes/(user)/photos/+page.svelte
View File

@@ -48,39 +48,36 @@
}; };
</script> </script>
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} showUploadButton> {#if $isMultiSelectState}
<svelte:fragment slot="header"> <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
{#if $isMultiSelectState} <CreateSharedLink on:escape={() => (handleEscapeKey = true)} />
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}> <SelectAllAssets {assetStore} {assetInteractionStore} />
<CreateSharedLink on:escape={() => (handleEscapeKey = true)} /> <AssetSelectContextMenu icon={Plus} title="Add">
<SelectAllAssets {assetStore} {assetInteractionStore} /> <AddToAlbum />
<AssetSelectContextMenu icon={Plus} title="Add"> <AddToAlbum shared />
<AddToAlbum /> </AssetSelectContextMenu>
<AddToAlbum shared /> <DeleteAssets
</AssetSelectContextMenu> on:escape={() => (handleEscapeKey = true)}
<DeleteAssets onAssetDelete={(assetId) => assetStore.removeAsset(assetId)}
on:escape={() => (handleEscapeKey = true)} />
onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} <AssetSelectContextMenu icon={DotsVertical} title="Menu">
/> <FavoriteAction menuItem removeFavorite={isAllFavorite} />
<AssetSelectContextMenu icon={DotsVertical} title="Menu"> <DownloadAction menuItem />
<FavoriteAction menuItem removeFavorite={isAllFavorite} /> <ArchiveAction menuItem onArchive={(ids) => assetStore.removeAssets(ids)} />
<DownloadAction menuItem /> <AssetJobActions />
<ArchiveAction menuItem onArchive={(ids) => assetStore.removeAssets(ids)} /> </AssetSelectContextMenu>
<AssetJobActions /> </AssetSelectControlBar>
</AssetSelectContextMenu> {/if}
</AssetSelectControlBar>
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} showUploadButton scrollbar={false}>
<AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.ARCHIVE} on:escape={handleEscape}>
{#if data.user.memoriesEnabled}
<MemoryLane />
{/if} {/if}
</svelte:fragment> <EmptyPlaceholder
<svelte:fragment slot="content"> text="CLICK TO UPLOAD YOUR FIRST PHOTO"
<AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.ARCHIVE} on:escape={handleEscape}> actionHandler={() => openFileUploadDialog()}
{#if data.user.memoriesEnabled} slot="empty"
<MemoryLane /> />
{/if} </AssetGrid>
<EmptyPlaceholder
text="CLICK TO UPLOAD YOUR FIRST PHOTO"
actionHandler={() => openFileUploadDialog()}
slot="empty"
/>
</AssetGrid>
</svelte:fragment>
</UserPageLayout> </UserPageLayout>

4
web/src/routes/(user)/trash/+page.svelte
View File

@@ -70,7 +70,7 @@
{/if} {/if}
{#if $featureFlags.loaded && $featureFlags.trash} {#if $featureFlags.loaded && $featureFlags.trash}
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title}> <UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<div class="flex place-items-center gap-2" slot="buttons"> <div class="flex place-items-center gap-2" slot="buttons">
<LinkButton on:click={handleRestoreTrash}> <LinkButton on:click={handleRestoreTrash}>
<div class="flex place-items-center gap-2 text-sm"> <div class="flex place-items-center gap-2 text-sm">
@@ -87,7 +87,7 @@
</div> </div>
<AssetGrid forceDelete {assetStore} {assetInteractionStore}> <AssetGrid forceDelete {assetStore} {assetInteractionStore}>
<p class="font-medium text-gray-500/60 dark:text-gray-300/60"> <p class="font-medium text-gray-500/60 dark:text-gray-300/60 py-4">
Trashed items will be permanently deleted after {$serverConfig.trashDays} days. Trashed items will be permanently deleted after {$serverConfig.trashDays} days.
</p> </p>
<EmptyPlaceholder <EmptyPlaceholder