Dev search customized

_includes/header.html

@@ -9,6 +9,12 @@
       </a>
     </div>
 
+    {%- if page.layout == 'docs' -%}
+    <div class="search">
+      {%- include search-lunr.html -%}
+    </div>
+    {%- endif -%}
+
     <nav class="navigation hidden" id="navigation">
       {%- for item in site.data.navigation -%}
       {% assign link = item.link | replace: ".html" %}
@@ -17,11 +23,6 @@
       {%- endfor -%}
     </nav>
 
-{%- if page.layout == 'docs' -%}
-<div class="search">
-  {%- include search-lunr.html -%}
-</div>
-{%- endif -%}
 
     <button class="toggle_mnu" id="toggle_menu" onclick="toggle_menu()">
       <img src="{{'/assets/images/sandwich_white.png' | relative_url}}" class="open toggle_icon" alt="menu open">

_includes/search-lunr.html

@@ -51,7 +51,13 @@
 function lunr_search(term) {
     document.getElementById('lunrsearchresults').innerHTML = '<ul></ul>';
     if(term) {
-        document.getElementById('lunrsearchresults').innerHTML = "<p>Search results for '" + term + "'</p>" + "<div id='search_closer' onclick='search_close()'><img src='/assets/images/times.png' alt='closer'></div>" + document.getElementById('lunrsearchresults').innerHTML; 
+        document.getElementById('lunrsearchresults').innerHTML = "<h3 class='search_title'>Search results for '" + term + "'</h3>" + 
+        "<div id='search_closer' onclick='search_close()'>\
+            <img src='/assets/images/times.png' alt='closer'>\
+        </div>" 
+        + document.getElementById('lunrsearchresults').innerHTML; 
+        /* document.getElemenstById('lunrsearchresults').element.classList.remove("hidden"); */
+        $('#lunrsearchresults').removeClass("hidden");
         //put results on the screen.
         var results = idx.search(term);
         if(results.length>0){
@@ -63,32 +69,33 @@
                 var url = documents[ref]['url'];
                 var title = documents[ref]['title'];
                 var body = documents[ref]['body'].substring(0,160)+'...';
-                document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML + "<li class='lunrsearchresult'><a href='" + url + "'><span class='title'>" + title + "</span><br /><span class='body'>"+ body +"</span><br /><span class='url'>"+ url +"</span></a></li>";
+                document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML + 
+                "<li class='lunrsearchresult'>\
+                    <a href='" + url + "'>\
+                        <div class='page_title'>\
+                            <h3 class='title'>" + title + "</h3>\
+                            <span class='url'>"+ url +"</span>\
+                        </div>\
+                        <span class='body'>"+ body +"</span>\
+                    </a>\
+                </li>";
             }
         } else {
             document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = "<li class='lunrsearchresult'>No results found...</li>";
         }
+
     }
     return false;
 }
     function search_close() {
-        $("#lunrsearchresults").empty();
+        $('#lunrsearchresults').empty().addClass("hidden");
+        /* document.getElementById('lunrsearchresults').element.classList.add("hidden"); */
     };
 </script>
-<style>
-    #lunrsearchresults {padding-top: 0.2rem;}
-    .lunrsearchresult {padding-bottom: 1rem;}
-    .lunrsearchresult .title {color: #fff;}
-    .lunrsearchresult .url {color: silver;}
-    .lunrsearchresult a {display: block; color: #777;}
-    .lunrsearchresult a:hover, .lunrsearchresult a:focus {text-decoration: none;}
-    .lunrsearchresult a:hover .title {text-decoration: underline;}
-</style>
-
 
 <form onSubmit="return lunr_search(document.getElementById('lunrsearch').value);">
-    <p><input type="text" class="form-control" id="lunrsearch" name="q" maxlength="255" value="" placeholder="Search" /></p>
+    <h3><input type="text" class="form-control" id="lunrsearch" name="q" maxlength="255" value="" placeholder="Search" /></h3>
 </form>
-<div id="lunrsearchresults">
+<div id="lunrsearchresults" class="lunrsearchresults hidden">
   <ul></ul>
 </div>

_includes/sidebar.html

@@ -10,7 +10,7 @@ <h2>Sections</h2>
         <a class="aside_nav_link{% if page.title == item.title %} active"{% endif %}" href="{{item.url}}">{{item.title}}</a>
 
         {%- if item.has_children -%}
-         <span class="toggle_sub rot90">▸</span>
+         <div class="toggle_sub rot180"></div>
         {%- assign this = item.title -%}
         {% assign children = site.docs | where: "parent", this %}