Fix offline search

google · Oct 13, 2022 · 7f8a840 · 7f8a840
1 parent 4a24530
commit 7f8a840
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 32 deletions.
diff --git a/assets/js/offline-search.js b/assets/js/offline-search.js
@@ -14,7 +14,7 @@
         $searchInput.data('placement', 'bottom');
         $searchInput.data(
             'template',
-            '<div class="popover offline-search-result" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
+            '<div class="td-offline-search-results popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
         );
 
         //
@@ -130,11 +130,8 @@
                             .css({ fontWeight: 'bold' })
                     )
                     .append(
-                        $('<i>')
-                            .addClass('fas fa-times search-result-close-button')
-                            .css({
-                                cursor: 'pointer',
-                            })
+                        $('<span>')
+                            .addClass('td-offline-search-results__close-button')
                     )
             );
 
@@ -182,7 +179,7 @@
             }
 
             $targetSearchInput.on('shown.bs.popover', () => {
-                $('.search-result-close-button').on('click', () => {
+                $('.td-offline-search-results__close-button').on('click', () => {
                     $targetSearchInput.val('');
                     $targetSearchInput.trigger('change');
                 });

diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
@@ -82,8 +82,20 @@
   }
 }
 
-.popover.offline-search-result {
-  // Override bootstrap default style (max-width: $popover-max-width;)
+// Offline search
+
+.td-search--offline {
+  &:focus-within {
+    // Don't hide the search icon on focus: this gives better UX when user
+    // explores content of search-results popup and focus is lost.
+    .td-search__icon {
+      display: flex;
+      color: $input-placeholder-color;
+    }
+  }
+}
+
+.td-offline-search-results {
   max-width: 90%;
 
   .card {
@@ -93,4 +105,13 @@
       font-weight: bold;
     }
   }
-}
+
+  &__close-button {
+    // cursor: pointer;
+    float: right;
+    &:after {
+      @extend .fas;
+      content: fa-content($fa-var-times);
+    }
+  }
+}
diff --git a/layouts/partials/search-input.html b/layouts/partials/search-input.html
@@ -13,23 +13,24 @@
 {{ end -}}
 {{ $offlineSearchLink := $offlineSearchIndex.RelPermalink -}}
 
-<div class="td-search">
-<input
-  type="search"
-  class="td-search__input form-control"
-  placeholder="{{ T "ui_search" }}"
-  aria-label="{{ T "ui_search" }}"
-  autocomplete="off"
-  {{/*
-    The data attribute name of the json file URL must end with `src` since
-    Hugo's absurlreplacer requires `src`, `href`, `action` or `srcset` suffix for the attribute name.
-    If the absurlreplacer is not applied, the URL will start with `/`.
-    It causes the json file loading error when when relativeURLs is enabled.
-    https://github.com/google/docsy/issues/181
-  */}}
-  data-offline-search-index-json-src="{{ $offlineSearchLink }}"
-  data-offline-search-base-href="/"
-  data-offline-search-max-results="{{ .Site.Params.offlineSearchMaxResults | default 10 }}"
->
+<div class="td-search td-search--offline">
+  <div class="td-search__icon"></div>
+  <input
+    type="search"
+    class="td-search__input form-control"
+    placeholder="{{ T "ui_search" }}"
+    aria-label="{{ T "ui_search" }}"
+    autocomplete="off"
+    {{/*
+      The data attribute name of the json file URL must end with `src` since
+      Hugo's absurlreplacer requires `src`, `href`, `action` or `srcset` suffix for the attribute name.
+      If the absurlreplacer is not applied, the URL will start with `/`.
+      It causes the json file loading error when when relativeURLs is enabled.
+      https://github.com/google/docsy/issues/181
+    */}}
+    data-offline-search-index-json-src="{{ $offlineSearchLink }}"
+    data-offline-search-base-href="/"
+    data-offline-search-max-results="{{ .Site.Params.offlineSearchMaxResults | default 10 }}"
+  >
 </div>
 {{ end -}}
diff --git a/userguide/content/en/docs/adding-content/navigation.md b/userguide/content/en/docs/adding-content/navigation.md
@@ -491,10 +491,8 @@ The width of the search results popover will automatically widen according to th
 If you want to limit the width, add the following scss into `assets/scss/_variables_project.scss`.
 
 ```scss
-body {
-    .popover.offline-search-result {
-        max-width: 460px;
-    }
+.td-offline-search-results {
+  max-width: 460px;
 }
 ```