mirror of
https://github.com/immich-app/immich.git
synced 2025-07-17 20:38:25 +02:00
fix: more z-index issue
This commit is contained in:
parent
1f84cbe7e5
commit
250cf2d129
3 changed files with 14 additions and 9 deletions
web/src/lib/components
|
@ -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 })}
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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()}>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue