From 19ec7be59a8ac8f959ac3b0688dd9edeb36c8f9a Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Thu, 13 Oct 2022 16:15:01 -0400 Subject: [PATCH] Search styling refactoring, and fix for offline search (#1279) --- CHANGELOG.md | 5 +- assets/js/offline-search.js | 13 +- assets/js/search.js | 2 +- assets/scss/_nav.scss | 13 +- assets/scss/_search.scss | 130 +++++++++++++----- layouts/partials/search-input.html | 43 +++--- .../en/docs/adding-content/navigation.md | 6 +- 7 files changed, 127 insertions(+), 85 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index af42505696..a5061abe18 100644 --- 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 index 55e8a81caf..ecaa1f36ee 100644 --- 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', - '' + '' ); // @@ -130,11 +130,8 @@ .css({ fontWeight: 'bold' }) ) .append( - $('') - .addClass('fas fa-times search-result-close-button') - .css({ - cursor: 'pointer', - }) + $('') + .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 index 83fbb155d5..2ae687c791 100644 --- 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 index b5429fd11a..37348c30ec 100644 --- 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 index bd8ca34e24..481ec5ddb6 100644 --- 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 index 86eb0c1706..feb1e74460 100644 --- a/layouts/partials/search-input.html +++ b/layouts/partials/search-input.html @@ -1,7 +1,7 @@ {{ if .Site.Params.gcs_engine_id -}} -
- - +
+
+
{{ else if .Site.Params.algolia_docsearch -}}
@@ -13,21 +13,24 @@ {{ end -}} {{ $offlineSearchLink := $offlineSearchIndex.RelPermalink -}} - +
+
+ +
{{ end -}} diff --git a/userguide/content/en/docs/adding-content/navigation.md b/userguide/content/en/docs/adding-content/navigation.md index 7ff60b1f64..0e05e50dc3 100644 --- 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; } ```