diff options
author | Achilleas Pipinellis <axil@gitlab.com> | 2018-03-23 20:06:50 +0300 |
---|---|---|
committer | Achilleas Pipinellis <axil@gitlab.com> | 2018-03-23 20:06:50 +0300 |
commit | 9f897d17acfc978234767aaa595dee0ca05004e5 (patch) | |
tree | ea353ccfddb4b861c2d30e8d7af79ab0b6e624ad | |
parent | 4c500060eb96e05a8ec3056c02d04b00b3fd8dcf (diff) | |
parent | 0097acab72403409aa96fea24dbe9718079e7a5b (diff) |
Merge branch 'improve-site-search' into 'master'
Improve site search (update results template according to new index)
Closes #174
See merge request gitlab-com/gitlab-docs!219
-rw-r--r-- | content/assets/stylesheets/_variables.scss | 8 | ||||
-rw-r--r-- | content/assets/stylesheets/instantsearch.scss | 50 | ||||
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 2 | ||||
-rw-r--r-- | content/search/index.md | 9 | ||||
-rw-r--r-- | layouts/instantsearch.html | 1 |
5 files changed, 58 insertions, 12 deletions
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss index eadf5562..c59ebb70 100644 --- a/content/assets/stylesheets/_variables.scss +++ b/content/assets/stylesheets/_variables.scss @@ -49,6 +49,11 @@ $main-box-shadow: rgba(0, 0, 0, .1); $white: #fff; $black: #333; +// tanuki +$color-tanuki-dark: rgb(226, 67, 41); +$color-tanuki-medium: rgb(252, 109, 38); +$color-tanuki-light: rgb(252, 163, 38); + // Footer variables $color-white: #fff; @@ -77,9 +82,6 @@ $color-primary-medium: #503991; $divider-color: #d3d3d3; -$link-color: #55acee; -$link-code-color: rgb(55, 119, 176); - $border-color: #dfdfdf; $header-text-light-color: #a69ebd; diff --git a/content/assets/stylesheets/instantsearch.scss b/content/assets/stylesheets/instantsearch.scss index c75e38a6..1cd92d9c 100644 --- a/content/assets/stylesheets/instantsearch.scss +++ b/content/assets/stylesheets/instantsearch.scss @@ -1,7 +1,9 @@ --- -version: 2 +version: 3 --- +@import "variables"; + // original CSS: https://github.com/algolia/examples/blob/master/instant-search/instantsearch.js/assets/style.css // original CSS customized and converted to SCSS with http://sebastianpontow.de/css2compass/ @@ -16,6 +18,7 @@ $color6: #999; $color7: #868686; $color8: #fff; $color9: #383838; +$color10: rgb(117, 117, 117); //scss-lint:disable ImportantRule .ais-search-box { @@ -44,10 +47,31 @@ $color9: #383838; font-weight: 300; width: 100%; // was 81% position: relative; + color: $color10; &:hover { border-color: $color1; box-shadow: 1px 1px 3px $color2; + + .lvl0, + .lvl1, + .lvl2, + .hit-text { + color: $link-color-hover; + } + } + + .lvl0 { + color: $black; + } + + .lvl1 { + font-size: 18px !important; + } + + .lvl2 { + font-size: 14px; + color: $color7; } .hit-name { @@ -65,9 +89,7 @@ $color9: #383838; } .hit-description { - color: $color7; margin: 1px 0 10px; - font-size: 14px; } .hit-tag { @@ -80,12 +102,31 @@ $color9: #383838; border-bottom-left-radius: 5px; right: 0; top: 0; - width: 90px; + width: 70px; height: 25px; font-size: 11px; + font-weight: 500; text-align: center; + text-transform: uppercase; color: $color6; } + + .hit-text { + font-size: inherit; + color: $link-color; + } + + @media all and (max-width: $mobile-width) { + .hit-tag { + width: 60px; + height: 20px; + font-size: 10px; + } + + .lvl0 { + padding-top: 5px; + } + } } //scss-lint:enable ImportantRule @@ -145,4 +186,5 @@ $color9: #383838; .ais-refinement-list--label { text-transform: uppercase; + color: $link-color; } diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index 0c42b313..2108f475 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -1,5 +1,5 @@ --- -version: 27 +version: 28 --- @import "variables"; diff --git a/content/search/index.md b/content/search/index.md index 26d49c65..e18386ae 100644 --- a/content/search/index.md +++ b/content/search/index.md @@ -16,10 +16,11 @@ layout: instantsearch <script type="text/html" id="hit-template"> <a href="{{ url }}" class="hit"> <div class="hit-content"> - <h3 class="hit-name">{{{_highlightResult.hierarchy.lvl1.value}}}</h3> - <h4 class="hit-description">{{{_highlightResult.hierarchy.lvl2.value}}}</h4> - <p class="hit-text">{{{_highlightResult.content.value}}}</p> - <div class="hit-tag">{{{_highlightResult.hierarchy.lvl0.value}}}</div> + <h3 class="hit-name lvl0">{{{_highlightResult.hierarchy.lvl0.value}}}</h3> + <h4 class="hit-description lvl1">{{{_highlightResult.hierarchy.lvl1.value}}}</h4> + <h5 class="hit-description lvl2">{{{_highlightResult.hierarchy.lvl2.value}}}</h5> + <div class="hit-text">{{{_highlightResult.content.value}}}</div> + <div class="hit-tag">{{ tags }}</div> </div> </a> </script> diff --git a/layouts/instantsearch.html b/layouts/instantsearch.html index 58da4541..58c7a304 100644 --- a/layouts/instantsearch.html +++ b/layouts/instantsearch.html @@ -50,6 +50,7 @@ instantsearch.widgets.refinementList({ container: '#refinement-list', attributeName: 'tags', + sortBy: ["name:asc","isRefined"], templates: { header: 'Refine your search:' } |