fix(web): broken album thumbnail (#12381)

* fix(web): broken album thumbnail

* use properties from thumbnail
This commit is contained in:
Michel Heusschen
2024-09-06 15:16:18 +02:00
committed by GitHub
parent 9fc30d6bf6
commit 639bc0c660
4 changed files with 29 additions and 29 deletions

View File

@@ -3,23 +3,20 @@
import { mdiImageBrokenVariant } from '@mdi/js';
import { t } from 'svelte-i18n';
export let square = false;
export let noMessage = false;
let className = '';
export { className as class };
export let hideMessage = false;
export let width: string | undefined = undefined;
export let height: string | undefined = undefined;
</script>
<section class="flex h-full w-full justify-center">
<div
class="px-auto flex flex-col {square
? 'aspect-square'
: 'w-full'} h-full items-center justify-center bg-gray-100 dark:text-gray-100 dark:bg-immich-dark-gray"
>
<slot name="message">
{#if !noMessage}
<div class="text-lg absolute top-2/3">{$t('error_loading_image')}</div>
{/if}
</slot>
<div class="flex h-full w-full items-center justify-center p-4 bg-gray-100 dark:text-slate-200 dark:bg-gray-700">
<Icon path={mdiImageBrokenVariant} size="33%" />
</div>
</div>
</section>
<div
class="flex flex-col overflow-hidden max-h-full max-w-full justify-center items-center bg-gray-100 dark:bg-gray-700 dark:text-gray-100 p-4 {className}"
style:width
style:height
>
<Icon path={mdiImageBrokenVariant} size="7em" class="max-w-full" />
{#if !hideMessage}
<span class="text-center">{$t('error_loading_image')}</span>
{/if}
</div>