From 83552e65fee15aa12f17219263cba6ae13704231 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Thu, 13 Oct 2022 04:32:22 -0400 Subject: [PATCH 1/4] Refactor search-wrapper style --- assets/scss/_search.scss | 94 ++++++++++++++++-------------- layouts/partials/search-input.html | 4 +- 2 files changed, 52 insertions(+), 46 deletions(-) diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss index bd8ca34e24..0679348d44 100644 --- a/assets/scss/_search.scss +++ b/assets/scss/_search.scss @@ -1,38 +1,15 @@ // Search -.td-search-wrapper { - position: relative; - background: transparent; - width: 90%; -} - -.td-search-wrapper:not(:focus-within) { - color: $input-placeholder-color; -} - -.td-search-wrapper .td-search-input:not(:focus) { - background: transparent; -} - -.td-search-wrapper .td-search-input { - width: 100%; - text-indent: 1.25em; - &.form-control:focus { - border-color: lighten($primary, 60%); - box-shadow: 0 0 0 2px lighten($primary, 30%); - color: inherit; - } - - @if $enable-rounded { - border-radius: 1rem; - } -} +.td-search-wrapper { + position: relative; + background: transparent; + width: 90%; -.td-search-wrapper .fa { + .fa { // Vertically center the content. display: flex; justify-content: center; - align-items:center; + align-items: center; height: 100%; // Position this on the left of the input. @@ -41,26 +18,55 @@ // Click-through to the underlying input. pointer-events: none; -} + } -// Hide the icon on focus. -.td-search-wrapper:focus-within .fa { - display: none; -} + .td-search-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; + } + + } + + &:focus-within { + // Hide icon on focus + + .fa { + display: none; + } + + .td-search-input { + text-indent: 0px; + } + } + + &:not(:focus-within) { + color: $input-placeholder-color; + } -.td-search-wrapper:focus-within .td-search-input { - text-indent: 0px; } .popover.offline-search-result { - // Override bootstrap default style (max-width: $popover-max-width;) - max-width: 90%; + // Override bootstrap default style (max-width: $popover-max-width;) + max-width: 90%; - .card { - margin-bottom: $spacer * .5; + .card { + margin-bottom: $spacer * .5; - .card-header { - font-weight: bold; - } + .card-header { + font-weight: bold; } -} + } +} \ No newline at end of file diff --git a/layouts/partials/search-input.html b/layouts/partials/search-input.html index 86eb0c1706..6c4289c2e7 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 -}}
From 4a24530eb246b811299fa41716f27fad4d8e5c5c Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Thu, 13 Oct 2022 05:44:01 -0400 Subject: [PATCH 2/4] Follow BEM for search classes --- assets/js/offline-search.js | 2 +- assets/js/search.js | 2 +- assets/scss/_nav.scss | 13 +--------- assets/scss/_search.scss | 40 ++++++++++++++++++++++++------ layouts/partials/search-input.html | 12 +++++---- 5 files changed, 42 insertions(+), 27 deletions(-) diff --git a/assets/js/offline-search.js b/assets/js/offline-search.js index 55e8a81caf..2c0bba3b43 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 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 0679348d44..3fcc30861e 100644 --- a/assets/scss/_search.scss +++ b/assets/scss/_search.scss @@ -1,14 +1,14 @@ // Search -.td-search-wrapper { - position: relative; +.td-search { background: transparent; + position: relative; width: 90%; - .fa { + // Search icon + &__icon { // Vertically center the content. display: flex; - justify-content: center; align-items: center; height: 100%; @@ -18,9 +18,22 @@ // Click-through to the underlying input. pointer-events: none; + + &:before { + @extend .fa; + content: fa-content($fa-var-search); + } + + // Styling adjustments for the navbar + @at-root { + .td-navbar & { + color: $navbar-dark-color; + } + } } - .td-search-input { + // Search input element + &__input { width: 100%; text-indent: 1.25em; @@ -38,12 +51,24 @@ color: inherit; } + // Styling adjustments for the navbar + @at-root { + .td-navbar & { + border: none; + color: $navbar-dark-color; + + @include placeholder { + color: $navbar-dark-color; + } + } + } + } + // Hide icon on focus &:focus-within { - // Hide icon on focus - .fa { + .td-search__icon { display: none; } @@ -55,7 +80,6 @@ &:not(:focus-within) { color: $input-placeholder-color; } - } .popover.offline-search-result { diff --git a/layouts/partials/search-input.html b/layouts/partials/search-input.html index 6c4289c2e7..d97f4230ef 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,10 +13,11 @@ {{ end -}} {{ $offlineSearchLink := $offlineSearchIndex.RelPermalink -}} +
+
{{ end -}} From 7f8a840102aba812cb2277445c1f85d0127f722c Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Thu, 13 Oct 2022 06:33:56 -0400 Subject: [PATCH 3/4] Fix offline search --- assets/js/offline-search.js | 11 ++---- assets/scss/_search.scss | 27 ++++++++++++-- layouts/partials/search-input.html | 37 ++++++++++--------- .../en/docs/adding-content/navigation.md | 6 +-- 4 files changed, 49 insertions(+), 32 deletions(-) diff --git a/assets/js/offline-search.js b/assets/js/offline-search.js index 2c0bba3b43..ecaa1f36ee 100644 --- a/assets/js/offline-search.js +++ b/assets/js/offline-search.js @@ -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/scss/_search.scss b/assets/scss/_search.scss index 3fcc30861e..1b98fc96a1 100644 --- 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; } } -} \ No newline at end of file + + &__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 d97f4230ef..feb1e74460 100644 --- a/layouts/partials/search-input.html +++ b/layouts/partials/search-input.html @@ -13,23 +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; } ``` From 1151dbaa44ba1c44bf519e79f396dee90e43b669 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Thu, 13 Oct 2022 06:49:54 -0400 Subject: [PATCH 4/4] Add an entry to the changelog --- CHANGELOG.md | 5 +- assets/scss/_search.scss | 171 ++++++++++++++++++++------------------- 2 files changed, 90 insertions(+), 86 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/scss/_search.scss b/assets/scss/_search.scss index 1b98fc96a1..481ec5ddb6 100644 --- a/assets/scss/_search.scss +++ b/assets/scss/_search.scss @@ -1,117 +1,120 @@ // Search .td-search { - background: transparent; - position: relative; - width: 90%; - - // Search icon - &__icon { - // Vertically center the content. - display: flex; - align-items: center; - height: 100%; - - // Position this on the left of the input. - position: absolute; - left: 0.75em; - - // Click-through to the underlying input. - pointer-events: none; - - &:before { - @extend .fa; - content: fa-content($fa-var-search); - } + background: transparent; + position: relative; + width: 90%; + + // Search icon + &__icon { + // Vertically center the content. + display: flex; + align-items: center; + height: 100%; + + // Position this on the left of the input. + position: absolute; + left: 0.75em; + + // Click-through to the underlying input. + pointer-events: none; + + &:before { + @extend .fa; + content: fa-content($fa-var-search); + } - // Styling adjustments for the navbar - @at-root { - .td-navbar & { - color: $navbar-dark-color; - } + // Styling adjustments for the navbar + @at-root { + .td-navbar & { + color: $navbar-dark-color; + } + } } - } - // Search input element - &__input { - width: 100%; - text-indent: 1.25em; + // Search input element + &__input { + width: 100%; + text-indent: 1.25em; - @if $enable-rounded { - border-radius: 1rem; - } + @if $enable-rounded { + border-radius: 1rem; + } - &:not(:focus) { - background: transparent; - } + &:not(:focus) { + background: transparent; + } - &.form-control:focus { - border-color: lighten($primary, 60%); - box-shadow: 0 0 0 2px lighten($primary, 30%); - color: inherit; - } + &.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; + // Styling adjustments for the navbar + @at-root { + .td-navbar & { + border: none; + color: $navbar-dark-color; - @include placeholder { - color: $navbar-dark-color; + @include placeholder { + color: $navbar-dark-color; + } + } } - } + } - } + // Hide icon on focus + &:focus-within { - // Hide icon on focus - &:focus-within { + .td-search__icon { + display: none; + } - .td-search__icon { - display: none; + .td-search-input { + text-indent: 0px; + } } - .td-search-input { - text-indent: 0px; + &:not(:focus-within) { + color: $input-placeholder-color; } - } - - &:not(:focus-within) { - color: $input-placeholder-color; - } } // 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; + + &: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%; + max-width: 90%; - .card { - margin-bottom: $spacer * .5; + .card { + margin-bottom: $spacer * .5; - .card-header { - font-weight: bold; + .card-header { + font-weight: bold; + } } - } - - &__close-button { - // cursor: pointer; - float: right; - &:after { - @extend .fas; - content: fa-content($fa-var-times); + + &__close-button { + // cursor: pointer; + float: right; + + &:after { + @extend .fas; + content: fa-content($fa-var-times); + } } - } }