Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-22 14:29:36 +02:00
Code Issues Releases Activity

feat: replace placeholder image with gradient background and text for no image available state in CardCarousel component

Browse source
This commit is contained in:
Sean Morley 2025-01-19 22:33:35 -05:00
parent 94c3e3d363
commit 1f3abf7f32
1 changed files with 9 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/lib/components/CardCarousel.svelte
View file

@ -95,11 +95,14 @@
</div>
</div>
{:else}
<!-- svelte-ignore a11y-img-redundant-alt -->
<img
src={`https://placehold.co/300?text=${$t('adventures.no_image_found')}&font=roboto`}
alt="No image available"
class="w-full h-48 object-cover"
/>
<!-- add a figure with a gradient instead - -->
<div class="w-full h-48 bg-gradient-to-r from-success via-base to-primary relative">
<!-- subtle button bottom left text -->
<div
class="absolute bottom-0 left-0 px-2 py-1 text-md font-medium bg-neutral rounded-tr-lg shadow-md"
>
{$t('adventures.no_image_found')}
</div>
</div>
{/if}
</figure>