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
-
-
-