helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +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

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>