sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2026-02-04 02:53:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: enhance search bar styling and improve keyboard accessibility

Browse Source
This commit is contained in:
sHa
2025-05-28 21:30:21 +03:00
parent 78ba526ff3
commit 1849a0ef49
2 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/global.css
View File

@@ -115,21 +115,6 @@ button:hover {
outline: 2px solid var(--color-border); outline: 2px solid var(--color-border);
} }
.search-bar {
margin-bottom: 1.5rem;
width: 100%;
max-width: 500px;
}
.search-bar input {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 4px;
font-size: 1rem;
background: var(--color-card);
color: var(--color-text);
}
.copy-btn, .copy-btn,
.copy-group .png-btn { .copy-group .png-btn {

24
src/components/Header.svelte
View File

@@ -26,17 +26,20 @@
// Add global keydown listener for the / hotkey // Add global keydown listener for the / hotkey
function handleKeydown(event) { function handleKeydown(event) {
// Check if the / key is pressed and no input/textarea is focused // Check if the / key is pressed and no input/textarea is focused
if (event.key === '/' && !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) { if (
event.key === "/" &&
!["INPUT", "TEXTAREA"].includes(document.activeElement?.tagName)
) {
event.preventDefault(); // Prevent the / character from being typed event.preventDefault(); // Prevent the / character from being typed
searchInput?.focus(); // Focus the search input searchInput?.focus(); // Focus the search input
} }
} }
document.addEventListener('keydown', handleKeydown); document.addEventListener("keydown", handleKeydown);
// Cleanup listener on component destroy // Cleanup listener on component destroy
return () => { return () => {
document.removeEventListener('keydown', handleKeydown); document.removeEventListener("keydown", handleKeydown);
}; };
}); });
@@ -71,7 +74,8 @@
{#if displayLogos && logos && displayLogos.length === logos.length} {#if displayLogos && logos && displayLogos.length === logos.length}
{logos.length} images in gallery {logos.length} images in gallery
{:else} {:else}
{displayLogos ? displayLogos.length : 0} of {logos ? logos.length : 0} images displayed {displayLogos ? displayLogos.length : 0} of {logos ? logos.length : 0} images
displayed
{/if} {/if}
</span> </span>
<div class="theme-switcher"> <div class="theme-switcher">
@@ -348,13 +352,23 @@
} }
.search-bar { .search-bar {
margin-bottom: 1.5rem;
width: 100%;
max-width: 500px;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.search-bar input { .search-bar input {
padding-right: 4em; /* Increased to accommodate both clear button and hotkey hint */ width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 4px;
font-size: 1rem;
background: var(--color-card);
color: var(--color-text);
padding-right: 4em;
} }
.clear-btn { .clear-btn {