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