thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2025-01-22 00:46:27 -05:00
Code Issues Projects Releases Wiki Activity

Improved search button and results, added blur to content

Browse Source 
(cherry picked from commit 99371e971406090a2dba7b9b69f514a8f87afce3)
This commit is contained in:
Silvio Giebl 2019-07-22 21:50:15 +02:00
parent 7c93bcc48f
commit 887a18daa0
3 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_layouts/default.html
View File

@ -59,7 +59,7 @@ layout: table_wrappers
</nav> </nav>
{% endif %} {% endif %}
</div> </div>
<div class="main-content-wrap"> <div id="main-content-wrap" class="main-content-wrap">
{% unless page.url == "/" %} {% unless page.url == "/" %}
{% if page.parent %} {% if page.parent %}
<nav aria-label="Breadcrumb" class="breadcrumb-nav"> <nav aria-label="Breadcrumb" class="breadcrumb-nav">

9
_sass/search.scss
View File

@ -181,3 +181,12 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.search-results,
.search-button {
border: 1px solid rgba($link-color, 0.3);
}
.blur {
filter: blur(5px);
}

3
assets/js/just-the-docs.js
View File

@ -113,10 +113,12 @@ function initSearch() {
var docs = data; var docs = data;
var searchInput = document.getElementById('search-input'); var searchInput = document.getElementById('search-input');
var searchResults = document.getElementById('search-results'); var searchResults = document.getElementById('search-results');
var mainContentWrap = document.getElementById('main-content-wrap');
function hideResults() { function hideResults() {
searchResults.innerHTML = ''; searchResults.innerHTML = '';
searchResults.classList.remove('active'); searchResults.classList.remove('active');
mainContentWrap.classList.remove('blur');
} }
jtd.addEvent(searchInput, 'keydown', function(e){ jtd.addEvent(searchInput, 'keydown', function(e){
@ -195,6 +197,7 @@ function initSearch() {
if (results.length > 0) { if (results.length > 0) {
searchResults.classList.add('active'); searchResults.classList.add('active');
mainContentWrap.classList.add('blur');
var resultsList = document.createElement('ul'); var resultsList = document.createElement('ul');
resultsList.classList.add('search-results-list'); resultsList.classList.add('search-results-list');
searchResults.appendChild(resultsList); searchResults.appendChild(resultsList);