alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

✨ feat(search): hide "clear search" icon if input is empty (#388)

Browse Source
This commit is contained in:
Óscar 2024-09-19 16:00:34 +02:00 committed by GitHub
parent 0bebcd1c6d
commit 1ffe43f934
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sass/parts/_search.scss
View File

@ -28,6 +28,7 @@ $icon-size: 1.3rem;
} }
.close-icon { .close-icon {
display: none;
position: absolute; position: absolute;
right: $icon-size; right: $icon-size;
margin-inline-start: 1rem; margin-inline-start: 1rem;

6
static/js/searchElasticlunr.js
View File

@ -2675,6 +2675,7 @@ window.onload = function () {
results.innerHTML = ''; results.innerHTML = '';
resultsContainer.style.display = 'none'; resultsContainer.style.display = 'none';
searchInput.removeAttribute('aria-activedescendant'); searchInput.removeAttribute('aria-activedescendant');
clearSearchButton.style.display = 'none';
} }
// Close modal when clicking/tapping outside. // Close modal when clicking/tapping outside.
@ -2941,10 +2942,13 @@ window.onload = function () {
searchInput.addEventListener( searchInput.addEventListener(
'input', 'input',
async function () { async function () {
const searchTerm = this.value.trim(); const searchInput = this.value;
const searchTerm = searchInput.trim();
const searchIndex = await searchIndexPromise; const searchIndex = await searchIndexPromise;
results.innerHTML = ''; results.innerHTML = '';
// Use the raw input so the "clear" button appears even if there's only spaces.
clearSearchButton.style.display = searchInput.length > 0 ? 'block' : 'none';
resultsContainer.style.display = searchTerm.length > 0 ? 'block' : 'none'; resultsContainer.style.display = searchTerm.length > 0 ? 'block' : 'none';
// Perform the search and store the results. // Perform the search and store the results.

2
static/js/searchElasticlunr.min.js vendored
View File

File diff suppressed because one or more lines are too long