From 71c36eba1cae4d3512beb3d77d53a207526bd13b Mon Sep 17 00:00:00 2001 From: Sylvain UTARD Date: Fri, 4 Mar 2016 21:02:08 +0100 Subject: [PATCH 1/3] doc(search): fixed docsearch alignment + API key --- docs/_layouts/default.html | 2 +- docs/css/_searchbar.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 3736763b..741dfd97 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -64,7 +64,7 @@ \ No newline at end of file + diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index f6fd2da1..0bdb964e 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -35,7 +35,7 @@ - + @@ -65,7 +65,10 @@ docsearch({ apiKey: '25626fae796133dc1e734c6bcaaeac3c', indexName: 'docsearch', - inputSelector: '.sbx-custom__input' + inputSelector: '.sbx-custom__input', + autocompleteOptions: { + debug: false + } }); diff --git a/docs/css/_docsearch.scss b/docs/css/_docsearch.scss index f51d9c9b..97fff440 100644 --- a/docs/css/_docsearch.scss +++ b/docs/css/_docsearch.scss @@ -1,12 +1,12 @@ -$color-border: #3A3A3A; +$color-border: #EEE; $color-border-light: lighten($color-border, 15%); -$color-category-header-background: #3C4658; +$color-category-header-background: white; $color-highlight-header-background: lighten($color-category-header-background, 15%); $color-highlight-text: #0064E1; -$color-selected-background: #E7EDF3; -$color-selected-text: #0064E1; -$color-left-column-bg: #F1F3F5; -$color-left-column: #555; +$color-selected-background: rgba(#40ADDC,.07); +$color-selected-text: black; +$color-left-column-bg: white; +$color-left-column: #aaa; $breakpoint-medium: 568px; $breakpoint-large: 768px; @@ -41,11 +41,13 @@ $dropdown-min-width-large: 600px; // Main category headers .algolia-docsearch-suggestion--category-header { display: none; - background: $color-category-header-background; - color: white; + border-bottom: solid 1px #ccc; + color: #40ADDC; font-weight: 600; - padding: 5px 10px; + padding: 5px 15px; text-align: left; + font-size: 1.1em; + background-color: white; // Only show it when flaggued as "__main" .algolia-docsearch-suggestion__main & { display: block; @@ -55,9 +57,9 @@ $dropdown-min-width-large: 600px; // Highlight .algolia-docsearch-suggestion--highlight { padding: 0; - color: $color-highlight-text; - background: none; - font-weight: 600; + color: #40ADDC; + padding: 0 2px; + background: rgba(#40ADDC,.1); // Highlight the background in header .algolia-docsearch-suggestion--category-header & { color: inherit; @@ -86,9 +88,8 @@ $dropdown-min-width-large: 600px; .algolia-docsearch-suggestion--content { padding: 3px 5px; width: 100%; - border-top: 1px solid lighten($color-border, 60%); } - + .algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--content, .algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--content { border-top: 0; @@ -96,17 +97,17 @@ $dropdown-min-width-large: 600px; .algolia-docsearch-suggestion--subcategory-inline { display: inline-block; - font-weight: bold; + font-weight: 400; &:after { content: " › "; } } .algolia-docsearch-suggestion--title { display: inline; + font-weight: 600; } // Footer - .algolia-docsearch-footer { border-top: 1px solid $color-border-light; text-align: right; @@ -128,70 +129,59 @@ $dropdown-min-width-large: 600px; } } -// BREAKPOINT 1: -// Screen is big enough to display the text snippets -@media (min-width: $breakpoint-medium) { - .aa-dropdown-menu { - min-width: $dropdown-min-width-medium; - } - .algolia-docsearch-suggestion--text { - display: block; - font-size: .9em; - padding: 2px 0; - } +.aa-dropdown-menu { + min-width: $dropdown-min-width-large; +} +.algolia-docsearch-suggestion { + display: table; + width: 100%; } -// BREAKPOINT 2: -// Screen is big enough to display results in two columns -@media (min-width: $breakpoint-large) { - .aa-dropdown-menu { - min-width: $dropdown-min-width-large; - } - .algolia-docsearch-suggestion { - display: table; - width: 100%; - } +.algolia-docsearch-suggestion__secondary { + border-top: 1px solid $color-border-light; +} - .algolia-docsearch-suggestion__secondary { - border-top: 1px solid $color-border-light; - } +.algolia-docsearch-suggestion--subcategory-column { + border-right: 1px solid $color-border-light; + background: transparent; + color: #999; + display: table-cell; + overflow: hidden; + padding: 5px 7px 5px 10px; + text-align: left; + font-size: 0.9em; + font-family: "Open Sans"; + text-overflow: ellipsis; + vertical-align: top; + border-right: 1px solid #ccc; - .algolia-docsearch-suggestion--subcategory-column { - border-right: 1px solid $color-border-light; - background: $color-left-column-bg; - color: $color-left-column; - display: table-cell; - overflow: hidden; - padding: 5px 7px 5px 5px; - text-align: right; - text-overflow: ellipsis; - vertical-align: top; + width: 160px; // Hardcoded + max-width: 160px; // Hardcoded + min-width: 160px; // Hardcoded +} - width: 135px; // Hardcoded - max-width: 135px; // Hardcoded - min-width: 135px; // Hardcoded - } +.algolia-docsearch-suggestion--subcategory-column-text { + display: none; - .algolia-docsearch-suggestion--subcategory-column-text { - display: none; - - .algolia-docsearch-suggestion__secondary & { - display: block; - } - } - .algolia-docsearch-suggestion--content { - display: table-cell; - padding: 5px 10px; - } - .algolia-docsearch-suggestion--subcategory-inline { - display: none; - } - .algolia-docsearch-suggestion--title { - font-weight: 600; - } - .algolia-docsearch-suggestion--text { + .algolia-docsearch-suggestion__secondary & { display: block; - font-weight: normal; - padding: 2px; } } +.algolia-docsearch-suggestion--content { + display: table-cell; + padding: 5px 10px; +} +.algolia-docsearch-suggestion--subcategory-inline { + display: none; +} +.algolia-docsearch-suggestion--text { + display: block; + font-weight: 400; + font-family: "Open Sans"; + font-size: .8em; + padding: 2px; +} + +.algolia-docsearch-suggestion--wrapper { + margin: 10px; +} diff --git a/docs/css/_searchbar.scss b/docs/css/_searchbar.scss index 04dc73f2..e268a5d2 100644 --- a/docs/css/_searchbar.scss +++ b/docs/css/_searchbar.scss @@ -1,22 +1,20 @@ $custom:( - input-width: 240px, - input-height: 36px, - border-width: 2px, - border-radius: 18px, - input-border-color: #1D96C7, - input-focus-border-color: #1D96C7, - input-background: #091724, - input-focus-background: #091724, - font-size: 13px, - placeholder-color: #AAAAAA, - icon: sbx-icon-search-13, - icon-size: 16px, - icon-position: left, - icon-color: #1D96C7, - icon-background: #FFFFFF, - icon-background-opacity: 0, - icon-clear: sbx-icon-clear-2, - icon-clear-size: 12px + input-width: 240px, + input-height: 36px, + border-width: 2px, + border-radius: 18px, + input-border-color: darken(#1D96C7,10%), + input-focus-border-color: #1D96C7, + input-background: #091724, + input-focus-background: #091724, + font-size: 13px, + placeholder-color: #AAAAAA, + icon-size: 16px, + icon-position: left, + icon-color: #1D96C7, + icon-background: #FFFFFF, + icon-background-opacity: 0, + icon-clear-size: 12px ); @mixin searchbox( @@ -130,7 +128,6 @@ $custom:( } &__reset { - display: none; position: absolute; top: ($input-height - $icon-clear-size) / 2 - 4px; right: if($icon-position == 'right', 8px + $input-height, ($input-height - $icon-clear-size) / 2) - 4px; @@ -140,7 +137,10 @@ $custom:( cursor: pointer; padding: 0; user-select: none; - fill: rgba(#000, .5); + + &.hide{ + display: none; + } &:focus { outline: 0; @@ -151,6 +151,7 @@ $custom:( margin: 4px; width: $icon-clear-size; height: $icon-clear-size; + fill: $icon-color; } } diff --git a/docs/documentation.md b/docs/documentation.md index 19eabb44..8a0a3055 100644 --- a/docs/documentation.md +++ b/docs/documentation.md @@ -32,7 +32,10 @@ need to add the following code snippet to your website: docsearch({ apiKey: '', indexName: '', - inputSelector: '' + inputSelector: '', + autocompleteOptions: { + debug: false + } }); ``` @@ -93,7 +96,7 @@ If you want to do heavily change the way results are displayed, you might find it easier to directly edit the `scss` files in this repository. [`_variables.scss`][18] -contains all the color, breakpoints and size definitions while +contains all the color, breakpoints and size definitions while [`_main.scss`][19] holds the structure of the display. @@ -113,7 +116,7 @@ results from the Algolia API. As such, you can use any options provided by You can pass any options to the underlying `autocomplete` instance through the`autocompleteOptions` parameter. You will find all `autocomplete` options in -its [own documentation][22]. +its [own documentation][22]. You can also listen to `autocomplete` events through the `.autocomplete` property of the `docsearch` instance. @@ -175,7 +178,7 @@ You will find all Algolia API options in its [own documentation][23] [16]: https://community.algolia.com/docsearch/ [17]: https://community.algolia.com/docsearch/img/default-colorscheme.png [18]: https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss -[19]: https://github.com/algolia/docsearch/blob/master/src/styles/_main.scss +[19]: https://github.com/algolia/docsearch/blob/master/src/styles/main.scss [20]: https://github.com/algolia/autocomplete.js [21]: https://github.com/algolia/autocomplete.js [22]: https://github.com/algolia/autocomplete.js#options @@ -184,4 +187,3 @@ You will find all Algolia API options in its [own documentation][23] [25]: https://jekyllrb.com/ [26]: https://www.ruby-lang.org/en/ [27]: http://bundler.io/ -