From 97f51a73d4a2e7fb42ccf1107abf07e985cfa13a Mon Sep 17 00:00:00 2001
From: erdgeist <erdgeist@erdgeist.org>
Date: Tue, 30 Jun 2026 03:36:51 +0200
Subject: Improve admin search overlay layout and behaviour

- Widen overlay (300px -> min(520px, 90vw)), centre instead of
  hardcoded left:400px, so it scales from mobile to desktop
- Split title and unique_name into separate JSON fields and DOM
  elements; two-line result layout (bold title, small grey
  monospace path) instead of "Title (path)" wrapping awkwardly
- Add small margin between title and path line
- Fix event handler stacking: keyup/escape/outside-click handlers
  were being rebound on every display_toggle call. Moved all
  bindings to initialize(), display_toggle() now only shows/hides
- Switch search input from keyup to input event, catching paste
  and cut via mouse which keyup misses
- Add Escape key and outside-click to dismiss the overlay
- Stop clearing search box and results on close; reopening now
  preserves prior search, matching standard search UI behaviour
- Link search results to node_path instead of edit_node_path,
  since opening edit auto-locks the node
- Add "press Enter to see all results" hint in dropdown
- Disable browser autocomplete on search input
---
 public/javascripts/admin_search.js | 60 ++++++++++++++++++++++++++------------
 public/stylesheets/admin.css       | 44 +++++++++++++++++++++-------
 2 files changed, 74 insertions(+), 30 deletions(-)

(limited to 'public')

diff --git a/public/javascripts/admin_search.js b/public/javascripts/admin_search.js
index 37c46cc..9bf878b 100644
--- a/public/javascripts/admin_search.js
+++ b/public/javascripts/admin_search.js
@@ -5,46 +5,68 @@ admin_search = {
       admin_search.display_toggle();
       return false;
     });
-  },
 
-  display_toggle : function() {
-    if ($('#search_widget').css("display") != "none") {
-      $('#search_widget').fadeOut();
-    }
-    else {
-      $('#search_widget').fadeIn();
-      $('#search_term').attr("value", "");
-      $('#search_term').focus();
-    }
+    $(document).bind("keydown", function(e) {
+      if (e.key === "Escape" && $('#search_widget').is(':visible')) {
+        $('#search_widget').fadeOut();
+      }
+    });
+
+    $(document).bind("click", function(e) {
+      if ($('#search_widget').is(':visible') &&
+          !$(e.target).closest('#search_widget').length &&
+          !$(e.target).closest('a[onclick*="display_toggle"]').length) {
+        $('#search_widget').fadeOut();
+      }
+    });
 
-    $("#search_term").bind("keyup", function() {
+    $("#search_term").bind("input", function() {
+      if (!$('#search_widget').is(':visible')) return;
       if ($(this).val()) {
         $.ajax({
           type: "GET",
           url: ADMIN_SEARCH_URL,
           data: "search_term=" + $(this).val(),
           dataType: "json",
-          success : function(results) {
+          success: function(results) {
             admin_search.show_results(results);
           },
           error: function(xhr, status, error) {
             console.log("Ajax error:", status, error, xhr.status, xhr.responseText);
           }
         });
-      }
-      else {
+      } else {
         $('#search_results').slideUp();
         $('#search_results').empty();
       }
     });
   },
 
+  display_toggle : function() {
+    if ($('#search_widget').is(':visible')) {
+      $('#search_widget').fadeOut();
+    } else {
+      $('#search_widget').fadeIn();
+      $('#search_term').focus();
+    }
+  },
+
   show_results : function(results) {
-     $('#search_results').empty();
-     for (result in results) {
-       $('#search_results').append("<p><a href='"+ results[result].edit_path + "'>" + results[result].title + "</a></p>");
-     }
-     $('#search_results').slideDown();
+    $('#search_results').empty();
+    if (results.length) {
+      $('#search_results').append(
+        "<p class='search_more'>Press Enter to see all results ⏎</p>"
+      );
+    }
+    for (result in results) {
+      $('#search_results').append(
+        "<p><a href='" + results[result].node_path + "'>" +
+          results[result].title +
+          "<span class='result_path'>" + results[result].unique_name + "</span>" +
+        "</a></p>"
+      );
+    }
+    $('#search_results').slideDown();
   }
 };
 
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 4b08356..c9ef173 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -495,28 +495,50 @@ table tr.header {
 #search_widget {
   position: absolute;
   top: 20px;
-  left: 400px;
-  width: 300px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(520px, 90vw);
   border: 1px solid #000000;
   -webkit-box-shadow: 3px 3px 5px #b1b1b1;
-  -moz-box-shadow: 10px 10px 5px #888, 10px 10px 30px rgba(0,0,0,0.4);
+  box-shadow: 3px 3px 5px #b1b1b1;
   background-color: #ffffff;
   padding: 3px;
-  text-align: center;
+  z-index: 100;
 }
 
-#search_widget span {
+#search_widget input {
+  width: calc(100% - 70px);
   font-size: 18px;
 }
 
-#search_widget input {
-  width: 210px;
-  font-size: 18px;
+#search_results p {
+  margin: 0;
+  padding: 4px 4px 0 4px;
+  border-bottom: 1px solid #e8e8e8;
 }
 
-#search_widget #search_results {
-  padding: 4px;
-  text-align: left;
+#search_results p a {
+  display: block;
+  font-weight: bold;
+  font-size: 0.95rem;
+}
+
+#search_results p span.result_path {
+  display: block;
+  margin-top: 2px;
+  font-size: 0.75rem;
+  font-family: monospace;
+  color: #969696;
+  padding-bottom: 4px;
+}
+
+#search_results p.search_more {
+  margin: 0;
+  padding: 6px 4px;
+  font-size: 0.8rem;
+  color: #969696;
+  font-style: italic;
+  border-bottom: none;
 }
 
 table#content th.description {
-- 
cgit v1.3