Toggle the search widget from a button

4 files changed, 20 insertions, 2 deletions

diff --git a/app/views/layouts/_nav_controls.html.erb b/app/views/layouts/_nav_controls.html.erb
index 66524044..44010eb6 100644
--- a/app/views/layouts/_nav_controls.html.erb
+++ b/app/views/layouts/_nav_controls.html.erb
@@ -1,7 +1,9 @@
 
 <% if current_user %>
   <%= link_to icon("home", library: "tabler", "aria-hidden": true), admin_path, "aria-label": t(".dashboard"), title: t(".dashboard") %>
-  <a href="#" onclick="admin_search.display_toggle(); return false;" aria-label="<%= t(".search") %>" title="<%= t(".search") %>"><%= icon("search", library: "tabler", "aria-hidden": true) %></a>
+  <button type="button" id="search_toggle" class="nav_toggle" aria-label="<%= t(".search") %>" title="<%= t(".search") %>">
+    <%= icon("search", library: "tabler", "aria-hidden": true) %>
+  </button>
 <% end %>
 <%= link_to root_path, class: "nav_toggle",
       "aria-label" => t(".public_site"), title: t(".public_site") do %>
diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index abe434bf..994d3698 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -58,6 +58,15 @@ $(document).ready(function () {
     }
   });
 
+  if ($("#search_toggle").length != 0) {
+    var search_toggle = document.getElementById('search_toggle');
+    search_toggle.addEventListener('click', function (e) {
+      admin_search.display_toggle();
+      e.preventDefault();
+      console.log("Toggle");
+    });
+  }
+
   if ($("#dashboard_search_term").length != 0) {
     dashboard_search.initialize();
   }
diff --git a/public/javascripts/admin_search.js b/public/javascripts/admin_search.js
index 8c86a74f..e20e511a 100644
--- a/public/javascripts/admin_search.js
+++ b/public/javascripts/admin_search.js
@@ -14,7 +14,7 @@ admin_search = {
     $(document).bind("click", function(e) {
       if ($('#search_widget').is(':visible') &&
           !$(e.target).closest('#search_widget').length &&
-          !$(e.target).closest('a[onclick*="display_toggle"]').length) {
+          !$(e.target).closest('#search_toggle').length) {
         $('#search_widget').fadeOut();
       }
     });
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index fec27ca1..923cac4b 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -481,6 +481,7 @@ input[type="submit"]:hover {
 }
 
 #main_navigation a,
+#main_navigation button,
 #main_navigation label.nav_toggle,
 #main_navigation form.button_to button {
   display: inline-flex;
@@ -491,10 +492,12 @@ input[type="submit"]:hover {
   width: 2.75rem;
   height: 2.75rem;
   padding: 0;
+  border-color: transparent;
   border-radius: var(--radius-control);
 }
 
 #main_navigation a:hover,
+#main_navigation button:hover,
 #main_navigation label.nav_toggle:hover {
   color: var(--surface);
   background-color: var(--text);
@@ -504,6 +507,10 @@ input[type="submit"]:hover {
   cursor: pointer;
 }
 
+#main_navigation button#search_toggle {
+  cursor: zoom-in;
+}
+
 #main_navigation svg {
   width: 1.5rem;
   height: 1.5rem;