fix: more z-index issue

This commit is contained in:
Alex 2025-05-22 12:01:49 -05:00
commit 250cf2d129
No known key found for this signature in database
GPG key ID: 53CD082B3A5E1082
3 changed files with 14 additions and 9 deletions
web/src/lib/components
asset-viewer
photos-page
shared-components/map

View file

@ -495,6 +495,7 @@
zoom={12.5} zoom={12.5}
simplified simplified
useLocationPin useLocationPin
showSimpleControls={!showEditFaces}
onOpenInMapView={() => goto(`${AppRoute.MAP}#12.5/${latlng.lat}/${latlng.lng}`)} onOpenInMapView={() => goto(`${AppRoute.MAP}#12.5/${latlng.lat}/${latlng.lng}`)}
> >
{#snippet popup({ marker })} {#snippet popup({ marker })}

View file

@ -45,7 +45,7 @@
onscroll={onScroll} onscroll={onScroll}
> >
{#if canScrollLeft || canScrollRight} {#if canScrollLeft || canScrollRight}
<div class="sticky start-0"> <div class="sticky start-0 z-1">
{#if canScrollLeft} {#if canScrollLeft}
<div class="absolute start-4 top-24" transition:fade={{ duration: 200 }}> <div class="absolute start-4 top-24" transition:fade={{ duration: 200 }}>
<button <button
@ -60,7 +60,7 @@
</div> </div>
{/if} {/if}
{#if canScrollRight} {#if canScrollRight}
<div class="absolute end-4 top-24" transition:fade={{ duration: 200 }}> <div class="absolute end-4 top-24 z-1" transition:fade={{ duration: 200 }}>
<button <button
type="button" type="button"
class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100" class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"

View file

@ -54,6 +54,7 @@
onClickPoint?: ({ lat, lng }: { lat: number; lng: number }) => void; onClickPoint?: ({ lat, lng }: { lat: number; lng: number }) => void;
popup?: import('svelte').Snippet<[{ marker: MapMarkerResponseDto }]>; popup?: import('svelte').Snippet<[{ marker: MapMarkerResponseDto }]>;
rounded?: boolean; rounded?: boolean;
showSimpleControls?: boolean;
} }
let { let {
@ -70,6 +71,7 @@
onClickPoint = () => {}, onClickPoint = () => {},
popup, popup,
rounded = false, rounded = false,
showSimpleControls = true,
}: Props = $props(); }: Props = $props();
let map: maplibregl.Map | undefined = $state(); let map: maplibregl.Map | undefined = $state();
@ -266,13 +268,15 @@
bind:map bind:map
> >
{#snippet children({ map }: { map: maplibregl.Map })} {#snippet children({ map }: { map: maplibregl.Map })}
<NavigationControl position="top-left" showCompass={!simplified} /> {#if showSimpleControls}
<NavigationControl position="top-left" showCompass={!simplified} />
{#if !simplified} {#if !simplified}
<GeolocateControl position="top-left" /> <GeolocateControl position="top-left" />
<FullscreenControl position="top-left" /> <FullscreenControl position="top-left" />
<ScaleControl /> <ScaleControl />
<AttributionControl compact={false} /> <AttributionControl compact={false} />
{/if}
{/if} {/if}
{#if showSettings} {#if showSettings}
@ -285,7 +289,7 @@
</Control> </Control>
{/if} {/if}
{#if onOpenInMapView} {#if onOpenInMapView && showSimpleControls}
<Control position="top-right"> <Control position="top-right">
<ControlGroup> <ControlGroup>
<ControlButton onclick={() => onOpenInMapView()}> <ControlButton onclick={() => onOpenInMapView()}>