From 887a18daa0074c5335c31d537bd74e766338b2b2 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Mon, 22 Jul 2019 21:50:15 +0200
Subject: [PATCH] Improved search button and results, added blur to content
(cherry picked from commit 99371e971406090a2dba7b9b69f514a8f87afce3)
---
_layouts/default.html | 2 +-
_sass/search.scss | 9 +++++++++
assets/js/just-the-docs.js | 3 +++
3 files changed, 13 insertions(+), 1 deletion(-)
diff --git a/_layouts/default.html b/_layouts/default.html
index 84971bd5..69bfe004 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -59,7 +59,7 @@ layout: table_wrappers
</nav>
{% endif %}
</div>
- <div class="main-content-wrap">
+ <div id="main-content-wrap" class="main-content-wrap">
{% unless page.url == "/" %}
{% if page.parent %}
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
diff --git a/_sass/search.scss b/_sass/search.scss
index 3a6ad204..ded136d7 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -181,3 +181,12 @@
align-items: center;
justify-content: center;
}
+
+.search-results,
+.search-button {
+ border: 1px solid rgba($link-color, 0.3);
+}
+
+.blur {
+ filter: blur(5px);
+}
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 4caedac4..b2a30345 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -113,10 +113,12 @@ function initSearch() {
var docs = data;
var searchInput = document.getElementById('search-input');
var searchResults = document.getElementById('search-results');
+ var mainContentWrap = document.getElementById('main-content-wrap');
function hideResults() {
searchResults.innerHTML = '';
searchResults.classList.remove('active');
+ mainContentWrap.classList.remove('blur');
}
jtd.addEvent(searchInput, 'keydown', function(e){
@@ -195,6 +197,7 @@ function initSearch() {
if (results.length > 0) {
searchResults.classList.add('active');
+ mainContentWrap.classList.add('blur');
var resultsList = document.createElement('ul');
resultsList.classList.add('search-results-list');
searchResults.appendChild(resultsList);
--
GitLab