Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-02-04 01:09:14 -05:00
Code Issues Activity

fix(web): clickable items in the searchbar (#3441)

Browse source
This commit is contained in:
martin 2023-07-28 05:06:42 +02:00 • committed by GitHub
parent fe9ef1a3ea
commit 13b2b2fc4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 76 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/src/lib/components/shared-components/search-bar/search-bar.svelte
View file

@ -5,6 +5,7 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { isSearchEnabled, savedSearchTerms } from '$lib/stores/search.store'; import { isSearchEnabled, savedSearchTerms } from '$lib/stores/search.store';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import { clickOutside } from '$lib/utils/click-outside';
export let value = ''; export let value = '';
export let grayTheme: boolean; export let grayTheme: boolean;
@ -55,16 +56,15 @@
}; };
</script> </script>
<form <button class="w-full" use:clickOutside on:outclick={onFocusOut} on:click={onFocusIn}>
<form
draggable="false" draggable="false"
autocomplete="off" autocomplete="off"
class="relative text-sm" class="relative select-text text-sm"
action={AppRoute.SEARCH} action={AppRoute.SEARCH}
on:reset={() => (value = '')} on:reset={() => (value = '')}
on:submit|preventDefault={() => onSearch(true)} on:submit|preventDefault={() => onSearch(true)}
on:focusin={onFocusIn} >
on:focusout={onFocusOut}
>
<label> <label>
<div class="absolute inset-y-0 left-0 flex items-center pl-6"> <div class="absolute inset-y-0 left-0 flex items-center pl-6">
<div class="pointer-events-none dark:text-immich-dark-fg/75"> <div class="pointer-events-none dark:text-immich-dark-fg/75">
@ -101,7 +101,7 @@
transition:fly={{ y: 25, duration: 250 }} transition:fly={{ y: 25, duration: 250 }}
class="absolute w-full rounded-b-3xl border border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300" class="absolute w-full rounded-b-3xl border border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
> >
<div class="px-5 pt-5 text-xs"> <div class="flex px-5 pt-5 text-left text-xs">
<p> <p>
Smart search is enabled by default, to search for metadata use the syntax <span Smart search is enabled by default, to search for metadata use the syntax <span
class="rounded-lg bg-gray-100 p-2 font-mono font-semibold leading-7 text-immich-primary dark:bg-gray-900 dark:text-immich-dark-primary" class="rounded-lg bg-gray-100 p-2 font-mono font-semibold leading-7 text-immich-primary dark:bg-gray-900 dark:text-immich-dark-primary"
@ -136,4 +136,5 @@
{/each} {/each}
</div> </div>
{/if} {/if}
</form> </form>
</button>