diff options
| -rw-r--r-- | static/css/default.css | 10 | ||||
| -rw-r--r-- | static/js/fixedsearch.ts | 4 | ||||
| -rw-r--r-- | static/js/index.js | 4 | ||||
| -rw-r--r-- | themes/default/layouts/partials/navigator-middle.html | 2 |
4 files changed, 15 insertions, 5 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)){ diff --git a/themes/default/layouts/partials/navigator-middle.html b/themes/default/layouts/partials/navigator-middle.html index acbd2f1..fa4e10d 100644 --- a/themes/default/layouts/partials/navigator-middle.html +++ b/themes/default/layouts/partials/navigator-middle.html @@ -31,7 +31,7 @@ {{ partial "navigator-middle-walk.html" . }} - <search-entry> + <search-entry id="search-frame"> <form id="search-form" action="https://lite.duckduckgo.com/lite/"> |