From 0193a2a335b37d4f26983fbb150cc3fab2c63c21 Mon Sep 17 00:00:00 2001 From: Achilleas Pipinellis Date: Fri, 28 Aug 2020 16:29:19 +0000 Subject: Merge branch '715-update-instantsearch-to-4.7.1' into 'master' Update instantsearch.js from 2.5.0 to 4.7.1 Closes #715 See merge request gitlab-org/gitlab-docs!1096 (cherry picked from commit 7ac4cb2124c84c7a423cd8e825f9591a5be5648d) 11720c24 Update instantsearch.js from 2.5.0 to 4.7.1 --- content/assets/javascripts/instantsearch.js | 64 ++++++++-------- content/assets/stylesheets/instantsearch.scss | 101 +++++++++----------------- content/search/index.md | 6 +- layouts/instantsearch-head.html | 6 +- 4 files changed, 70 insertions(+), 107 deletions(-) diff --git a/content/assets/javascripts/instantsearch.js b/content/assets/javascripts/instantsearch.js index 8e3c8578..7d457482 100644 --- a/content/assets/javascripts/instantsearch.js +++ b/content/assets/javascripts/instantsearch.js @@ -1,19 +1,16 @@ --- -version: 1 +version: 2 --- - const search = instantsearch({ - appId: 'BH4D9OD16A', - apiKey: 'ce1690e1421303458a1fcbea0cc4a927', indexName: 'gitlab', + searchClient: algoliasearch('BH4D9OD16A', 'ce1690e1421303458a1fcbea0cc4a927'), algoliaOptions: { // Filter by tags as described in https://github.com/algolia/docsearch-configs/blob/master/configs/gitlab.json 'filters': "tags:gitlab OR tags:omnibus OR tags:runner", - // Number of results shown in the search dropdown - 'hitsPerPage': 10, }, - loadingIndicator: true, - urlSync: true, + routing: { + stateMapping: instantsearch.stateMappings.singleIndexQ('gitlab') + }, searchFunction: function(helper) { var searchResults = $('.search-results'); if (helper.state.query === '') { @@ -25,26 +22,27 @@ const search = instantsearch({ } }); -search.addWidget( +search.addWidgets([ instantsearch.widgets.searchBox({ - container: '#search-input', - reset: true, - poweredBy: true - }) -); + container: '#searchbox', + placeholder: 'Search GitLab Documentation', + showReset: true, + showLoadingIndicator: true + }), + + instantsearch.widgets.poweredBy({ + container: '#powered-by', + }), -search.addWidget( - instantsearch.widgets.refinementList({ - container: '#refinement-list', - attributeName: 'tags', - sortBy: ["name:asc","isRefined"], - templates: { - header: 'Refine your search:' - } - }) - ); + instantsearch.widgets.refinementList({ + container: '#refinement-list', + attribute: 'tags', + sortBy: ["name:asc","isRefined"], + templates: { + header: 'Refine your search:' + } + }), -search.addWidget( instantsearch.widgets.infiniteHits({ container: '#hits', templates: { @@ -53,16 +51,16 @@ search.addWidget( }, escapeHits: true, showMoreLabel: "Load more results..." - }) -); + }), -search.addWidget( instantsearch.widgets.stats({ - container: '#stats', - templates: { - body: '
We found {{nbHits}} results, fetched in {{processingTimeMS}}ms.
' - } + container: '#stats' + }), + + instantsearch.widgets.configure({ + // Number of results shown in the search dropdown + 'hitsPerPage': 10, }) -); +]); search.start(); diff --git a/content/assets/stylesheets/instantsearch.scss b/content/assets/stylesheets/instantsearch.scss index bbbbde7a..82c867af 100644 --- a/content/assets/stylesheets/instantsearch.scss +++ b/content/assets/stylesheets/instantsearch.scss @@ -1,5 +1,5 @@ --- -version: 10 +version: 11 --- @import "variables"; @@ -24,11 +24,12 @@ $color11: transparent; $color12: rgba(32, 139, 196, .2); //link color lighter -//scss-lint:disable ImportantRule -.ais-search-box { +//scss-lint:disable ImportantRule SelectorFormat +.ais-SearchBox { width: 100%; max-width: 100% !important; // was 300px } +//scss-lint:enable ImportantRule SelectorFormat .search-input { border-radius: 2px; @@ -38,34 +39,20 @@ $color12: rgba(32, 139, 196, .2); //link color lighter padding-bottom: 7px; } -.ais-stats { - display: block; - float: left; - margin-top: -26px !important; - - @media all and (max-width: $mobile-width) { - margin-top: -25px !important; - } -} - -.ais-search-box--powered-by { +//scss-lint:disable SelectorFormat +.ais-PoweredBy { font-family: $sans-font-family; font-size: $body-font-size; -} -.ais-search-box--magnifier, -.ais-search-box--reset { - display: block; - top: 35% !important; - bottom: auto; - right: 10px !important; - width: 14px; + svg { + display: inline; + } } +//scss-lint:enable SelectorFormat .hit-content { - display: block; - border-top: 2px solid $color0; - padding: 30px 5px; + border-top: 1px solid $color0; + padding: 1rem .5rem; margin: 0; font-size: 13px; font-weight: 300; @@ -76,8 +63,7 @@ $color12: rgba(32, 139, 196, .2); //link color lighter word-wrap: break-word; &:hover { - border-top: 2px solid $color12; - box-shadow: 0 10px 6px -6px $color12; + background-color: $color12; .hit-tag { color: $link-color; @@ -85,17 +71,15 @@ $color12: rgba(32, 139, 196, .2); //link color lighter } } - @media all and (max-width: $mobile-width) { - padding: 25px 5px; - } - .lvl0 { color: $black; } + //scss-lint:disable ImportantRule .lvl1 { font-size: 18px !important; } + //scss-lint:enable ImportantRule .lvl2 { font-size: 14px; @@ -156,22 +140,13 @@ $color12: rgba(32, 139, 196, .2); //link color lighter } } } -//scss-lint:enable ImportantRule //scss-lint:disable IdSelector #hits { - border-top: 0; - margin: 4px 0; - padding: 10px 0; - > h1, h2, h3, h4, h5, h6 { border: 0; } } - -#refinement-list { - margin-top: 15px; -} //scss-lint:enable IdSelector //overrides padding for the searchbox @@ -187,46 +162,38 @@ $color12: rgba(32, 139, 196, .2); //link color lighter background-color: $color3; } -.ais-infinite-hits--showmore { - display: block; - margin: 10px auto auto; - - button { - padding: 20px 10px; - cursor: pointer; +//scss-lint:disable SelectorFormat +.ais-InfiniteHits { + .ais-InfiniteHits-item { width: 100%; - background-color: $color8; - border-color: $color3; - border-right: 0; - border-left: 0; - - &:hover { - background-color: $color3; - } - - &:focus { - outline: none; - } + margin: 0; + padding: 0; + border: 0; + box-shadow: none; } } -.stats { +.ais-InfiniteHits-loadMore { display: block; - text-align: right; - font-size: 11px; - color: $body-color; + width: 100%; + margin: 1rem .5rem; - @media all and (max-width: $mobile-width) { - font-size: 10px; + &:focus { + outline: none; } } -.ais-refinement-list--item { +.ais-Stats-text { + color: $body-color; +} + +.ais-RefinementList-item { display: inline-block; padding-right: 10px; } -.ais-refinement-list--label { +.ais-RefinementList-label { text-transform: uppercase; color: $link-color; } +//scss-lint:enable SelectorFormat diff --git a/content/search/index.md b/content/search/index.md index e18386ae..a827c53e 100644 --- a/content/search/index.md +++ b/content/search/index.md @@ -3,10 +3,8 @@ title: Search through GitLab Documentation layout: instantsearch ---
-
- - -
+ +
diff --git a/layouts/instantsearch-head.html b/layouts/instantsearch-head.html index e92ad6f5..f0ed5c1d 100644 --- a/layouts/instantsearch-head.html +++ b/layouts/instantsearch-head.html @@ -1,6 +1,6 @@ - - - + + + -- cgit v1.2.3