nikon/docsearch
1
0
Fork 0
Code Activity Actions

Merge pull request #76 from algolia/fix/docsearch

Browse source 
doc(search): fixed docsearch alignment + API key
This commit is contained in:
Sylvain Utard 2016-03-07 22:40:03 +01:00
commit be259f486c
6 changed files with 238 additions and 43 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

10
docs/_layouts/default.html
View file

@ -35,12 +35,11 @@
<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 }}" />
<link rel="stylesheet" media="screen" href="//cdn.jsdelivr.net/fontawesome/4.4.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
</head>
<body>
@ -64,9 +63,12 @@
<script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
<script type="text/javascript">
docsearch({
apiKey: 'd8dd0c4677c82b0164e6ac02d4807ba5',
apiKey: '25626fae796133dc1e734c6bcaaeac3c',
indexName: 'docsearch',
inputSelector: '.sbx-custom__input'
inputSelector: '.sbx-custom__input',
autocompleteOptions: {
debug: false
}
});
</script>

187
docs/css/_docsearch.scss Normal file
View file

File diff suppressed because one or more lines are too long

51
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;
}
}
@ -185,13 +186,3 @@ $custom:(
.algolia-autocomplete {
display: inline !important;
}
.aa-dropdown-menu.aa-with-0 {
top: 31px !important;
}
@media (min-width: 768px) {
.aa-dropdown-menu {
min-width: 530px !important;
}
}

1
docs/css/main.scss
View file

@ -12,3 +12,4 @@
@import "home";
@import "page";
@import "searchbar";
@import "docsearch";

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/