fix: more z-index issue (#18493)

This commit is contained in:
Alex 2025-05-22 15:17:14 -05:00 committed by GitHub
parent 15877ddf1f
commit 065f7c7d5d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 16 additions and 11 deletions

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

@ -55,7 +55,7 @@
}; };
</script> </script>
<div class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white"> <div class="absolute end-0 top-0 z-1 flex place-items-center gap-1 text-xs font-medium text-white">
{#if showTime} {#if showTime}
<span class="pt-2"> <span class="pt-2">
{#if remainingSeconds < 60} {#if remainingSeconds < 60}

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()}>

View File

@ -452,7 +452,7 @@
{/if} {/if}
</section> </section>
{#if isEditingName} {#if isEditingName}
<div class="absolute w-64 sm:w-96"> <div class="absolute w-64 sm:w-96 z-1">
{#if isSearchingPeople} {#if isSearchingPeople}
<div <div
class="flex border h-14 rounded-b-lg border-gray-400 dark:border-immich-dark-gray place-items-center bg-gray-200 p-2 dark:bg-gray-700" class="flex border h-14 rounded-b-lg border-gray-400 dark:border-immich-dark-gray place-items-center bg-gray-200 p-2 dark:bg-gray-700"