jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-19 07:17:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add search powered by Algolia

Browse Source
This commit is contained in:
Paulus Schoutsen 2017-06-22 00:17:49 -07:00
parent e553a58e6c
commit 6bc3041fe2
7 changed files with 84 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
sass/custom/_paulus.scss
View File

@ -1,5 +1,47 @@
@charset "UTF-8";
$primary-color: #049cdb;
.site-header {
position: relative;
}
.search-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
padding-top: 19px;
padding-right: 15%;
.search {
max-width: 500px;
width: 100%;
border-bottom: 2px solid $primary-color;
float: right;
.algolia-autocomplete {
width: calc(100% - 58px);
margin: 0 10px;
}
input {
border: 0;
width: 100%;
}
}
}
@media only screen and (max-width: $menu-collapse) {
.search-container {
z-index: 20;
padding-right: 5px;
padding-left: 5px;
}
}
.hero {
background-color: #038FC7;
padding-bottom: 0;

12
sass/oscailte/base/_navigation.scss
View File

@ -81,17 +81,23 @@ header .grid {
font-weight: normal;
font-size: 14px;
line-height: 1;
&.show-search {
padding-left: 0;
padding-right: 0;
}
}
.menu > li > a:hover, .menu > li > a:focus{
background: $site-background;
box-shadow: inset 0px 5px $navigation-color;
color: $navigation-color;
padding: 40px 12px 24px;
padding-top: 40px;
padding-bottom: 24px;
}
.toggle{
z-index: 20;
.toggle{
z-index: 20;
}
@media only screen and (max-width: $menu-collapse){

8
source/_includes/custom/header.html
View File

@ -9,4 +9,12 @@
<nav>
{% include site/navigation.html %}
</nav>
<div class='search-container' style='display: none'>
<div class='search'>
<i class="icon-search"></i>
<input id='search' placeholder='Search the docs…'>
<a href='#' class='close'><i class="icon-remove-sign"></i></a>
</div>
</div>
</div>

1
source/_includes/custom/navigation.html
View File

@ -16,4 +16,5 @@
<li><a href="/developers/">Developers</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/help/">Need help?</a></li>
<li><a href='#' class='show-search'><i class="icon-search"></i></a></li>
</ul>

20
source/_includes/javascripts/algolia.html Normal file
View File

@ -0,0 +1,20 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script type="text/javascript">
docsearch({
apiKey: 'ae96d94b201c5444c8a443093edf3efb',
indexName: 'home-assistant',
inputSelector: '#search',
debug: false // Set debug to true if you want to inspect the dropdown
});
document.querySelector('.search .close').addEventListener('click', function(ev) {
ev.preventDefault();
document.querySelector('.search-container').style.display = 'none';
});
document.querySelector('.show-search').addEventListener('click', function(ev) {
ev.preventDefault();
document.querySelector('.search-container').style.display = 'block';
document.getElementById('toggle').checked = false;
document.querySelector('.search-container input').focus();
});
</script>

3
source/_includes/javascripts/scripts.html
View File

@ -5,8 +5,9 @@
{% include javascripts/google_analytics.html %}
{% include javascripts/disqus.html %}
{% include javascripts/algolia.html %}
{% if page.sidebar != false %}
{% include javascripts/github.html %}
{% include javascripts/delicious.html %}
{% endif %}
{% endif %}

4
source/_layouts/default.html
View File

@ -6,7 +6,7 @@ layout: compress
<body {% if page.body_id %} id="{{ page.body_id }}"{% endif %}>
<header>
<header class='site-header'>
{% include site/header.html %}
</header>
@ -42,4 +42,4 @@ layout: compress
{% include javascripts/scripts.html %}
</body>
</html>
</html>