Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-23 06:49:37 +02:00
Code Issues Releases Activity

feat: add keyboard shortcut to focus search input in Navbar and clean up dashboard animations

Browse source
This commit is contained in:
Sean Morley 2025-01-21 19:17:51 -05:00
parent f9cf92041d
commit 1b3cf6ab39
2 changed files with 30 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

50
frontend/src/lib/components/Navbar.svelte
View file

@ -12,6 +12,28 @@
import { page } from '$app/stores';
import { t, locale, locales } from 'svelte-i18n';
import { themes } from '$lib';
import { onMount } from 'svelte';
let inputElement: HTMLInputElement | null = null;
// Event listener for focusing input
function handleKeydown(event: KeyboardEvent) {
if (event.key === '/' && document.activeElement !== inputElement) {
event.preventDefault(); // Prevent browser's search shortcut
if (inputElement) {
inputElement.focus();
}
}
}
onMount(() => {
// Attach event listener on component mount
document.addEventListener('keydown', handleKeydown);
// Cleanup event listener on component destruction
return () => {
document.removeEventListener('keydown', handleKeydown);
};
});
let languages: { [key: string]: string } = {
en: 'English',
@ -123,12 +145,7 @@
{#if data.user}
<form class="flex gap-2">
<label class="input input-bordered flex items-center gap-2">
<input
type="text"
bind:value={query}
class="grow"
placeholder={$t('navbar.search')}
/>
<input type="text" bind:value={query} placeholder={$t('navbar.search')} />
<svg
xmlns="http://www.w3.org/2000/svg"
@ -200,20 +217,13 @@
{#if data.user}
<form class="flex gap-2">
<label class="input input-bordered flex items-center gap-2">
<input type="text" bind:value={query} class="grow" placeholder={$t('navbar.search')} />
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"
>
<path
fill-rule="evenodd"
d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
clip-rule="evenodd"
/>
</svg>
<input
type="text"
bind:value={query}
class="grow"
placeholder={$t('navbar.search')}
bind:this={inputElement}
/><kbd class="kbd">/</kbd>
</label>
<button on:click={searchGo} type="submit" class="btn btn-neutral"
>{$t('navbar.search')}</button