Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-24 07:19: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>
</div> </div>
{:else} {:else}
<!-- svelte-ignore a11y-img-redundant-alt --> <!-- add a figure with a gradient instead - -->
<img <div class="w-full h-48 bg-gradient-to-r from-success via-base to-primary relative">
src={`https://placehold.co/300?text=${$t('adventures.no_image_found')}&font=roboto`} <!-- subtle button bottom left text -->
alt="No image available" <div
class="w-full h-48 object-cover" 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} {/if}
</figure> </figure>