Improve G-S search modal

include/header.inc

@@ -330,7 +330,7 @@ if (!isset($config["languages"])) {
 <nav id="trick"><div><?php doc_toc("en") ?></div></nav>
 <div id="goto">
     <div class="search">
-         <div class="text"></div>
+         <input class="text" type="text" placeholder="Type to search this page" aria-label="Search this page" autocomplete="off" spellcheck="false">
          <div class="results"><ul></ul></div>
    </div>
 </div>

public/js/common.js

@@ -21,7 +21,14 @@ Mousetrap.bind("?", function () {
 });
 Mousetrap.bind("esc", function () {
     $("#trick").slideUp();
-    $("#goto").slideUp();
+    $("#goto").slideUp(function () {
+        if ($(this).is(":visible")) {
+            return;
+        }
+
+        $("#goto .text").val("");
+        $("#goto .results ul").empty();
+    });
 
     $("html").off("keydown");
     $("html").off("keypress");
@@ -196,48 +203,36 @@ Mousetrap.bind("g s", function (e) {
 });
 
 function boogie(e, cb) {
-    cb($("#goto .text").text());
-    $("#goto .results a:first").focus();
+    e.preventDefault();
+    var searchInput = $("#goto .text");
+    cb(searchInput.val());
     $("#goto").slideToggle();
+    $("#goto").scrollTop(0);
+    searchInput[0].focus({ preventScroll: true });
+
+    searchInput.off("input.gotoSearch").on("input.gotoSearch", function () {
+        var txt = $(this).val().trim();
+        $("#goto .results ul").empty();
+        cb(txt);
+    });
 
     $("html").on("keydown", function (e) {
         switch (e.which || e.keyCode) {
-            case 8:
-                /* Backspace */
-                var txt = $("#goto .text").text();
-                txt = txt.substring(0, txt.length - 1);
-                $("#goto .text").text(txt);
-                $("#goto .results ul").empty();
-                cb(txt);
-                $("#goto .results a:first").focus();
-                e.preventDefault();
-                break;
             case 13:
                 /* Enter */
+                var firstResult = $("#goto .results a:first")[0];
+                if (firstResult) {
+                    firstResult.click();
+                }
                 Mousetrap.unpause();
                 Mousetrap.trigger('esc');
+                e.preventDefault();
                 return true;
-            case 9:
-                /* Tab */
-                $(document.activeElement).parent().next().first().focus();
-                break;
             case 27:
                 Mousetrap.unpause();
                 Mousetrap.trigger('esc');
         }
     });
-    $("html").on("keypress", function (e) {
-        if (e.which == 13) {
-            return true;
-        }
-        e.preventDefault();
-        var letter = String.fromCharCode(e.which || e.keyCode);
-        $("#goto .text").append(letter);
-        var txt = $("#goto .text").text().trim();
-        $("#goto .results ul").empty();
-        cb(txt);
-        $("#goto .results a:first").focus();
-    });
 
     Mousetrap.pause();
 }

public/js/search.js

@@ -255,6 +255,20 @@ const initSearchModal = () => {
 
     // Open when / is pressed
     document.addEventListener("keydown", (event) => {
+        if (event.key === "/") {
+            const gotoOverlay = document.getElementById("goto");
+            const gotoInput = gotoOverlay?.querySelector(".text");
+            if (
+              gotoOverlay &&
+              getComputedStyle(gotoOverlay).display !== "none" &&
+              event.target !== gotoInput
+            ) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                return;
+            }
+        }
+
         const target = event.target;
 
         if (

public/styles/theme-base.css

@@ -1307,29 +1307,95 @@ div.soft-deprecation-notice blockquote.sidebar {
 
 #goto {
   display: none;
-  background-color: var(--dark-grey-color);
-  height: 100%;
-  width: 100%;
-  opacity: 0.9;
   position: fixed;
-  top: 64px;
+  inset: 0;
   z-index: 5000;
   color: #E6E6E6;
+  box-sizing: border-box;
+  overflow-y: auto;
+  padding: 0 1rem 1rem;
+  background-color: rgba(0, 0, 0, 0.65);
+}
+#goto div {
+  width: auto;
+}
+#goto .search {
+  width: min(100%, 52rem);
+  margin: 0 auto;
+  padding: 0.625rem clamp(1rem, 3vw, 1.75rem) 1rem;
+  box-sizing: border-box;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 1rem;
+  background-color: var(--dark-grey-color);
+  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.35);
+}
+#goto .search .text {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  color: #222;
+  font-size: 1rem;
+  line-height: 1.5;
+  border: 0;
+  border-radius: 0.5rem;
+  background-color: #fff;
+}
+#goto .search .text::placeholder {
+  color: #777;
+  opacity: 1;
+}
+#goto .search .text:focus {
+  outline: none;
+  box-shadow: none;
 }
 #goto .search .results {
-  text-shadow: 0 2px 3px #555;
-  font-size: 2rem;
-  line-height: 1;
+  margin-top: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.5;
 }
-#goto .search .results :focus {
-  font-size: 2rem;
-  line-height: 1.2;
+#goto .search .results ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-#goto .search .text {
-  color: #222;
-  text-shadow: 0 2px 3px #555;
-  font-size: 10rem;
-  line-height: .7;
+#goto .search .results ul:empty::before {
+  content: "No matching pages found";
+  display: block;
+  padding: 0.5rem 0.75rem;
+  color: rgba(255, 255, 255, 0.7);
+}
+#goto .search .text:placeholder-shown ~ .results ul:empty::before {
+  content: none;
+}
+#goto .search .results li + li {
+  margin-top: 0.25rem;
+}
+#goto .search .results a {
+  display: block;
+  padding: 0.65rem 0.75rem;
+  overflow-wrap: anywhere;
+  color: #E6E6E6;
+  text-decoration: none;
+  border-bottom: 0;
+  border-radius: 0.5rem;
+}
+#goto .search .results a:hover,
+#goto .search .results a:focus {
+  color: #fff;
+  outline: 2px solid rgba(255, 255, 255, 0.45);
+  outline-offset: -2px;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+@media (min-width: 992px) {
+  #goto {
+    padding-top: 1rem;
+  }
+
+  #goto .search {
+    padding-top: 1.125rem;
+  }
 }
 #trick {
     display: none;