diff options
author | tdro <tdro@noreply.example.com> | 2022-05-04 03:56:38 -0400 |
---|---|---|
committer | tdro <tdro@noreply.example.com> | 2022-05-04 03:56:38 -0400 |
commit | d4570297d931c001b3a95ba3ab5f3891fd8a99f9 (patch) | |
tree | 9645db81f8e4b83e83457b62ea9cc480601a6710 /static | |
parent | 8200cb6919489187b2916fc8902f75eb4293d1a2 (diff) | |
download | canory-d4570297d931c001b3a95ba3ab5f3891fd8a99f9.tar.gz canory-d4570297d931c001b3a95ba3ab5f3891fd8a99f9.tar.bz2 canory-d4570297d931c001b3a95ba3ab5f3891fd8a99f9.zip |
static/js/fixedsearch: Keep search bar focused on inactivity
Diffstat (limited to 'static')
-rw-r--r-- | static/css/default.css | 10 | ||||
-rw-r--r-- | static/js/fixedsearch.ts | 4 | ||||
-rw-r--r-- | static/js/index.js | 4 |
3 files changed, 14 insertions, 4 deletions
diff --git a/static/css/default.css b/static/css/default.css index 3ecb7a9..caeaab5 100644 --- a/static/css/default.css +++ b/static/css/default.css @@ -1147,6 +1147,7 @@ search-entry { width: 100%; } +search-entry[data-focus], search-entry:focus-within { position: absolute; } @@ -1161,12 +1162,12 @@ search-entry form { background-color: var(--background); border-radius: 0.5rem; border: 1px solid; - border: 1px solid; border-color: #ccc; border-color: var(--border-darker); display: inline-flex; - margin: 0 0.5rem; + margin: 0 1rem; width: 100%; + position: relative; } search-entry form button { @@ -1212,13 +1213,14 @@ search-entry form input:focus { search-entry ul { position: absolute; background-color: inherit; - padding-top: 3rem; + padding-top: 2.9rem; border: 1px solid #ccc; border: 1px solid var(--border-darker); border-radius: 0.5rem; z-index: -1; - margin-right: 0.5rem; + margin-right: 1rem; margin-left: -0.05rem; + width: 100.3%; } search-entry ul li a span { diff --git a/static/js/fixedsearch.ts b/static/js/fixedsearch.ts index 26b9ac1..3788cb3 100644 --- a/static/js/fixedsearch.ts +++ b/static/js/fixedsearch.ts @@ -9,6 +9,7 @@ const query = document.getElementById("search-input"); // input box for search const submit = document.getElementById("search-submit"); // form submit button const dropdown = document.getElementById("search-results"); // targets the <ul> + const container = document.getElementById("search-frame"); // targets the upper parent container form.addEventListener("focusin", function () { initialize(); @@ -79,6 +80,7 @@ scrolls = 0; document.activeElement.blur(); dropdown.setAttribute("hidden", ""); + container.removeAttribute("data-focus"); } scrolls++; }); @@ -86,6 +88,7 @@ document.addEventListener("click", function (event) { if (!form.contains(event.target)) { dropdown.setAttribute("hidden", ""); + container.removeAttribute("data-focus"); } }); @@ -163,6 +166,7 @@ </li> `; dropdown.removeAttribute("hidden"); + container.setAttribute("data-focus", ""); } else { dropdown.removeAttribute("hidden"); for (const string in results.slice(0, 10)) { diff --git a/static/js/index.js b/static/js/index.js index df649df..8c6e922 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -279,6 +279,7 @@ const query = document.getElementById("search-input"); document.getElementById("search-submit"); const dropdown = document.getElementById("search-results"); + const container = document.getElementById("search-frame"); form.addEventListener("focusin", function() { initialize(); }); @@ -331,12 +332,14 @@ scrolls = 0; document.activeElement.blur(); dropdown.setAttribute("hidden", ""); + container.removeAttribute("data-focus"); } scrolls++; }); document.addEventListener("click", function(event) { if (!form.contains(event.target)) { dropdown.setAttribute("hidden", ""); + container.removeAttribute("data-focus"); } }); function fetch_JSON(path, callback) { @@ -401,6 +404,7 @@ </li> `; dropdown.removeAttribute("hidden"); + container.setAttribute("data-focus", ""); } else { dropdown.removeAttribute("hidden"); for(const string in results.slice(0, 10)){ |