Get mobile search working correctly

OneBusAway · Feb 6, 2024 · 39d6128 · 39d6128
1 parent 6565d45
commit 39d6128
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/frontend/styles/index.css b/frontend/styles/index.css
@@ -30,6 +30,10 @@ button.DocSearch.DocSearch-Button {
 
 }
 
+#oba-docs-search-container--mobile button.DocSearch-Button {
+  margin: 0;
+}
+
 .DocSearch-Search-Icon {
   @apply !h-5 !w-5;
 }

diff --git a/src/_layouts/default.erb b/src/_layouts/default.erb
@@ -45,7 +45,16 @@
         apiKey: "c0fb830900a6cd24677d8f3d791ed567",
         indexName: "onebusaway-onrender",
         insights: true, // Optional, automatically send insights when user interacts with search results
-        container: '.oba-docs-search-container',
+        container: '#oba-docs-search-container--desktop',
+        debug: false // Set debug to true if you want to inspect the modal
+      });
+
+      docsearch({
+        appId: "RDM4DTADEP",
+        apiKey: "c0fb830900a6cd24677d8f3d791ed567",
+        indexName: "onebusaway-onrender",
+        insights: true, // Optional, automatically send insights when user interacts with search results
+        container: '#oba-docs-search-container--mobile',
         debug: false // Set debug to true if you want to inspect the modal
       });
     </script>

diff --git a/src/_partials/_navbar.erb b/src/_partials/_navbar.erb
@@ -1,7 +1,8 @@
 <nav class="pl-5 pt-10 lg:p-0 lg:block max-h-[100svh] overflow-y-scroll" :class="{ 'hidden': !nav_open }">
-  <div class="lg:hidden oba-docs-search-container">
-  </div>
   <ul role="list">
+    <li class="relative mt-10 ml-0 mr-5 lg:hidden">
+      <div id="oba-docs-search-container--mobile"></div>
+    </li>
     <%= render(NavigationSection.new(
       "Home",
       children: {

diff --git a/src/_partials/_top_bar.erb b/src/_partials/_top_bar.erb
@@ -1,7 +1,7 @@
 <div class="fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80 backdrop-blur-sm lg:left-72 xl:left-80 dark:backdrop-blur bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]" style="--bg-opacity-light:0.5;--bg-opacity-dark:0.2">
   <div class="absolute inset-x-0 top-full h-px transition bg-zinc-900/7.5 dark:bg-white/7.5"></div>
 
-  <div class="hidden lg:block lg:max-w-md lg:flex-auto oba-docs-search-container">
+  <div class="hidden lg:block lg:max-w-md lg:flex-auto" id="oba-docs-search-container--desktop">
   </div>
 
   <div class="flex items-center gap-5 lg:hidden">