helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): empty placeholders (#4470)

Browse source
This commit is contained in:
Jason Rasmussen 2023-10-13 14:47:31 -04:00 • committed by GitHub
parent 9d225d3d06
commit 4a9f58bf9b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

5
web/src/lib/components/photos-page/asset-grid.svelte
View file

@ -37,6 +37,7 @@
let showSkeleton = true;
$: timelineY = element?.scrollTop || 0;
$: isEmpty = $assetStore.initialized && $assetStore.buckets.length === 0;
const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
const dispatch = createEventDispatcher<{ select: AssetResponseDto; escape: void }>();
@ -325,7 +326,7 @@
<!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
<section
id="asset-grid"
class="scrollbar-hidden ml-4 mr-[60px] h-full overflow-y-auto pb-[60px]"
class="scrollbar-hidden h-full overflow-y-auto pb-[60px] {isEmpty ? 'm-0' : 'ml-4 mr-[60px]'}"
bind:clientHeight={viewport.height}
bind:clientWidth={viewport.width}
bind:this={element}
@ -347,7 +348,7 @@
<slot />
<!-- (optional) empty placeholder -->
{#if $assetStore.initialized && $assetStore.buckets.length === 0}
{#if isEmpty}
<slot name="empty" />
{/if}
<section id="virtual-timeline" style:height={$assetStore.timelineHeight + 'px'}>

37
web/src/lib/components/shared-components/empty-placeholder.svelte
View file

@ -4,26 +4,25 @@
export let actionHandler: undefined | (() => unknown) = undefined;
export let text = '';
export let alt = '';
export let fullWidth = false;
export let src = empty1Url;
let hoverClasses = 'hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer';
const noop = () => undefined;
$: handler = actionHandler || noop;
$: width = fullWidth ? 'w-full' : 'w-[50%]';
const hoverClasses = actionHandler
? `border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer`
: '';
</script>
{#if actionHandler}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
on:click={actionHandler}
on:keydown={actionHandler}
class="border dark:border-immich-dark-gray {hoverClasses} m-auto mt-10 flex w-[50%] flex-col place-content-center place-items-center rounded-3xl bg-gray-50 p-5 dark:bg-immich-dark-gray"
>
<img {src} {alt} width="500" draggable="false" />
<p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
</div>
{:else}
<div
class="m-auto mt-10 flex w-[50%] flex-col place-content-center place-items-center rounded-3xl border bg-gray-50 p-5 dark:border-immich-dark-gray dark:bg-immich-dark-gray"
>
<img {src} {alt} width="500" draggable="false" />
<p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
</div>
{/if}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
on:click={handler}
on:keydown={handler}
class="{width} m-auto mt-10 flex flex-col place-content-center place-items-center rounded-3xl bg-gray-50 p-5 dark:bg-immich-dark-gray {hoverClasses}"
>
<img {src} {alt} width="500" draggable="false" />
<p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
</div>