midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UX: fix image carousel in comparisonTable

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-12-17 04:12:50 +01:00
parent b2915bdc4d
commit 74618c2282
1 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/UI/Comparison/ComparisonTable.svelte
View file

@ -128,17 +128,18 @@
{#if $unknownImages.length > 0} {#if $unknownImages.length > 0}
{#if readonly} {#if readonly}
<div class="w-full overflow-x-auto"> <div class="flex w-full space-x-2 overflow-x-auto border border-gray-600 p-1"
<div class="flex h-32 w-max gap-x-2"> style="scroll-snap-type: x proximity; border: 1px solid black">
{#each $unknownImages as image (image)} {#each $unknownImages as image (image)}
<AttributedImage <div class="relative flex w-fit items-center bg-gray-200">
{state} <AttributedImage
imgClass="h-32 w-max shrink-0" {state}
image={{ url: image }} imgClass="h-32 shrink-0"
previewedImage={state.previewedImage} image={{ url: image }}
/> previewedImage={state.previewedImage}
{/each} />
</div> </div>
{/each}
</div> </div>
{:else} {:else}
{#each $unknownImages as image (image)} {#each $unknownImages as image (image)}