themes/default/layouts/partials/navigator-middle: Use query selector

Search entry -> search box

4 files changed, 35 insertions, 38 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index faa56f9..c87faa2 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -143,7 +143,7 @@ html,
 
 sup:target [role="doc-noteref"][href^="#fn\:"],
 li:target [role="doc-backlink"][href^="#fnref\:"],
-:focus:not(html):not(body):not(svg):not(pre):not(#search-input) {
+:focus:not(html):not(body):not(svg):not(pre):not(#search) {
   outline: 0.15rem solid;
   outline-offset: 0.05rem;
   text-decoration: none;
@@ -1869,23 +1869,23 @@ author-list p {
   display: none;
 }
 
-search-entry {
+search-box {
   display: inherit;
   width: 100%;
   z-index: 1;
 }
 
-search-entry[data-focus],
-search-entry:focus-within {
+search-box[data-focus],
+search-box:focus-within {
   position: absolute;
 }
 
-search-entry:focus-within form {
+search-box:focus-within form {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-search-entry form {
+search-box form {
   background-color: #fefefe;
   background-color: var(--background);
   border-radius: 0.5rem;
@@ -1898,7 +1898,7 @@ search-entry form {
   margin: 0 0.5rem;
 }
 
-search-entry form button {
+search-box form button[type="submit"] {
   background-color: transparent;
   border: none;
   box-shadow: none;
@@ -1914,7 +1914,7 @@ search-entry form button {
   line-height: 1;
 }
 
-search-entry form input {
+search-box form input {
   -webkit-appearance: none;
   border-bottom-left-radius: 0.5rem;
   border-top-left-radius: 0.5rem;
@@ -1927,19 +1927,19 @@ search-entry form input {
   color: inherit;
 }
 
-search-entry form input,
-search-entry form input:focus {
+search-box form input,
+search-box form input:focus {
   outline: none;
   background-color: #fefefe;
   background-color: var(--text-background);
 }
 
-search-entry form button svg {
+search-box form button svg {
   stroke-width: 0.1rem;
   width: 100%;
 }
 
-search-entry ul {
+search-box ul {
   position: absolute;
   background-color: inherit;
   padding-top: 2.9rem;
@@ -1954,11 +1954,11 @@ search-entry ul {
   box-shadow: 0 4px 6px var(--shadow);
 }
 
-search-entry ul li a span {
+search-box ul li a span {
   font-weight: 400;
 }
 
-search-entry ul li a {
+search-box ul li a {
   font-weight: 700;
   color: inherit;
   text-decoration: none;
@@ -1966,18 +1966,18 @@ search-entry ul li a {
   padding: 0.25rem 0.75rem;
 }
 
-search-entry ul li:first-child a {
+search-box ul li:first-child a {
   background-color: #ebf3ff;
   background-color: var(--hover-background-alternate);
 }
 
-search-entry ul li:only-child a,
-search-entry ul li:last-child a:hover {
+search-box ul li:only-child a,
+search-box ul li:last-child a:hover {
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
 }
 
-search-entry ul li a:hover {
+search-box ul li a:hover {
   background-color: #eee;
   background-color: var(--hover-background);
 }
@@ -2448,7 +2448,7 @@ nav[hidden] {
 }
 
 @media screen and (max-width: 1080px) {
-  search-entry,
+  search-box,
   column-base[position="left"],
   column-base[position="middle"] > nav:first-child section {
     display: none;
diff --git a/assets/js/index.js b/assets/js/index.js
index e8e307a..e0e0436 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -395,11 +395,11 @@
         "URLChangedCustomEvent"
     ].forEach(function(event) {
         self.addEventListener(event, function() {
-            const form = document.getElementById("search-form");
-            const query = document.getElementById("search-input");
-            const submit = document.getElementById("search-submit");
-            const dropdown = document.getElementById("search-results");
-            const container = document.getElementById("search-frame");
+            const container = document.querySelector("search-box");
+            const dropdown = document.querySelector("search-box ul");
+            const form = document.querySelector("search-box form");
+            const query = document.querySelector("search-box input");
+            const submit = document.querySelector("search-box button");
             function first(element) {
                 if (element.firstChild.nextElementSibling) {
                     return element.firstChild.nextElementSibling.firstChild.nextElementSibling;
diff --git a/static/js/fixedsearch.ts b/static/js/fixedsearch.ts
index f933dd7..04d318b 100644
--- a/static/js/fixedsearch.ts
+++ b/static/js/fixedsearch.ts
@@ -8,11 +8,11 @@
 (function () {
   ["DOMContentLoaded", "URLChangedCustomEvent"].forEach(function (event) {
   self.addEventListener(event, function () {
-    const form = document.getElementById("search-form"); // targets <form>
-    const query = document.getElementById("search-input"); // targets <input>
-    const submit = document.getElementById("search-submit"); // targets <button>
-    const dropdown = document.getElementById("search-results"); // targets <ul>
-    const container = document.getElementById("search-frame"); // targets parent
+    const container = document.querySelector("search-box");
+    const dropdown  = document.querySelector("search-box ul");
+    const form      = document.querySelector("search-box form");
+    const query     = document.querySelector("search-box input");
+    const submit    = document.querySelector("search-box button");
 
     function first(element) {
       if (element.firstChild.nextElementSibling) {
diff --git a/themes/default/layouts/partials/navigator-middle.html b/themes/default/layouts/partials/navigator-middle.html
index efe5153..7259b43 100644
--- a/themes/default/layouts/partials/navigator-middle.html
+++ b/themes/default/layouts/partials/navigator-middle.html
@@ -52,27 +52,24 @@
     {{ end }}
   {{ end }}
 
-  <search-entry id="search-frame">
-    <form
-      id="search-form"
-      action="https://lite.duckduckgo.com/lite/"
-    >
+  <search-box>
+    <form role="search" action="https://lite.duckduckgo.com/lite/">
       <input
         aria-autocomplete="list"
         aria-label="search input"
         autocomplete="off"
-        id="search-input"
+        id="search"
         name="q"
         required=""
         spellcheck="false"
         type="search"
         value=""
       />
-      <button id="search-submit">
+      <button type="submit">
         {{ safeHTML (readFile (print (partial "function-paths.html").static "/icons/feather/search.svg")) }}
         <small>Search</small>
       </button>
-      <ul hidden="" id="search-results"></ul>
+      <ul hidden=""></ul>
     </form>
- </search-entry>
+ </search-box>
 </nav>