Search styling refactoring, and fix for offline search (google#1279)

ouhft · Oct 13, 2022 · 19ec7be · 19ec7be
1 parent ba4ed72
commit 19ec7be
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 85 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -34,13 +34,14 @@ notes][0.5.0]. **BREAKING CHANGES** are documented below.
 - **[Upgraded FontAwesome][]** to v6 from v5. While many icons were renamed, the
   v5 names still work. For details about icon renames and more, see [What's
   changed][].
+- **Search-box**: the HTML structure and class names have changed, due to the
+  Font Awesome upgrade, for both online and offline search. This may affect your
+  project if you have overridden search styling or scripts.
 
 **Other changes**:
 
 - By default, Docsy now uses the [gtag.js][] analytics library for all site
   tags. For details, see [Adding Analytics > Setup][].
-- **Navbar search-box** width is narrower, as a result of the FontAwesome (FA)
-  upgrade. In any case, the search-box styling has also been updated.
 
 [Adding Analytics > Setup]: https://www.docsy.dev/docs/adding-content/feedback/#setup
 [v4.6.2 release notes]: https://github.com/twbs/bootstrap/releases/tag/v4.6.2

diff --git a/assets/js/offline-search.js b/assets/js/offline-search.js
@@ -4,7 +4,7 @@
     'use strict';
 
     $(document).ready(function () {
-        const $searchInput = $('.td-search-input');
+        const $searchInput = $('.td-search input');
 
         //
         // Options for popover
@@ -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/js/search.js b/assets/js/search.js
@@ -21,7 +21,7 @@ limitations under the License.
     var Search = {
         init: function() {
             $(document).ready(function() {
-               $(document).on('keypress', '.td-search-input', function(e) {
+               $(document).on('keypress', '.td-search input', function(e) {
                     if (e.keyCode !== 13) {
                         return
                     }

diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
@@ -36,7 +36,6 @@
         width: 100%;
     }
 
-
     .navbar-brand {
         text-transform: none;
         text-align: middle;
@@ -57,17 +56,7 @@
         font-weight: $font-weight-bold;
     }
 
-    .td-search-wrapper .fa {
-        color: $navbar-dark-color;
-    }
-
-    .td-search-input {
-        border: none;
-        color: $navbar-dark-color;
-        @include placeholder {
-            color: $navbar-dark-color;
-        }
-    }
+    // For .td-search__input styling, see _search.scss
 
     .dropdown {
         min-width: 100px;

diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
@@ -1,59 +1,103 @@
 // Search
-.td-search-wrapper {
-    position: relative;
+
+.td-search {
     background: transparent;
+    position: relative;
     width: 90%;
-}
 
-.td-search-wrapper:not(:focus-within) {
-    color: $input-placeholder-color;
-}
+    // Search icon
+    &__icon {
+        // Vertically center the content.
+        display: flex;
+        align-items: center;
+        height: 100%;
 
-.td-search-wrapper .td-search-input:not(:focus) {
-    background: transparent;
-}
+        // Position this on the left of the input.
+        position: absolute;
+        left: 0.75em;
 
-.td-search-wrapper .td-search-input {
-    width: 100%;
-    text-indent: 1.25em;
+        // Click-through to the underlying input.
+        pointer-events: none;
+
+        &:before {
+            @extend .fa;
+            content: fa-content($fa-var-search);
+        }
 
-    &.form-control:focus {
-        border-color: lighten($primary, 60%);
-        box-shadow: 0 0 0 2px lighten($primary, 30%);
-        color: inherit;
+        // Styling adjustments for the navbar
+        @at-root {
+            .td-navbar & {
+                color: $navbar-dark-color;
+            }
+        }
     }
 
-    @if $enable-rounded {
-        border-radius: 1rem;
+    // Search input element
+    &__input {
+        width: 100%;
+        text-indent: 1.25em;
+
+        @if $enable-rounded {
+            border-radius: 1rem;
+        }
+
+        &:not(:focus) {
+            background: transparent;
+        }
+
+        &.form-control:focus {
+            border-color: lighten($primary, 60%);
+            box-shadow: 0 0 0 2px lighten($primary, 30%);
+            color: inherit;
+        }
+
+        // Styling adjustments for the navbar
+        @at-root {
+            .td-navbar & {
+                border: none;
+                color: $navbar-dark-color;
+
+                @include placeholder {
+                    color: $navbar-dark-color;
+                }
+            }
+        }
+
     }
-}
 
-.td-search-wrapper .fa {
-    // Vertically center the content.
-    display: flex;
-    justify-content: center;
-    align-items:center;
-    height: 100%;
+    // Hide icon on focus
+    &:focus-within {
 
-    // Position this on the left of the input.
-    position: absolute;
-    left: 0.75em;
+        .td-search__icon {
+            display: none;
+        }
 
-    // Click-through to the underlying input.
-    pointer-events: none;
-}
+        .td-search-input {
+            text-indent: 0px;
+        }
+    }
 
-// Hide the icon on focus.
-.td-search-wrapper:focus-within .fa {
-    display: none;
+    &:not(:focus-within) {
+        color: $input-placeholder-color;
+    }
 }
 
-.td-search-wrapper:focus-within .td-search-input {
-   text-indent: 0px;
+// 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;
+        }
+    }
 }
 
-.popover.offline-search-result {
-    // Override bootstrap default style (max-width: $popover-max-width;)
+.td-offline-search-results {
     max-width: 90%;
 
     .card {
@@ -63,4 +107,14 @@
             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
@@ -1,7 +1,7 @@
 {{ if .Site.Params.gcs_engine_id -}}
-<div class="td-search-wrapper">
-<i class="fa fa-search"></i>
-<input type="search" class="form-control td-search-input" placeholder="{{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
+<div class="td-search">
+  <div class="td-search__icon"></div>
+  <input type="search" class="td-search__input form-control td-search-input" placeholder="{{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
 </div>
 {{ else if .Site.Params.algolia_docsearch -}}
 <div id="docsearch"></div>
@@ -13,21 +13,24 @@
 {{ end -}}
 {{ $offlineSearchLink := $offlineSearchIndex.RelPermalink -}}
 
-<input
-  type="search"
-  class="form-control td-search-input"
-  placeholder="&#xf002; {{ 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;
 }
 ```