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 84971bd..69bfe00 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 3a6ad20..ded136d 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 4caedac..b2a3034 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);