nikon/docsearch
1
0
Fork 0
Code Activity Actions

docs(search): here and there CSS & JS issues

Browse source
This commit is contained in:
Shipow 2016-03-05 02:49:14 +01:00 committed by Sylvain UTARD
parent 91856d8cdf
commit e6c0b25f7a
5 changed files with 113 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
docs/_includes/searchbar.html
View file

@ -9,14 +9,14 @@
</svg>
<form role="search" novalidate="novalidate" class="searchbox sbx-custom">
<input type="search" name="search" placeholder="Search in the documentation" autocomplete="off" required="required" class="sbx-custom__input">
<input onkeyup="updateReset()" type="search" name="search" placeholder="Search in the documentation" autocomplete="off" required="required" class="sbx-custom__input">
<button type="submit" class="sbx-custom__submit">
<svg role="img" aria-label="Search">
<title>Icon Search</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
</svg>
</button>
<button type="reset" class="sbx-custom__reset">
<button type="reset" class="sbx-custom__reset hide">
<svg role="img" aria-label="Reset">
<title>Icon Reset</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-2"></use>
@ -27,8 +27,20 @@
<script type="text/javascript">
//<![CDATA[
document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {
this.parentNode.querySelector('input').focus();
document.querySelector('.aa-input').focus();
this.className += " hide";
});
function updateReset() {
var searchbox = document.querySelector('.aa-input');
var reset = document.querySelector('.searchbox [type="reset"]');
reset.className = "";
reset.className = "sbx-custom__reset";
if (searchbox.value.length === 0){
reset.className += " hide";
}
}
//]]>
</script>
</script>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

7
docs/_layouts/default.html
View file

@ -35,7 +35,7 @@
<link rel="icon" href="{{ "/img/favicon.png" | prepend: site.baseurl }}">
<!-- Fonts -->
<link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Raleway:300,800" />
<link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Raleway:300,600" />
<link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600" />
<link rel="stylesheet" media="screen" href="{{ "/css/main.css" | prepend: site.baseurl }}" />
@ -65,7 +65,10 @@
docsearch({
apiKey: '25626fae796133dc1e734c6bcaaeac3c',
indexName: 'docsearch',
inputSelector: '.sbx-custom__input'
inputSelector: '.sbx-custom__input',
autocompleteOptions: {
debug: false
}
});
</script>

138
docs/css/_docsearch.scss
View file

@ -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;
}

41
docs/css/_searchbar.scss
View file

@ -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;
}
}

12
docs/documentation.md
View file

@ -32,7 +32,10 @@ need to add the following code snippet to your website:
docsearch({
apiKey: '<API_KEY>',
indexName: '<INDEX_NAME>',
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>'
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
autocompleteOptions: {
debug: false
}
});
</script>
```
@ -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/