In documentation, add about section when searching

This commit hides the about section when the search bar is not empty,
making it more discoverable to users that search is indeed working and
they should look in the options section.

Author: krtab

docs/index.html

@@ -10,6 +10,19 @@
       <script src="https://unpkg.com/[email protected]"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
+      <script>
+        function hideHeaderIfSearching() {
+          var x = document.getElementById("search");
+
+          var myDiv = document.getElementById("about");
+          if (x.value != "")
+          {
+              myDiv.style.display = "none";
+          } else {
+              myDiv.style.display = "block";
+          }
+        }
+      </script>
       <style>
         @media (max-width: 767px) {
           .markdown-body {
@@ -61,7 +74,7 @@
                 <form style="display:flex;">
                   <label for="search" style="margin-right: 3px;" >search:</label>
                   <div style="position: relative;">
-                    <input id="search" placeholder="Search all options" v-model="searchCondition">
+                    <input id="search" placeholder="Search all options" v-model="searchCondition" onkeyup="hideHeaderIfSearching()">
                     <svg style="position: absolute; left: 8px; top: 7px;" class="octicon octicon-search subnav-search-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
                       <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"></path>
                     </svg>
@@ -81,7 +94,7 @@
                   </select>
               </div>
             </div>
-            <div v-html="aboutHtml"></div>
+            <div v-html="aboutHtml" id="about"></div>
             <div v-html="configurationAboutHtml"></div>
             <div v-html="outputHtml"></div>
           </article>