chore(web): small fixes for location picker modal (#27822)

This commit is contained in:
Mees Frensel
2026-04-16 11:49:24 +02:00
committed by GitHub
parent d5d2ebd9bf
commit 60f4dedb29
@@ -55,12 +55,6 @@
} }
}); });
$effect(() => {
if (searchWord === '') {
suggestedPlaces = [];
}
});
const handleConfirm = (confirmed?: boolean) => { const handleConfirm = (confirmed?: boolean) => {
if (point && confirmed) { if (point && confirmed) {
geolocationManager.onSelected(point); geolocationManager.onSelected(point);
@@ -71,7 +65,7 @@
}; };
const getLocation = (name: string, admin1Name?: string, admin2Name?: string): string => { const getLocation = (name: string, admin1Name?: string, admin2Name?: string): string => {
return `${name}${admin1Name ? ', ' + admin1Name : ''}${admin2Name ? ', ' + admin2Name : ''}`; return [name, admin1Name, admin2Name].filter(Boolean).join(', ');
}; };
const handleSearchPlaces = () => { const handleSearchPlaces = () => {
@@ -150,7 +144,7 @@
> >
{#snippet prompt()} {#snippet prompt()}
<div class="flex flex-col w-full h-full gap-2"> <div class="flex flex-col w-full h-full gap-2">
<div class="relative w-64 sm:w-96 z-1"> <div class="relative w-64 sm:w-96 z-1" use:clickOutside={{ onOutclick: () => (hideSuggestion = true) }}>
{#if suggestionContainer} {#if suggestionContainer}
<div use:listNavigation={suggestionContainer}> <div use:listNavigation={suggestionContainer}>
<button type="button" class="w-full" onclick={() => (hideSuggestion = false)}> <button type="button" class="w-full" onclick={() => (hideSuggestion = false)}>
@@ -167,22 +161,18 @@
{/if} {/if}
<div <div
class="absolute w-full" class="absolute w-full bg-gray-200 dark:bg-gray-700 rounded-b-lg"
id="suggestion" id="suggestion"
bind:this={suggestionContainer} bind:this={suggestionContainer}
use:clickOutside={{ onOutclick: () => (hideSuggestion = true) }}
> >
{#if !hideSuggestion} {#if !hideSuggestion}
{#each suggestedPlaces as place, index (place.latitude + place.longitude)} {#each suggestedPlaces as place (place.latitude + place.longitude)}
<button <button
type="button" type="button"
class=" flex w-full border-t border-gray-400 dark:border-immich-dark-gray h-14 place-items-center bg-gray-200 p-2 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-[#232932] focus:bg-gray-300 focus:dark:bg-[#232932] {index === class="flex w-full border-t border-gray-400 dark:border-immich-dark-gray h-12 place-items-center px-5 hover:bg-gray-300 hover:dark:bg-[#232932] focus:bg-gray-300 focus:dark:bg-[#232932] last:rounded-b-lg last:border-b"
suggestedPlaces.length - 1
? 'rounded-b-lg border-b'
: ''}"
onclick={() => handleUseSuggested(place.latitude, place.longitude)} onclick={() => handleUseSuggested(place.latitude, place.longitude)}
> >
<p class="ms-4 text-sm text-gray-700 dark:text-gray-100 truncate"> <p class="text-sm text-gray-700 dark:text-gray-100 truncate">
{getLocation(place.name, place.admin1name, place.admin2name)} {getLocation(place.name, place.admin1name, place.admin2name)}
</p> </p>
</button> </button>