diff --git a/output/index.css b/output/index.css index 233432e..9d7d768 100644 --- a/output/index.css +++ b/output/index.css @@ -179,16 +179,16 @@ header { display: flex; justify-content: center; box-sizing: border-box; - height: 0; + height: 3rem; overflow: hidden; transition: height 0.25s; } -#toggle-search-bar:checked ~ #search-container { - height: 3rem; +.collapsed { + height: 0 !important; } -#toggle-search-bar:not(:checked) ~ #search-container > * { +#search-container.collapsed > * { display: none; } diff --git a/output/js/constants.js b/output/js/constants.js index fa4e0b4..51936b8 100644 --- a/output/js/constants.js +++ b/output/js/constants.js @@ -43,10 +43,11 @@ export const dom = { snackbar: () => document.getElementById("copy-snackbar"), qr_code_buttons: () => document.querySelectorAll('.qr-code-button'), /** @return {HTMLInputElement | null} */ - toggle_search_checkbox: () => document.querySelector('#toggle-search-bar'), + btn_toggle_search: () => document.querySelector('#btn-toggle-search'), /** @return {HTMLInputElement | null} */ search_bar: () => document.querySelector('#search-bar'), - btn_clear_search: () => document.querySelector("#btn-clear-search") + btn_clear_search: () => document.querySelector("#btn-clear-search"), + search_container: () => document.querySelector("#search-container"), } export const JOIN_URL_PASTE = "Copied URL to clipboard. Paste into Session app to join"; @@ -99,8 +100,11 @@ export const ATTRIBUTES = { }; export const CLASSES = { + COMPONENTS: { + COLLAPSED: 'collapsed', + }, SEARCH: { - NO_RESULTS: 'search-no-results' + NO_RESULTS: 'search-no-results', } } diff --git a/output/main.js b/output/main.js index 40c7cb6..ecb23d4 100644 --- a/output/main.js +++ b/output/main.js @@ -449,8 +449,10 @@ function addServerIconInteractions() { } function addSearchInteractions() { - dom.toggle_search_checkbox()?.addEventListener('click', function (ev) { - if (this.checked) { + dom.btn_toggle_search()?.addEventListener('click', function (ev) { + const container = dom.search_container(); + container?.classList.toggle(CLASSES.COMPONENTS.COLLAPSED); + if (!container?.classList.contains(CLASSES.COMPONENTS.COLLAPSED)) { const searchBar = dom.search_bar(); searchBar?.focus(); // Inconsistent; attempt to align search bar to top to make more space for results. @@ -464,13 +466,18 @@ function addSearchInteractions() { setTimeout(() => useSearchTerm(this.value), 0); }) - dom.search_bar()?.addEventListener('keyup', function () { + dom.search_bar()?.addEventListener('keyup', function (ev) { + if (ev.key === "Enter") { + this.blur(); + } useSearchTerm(this.value); }) dom.btn_clear_search()?.addEventListener('click', function () { useSearchTerm(""); - dom.search_bar().value = ""; + const searchBar = dom.search_bar(); + searchBar?.focus(); + searchBar.value = ""; }) } @@ -614,6 +621,7 @@ function initializeSearch() { function useSearchTerm(rawTerm) { if (!rawTerm) { replaceRowsWith(communityFullRowCache); + dom.search_bar()?.classList.remove(CLASSES.SEARCH.NO_RESULTS); } else { const term = rawTerm.toLowerCase(); const termTags = Array.from(rawTerm.matchAll(/#[^#\s]+/g)).map(match => match[0].slice(1).toLowerCase()); diff --git a/sites/index.php b/sites/index.php index b59d393..d37a949 100644 --- a/sites/index.php +++ b/sites/index.php @@ -69,12 +69,12 @@ href="#footer" title="Learn more about sessioncommunities.online." >About - + >Search

Session Communities

- - -
+