docs(docsearch): adding docsearch to docsearch
This commit is contained in:
Maxime Locqueville
parent
04c096fe19
commit
eb05740a4d
5 changed files with 249 additions and 0 deletions
|
|
@ -10,6 +10,13 @@
|
|||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="searchbar-wrapper">
|
||||
<div class="navbar-form">
|
||||
<div class="form-group">
|
||||
{% include searchbar.html %}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% assign url = page.url %}
|
||||
{% for link in site.navigation %}
|
||||
<li {% if url == link.url %}class="active"{% endif %}>
|
||||
|
|
|
|||
34
docs/_includes/searchbar.html
Normal file
34
docs/_includes/searchbar.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
|
||||
<symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-13" viewBox="0 0 40 40">
|
||||
<path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
|
||||
fill-rule="evenodd" />
|
||||
</symbol>
|
||||
<symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-2" viewBox="0 0 20 20">
|
||||
<path d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z" fill-rule="evenodd" />
|
||||
</symbol>
|
||||
</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">
|
||||
<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">
|
||||
<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>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
<!--Js: focus search input after reset-->
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {
|
||||
this.parentNode.querySelector('input').focus();
|
||||
});
|
||||
|
||||
//]]>
|
||||
</script>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -40,6 +40,7 @@
|
|||
|
||||
<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>
|
||||
|
|
@ -60,6 +61,15 @@
|
|||
</script>
|
||||
{% endif %}
|
||||
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
docsearch({
|
||||
apiKey: 'd8dd0c4677c82b0164e6ac02d4807ba5',
|
||||
indexName: 'docsearch',
|
||||
inputSelector: '.sbx-custom__input'
|
||||
});
|
||||
</script>
|
||||
|
||||
{% include marketing.html %}
|
||||
|
||||
{% contentblock site-footer %}
|
||||
|
|
|
|||
197
docs/css/_searchbar.scss
Normal file
197
docs/css/_searchbar.scss
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
$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
|
||||
);
|
||||
|
||||
@mixin searchbox(
|
||||
$input-width: 500px,
|
||||
$input-height: 40px,
|
||||
$border-width: 1px,
|
||||
$border-radius: 3px,
|
||||
$input-border-color: #ccc,
|
||||
$input-focus-border-color: darken($input-border-color, 15%),
|
||||
$input-background: #fff,
|
||||
$input-focus-background: $input-background,
|
||||
$font-size: 14px,
|
||||
$placeholder-color: #aaa,
|
||||
$icon: 'sbx-icon-search-1',
|
||||
$icon-size: 18px,
|
||||
$icon-position: right,
|
||||
$icon-color: #fff,
|
||||
$icon-background: #3e82f7,
|
||||
$icon-background-opacity: 1,
|
||||
$icon-clear: 'sbx-icon-clear-1',
|
||||
$icon-clear-size: 12px
|
||||
) {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: $input-width;
|
||||
height: $input-height;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__input {
|
||||
display: inline-block;
|
||||
transition: box-shadow .4s ease, background .4s ease, padding .4s ease;
|
||||
border: 0;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: inset 0 0 0 $border-width $input-border-color;
|
||||
background: $input-background;
|
||||
padding: 0;
|
||||
padding-right: if($icon-position == 'right', $input-height, 0) + $icon-clear-size * 2 + 8px;
|
||||
padding-left: if($icon-position == 'right', $font-size, $input-height + if($icon-background-opacity == 0, 0, 8px));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
font-size: $font-size;
|
||||
appearance: none;
|
||||
color: white;
|
||||
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-results-button,
|
||||
&::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 $border-width darken($input-border-color, 10%);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 $border-width $input-focus-border-color;
|
||||
background: $input-focus-background;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $placeholder-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__submit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$icon-position}: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: if($icon-position == 'right', 0 $border-radius $border-radius 0, $border-radius 0 0 $border-radius);
|
||||
background-color: rgba($icon-background, $icon-background-opacity);
|
||||
padding: 0;
|
||||
width: $input-height;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
|
||||
// Helper for vertical alignement of the icon
|
||||
&::before {
|
||||
display: inline-block;
|
||||
margin-right: -4px;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
vertical-align: middle;
|
||||
fill: $icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
fill: rgba(#000, .5);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
margin: 4px;
|
||||
width: $icon-clear-size;
|
||||
height: $icon-clear-size;
|
||||
}
|
||||
}
|
||||
|
||||
&__input:valid ~ &__reset {
|
||||
display: block;
|
||||
animation-name: sbx-reset-in;
|
||||
animation-duration: .15s;
|
||||
}
|
||||
|
||||
@keyframes sbx-reset-in {
|
||||
from {
|
||||
transform: translate3d(-20%, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sbx-custom{
|
||||
@include searchbox($custom...);
|
||||
}
|
||||
|
||||
.site-header .navbar .navbar-nav > li.searchbar-wrapper {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,3 +11,4 @@
|
|||
|
||||
@import "home";
|
||||
@import "page";
|
||||
@import "searchbar";
|
||||
|
|
|
|||
Loading…
Reference in a new issue