Merge branch 'improvement/search-button' into improvement/navigation-new

_layouts/default.html

@@ -12,6 +12,14 @@ layout: table_wrappers
       <title>Link</title>
       <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
     </symbol>
+    <symbol id="search" viewBox="0 0 24 24">
+      <title>Menu</title>
+      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/>
+    </symbol>
+    <symbol id="menu" viewBox="0 0 24 24">
+      <title>Search</title>
+      <path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+    </symbol>
     <symbol id="arrow-right" viewBox="0 0 24 24">
       <title>Expand</title>
       <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/>
@@ -21,8 +29,10 @@ layout: table_wrappers
   <div class="page-wrap">
     <div class="side-bar">
       <div class="site-header">
-        <a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
+        <a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include title.html %}</a>
-        <button id="site-nav-trigger" class="site-button" data-text-toggle="Hide" type="button">Menu</button>
+        <a href="#" id="menu-button" class="site-button">
+          <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#menu"></use></svg>
+        </a>
       </div>
       <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
         {% include nav.html %}
@@ -38,12 +48,12 @@ layout: table_wrappers
             <div class="search">
               <div class="search-input-wrap">
                 <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
-                <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
+                <svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#search"></use></svg>
               </div>
               <div id="search-results" class="search-results"></div>
             </div>
           {% endif %}
-          {% if site.aux_links != nil %}
+          {% if site.aux_links %}
             <nav aria-label="Auxiliary" class="aux-nav">
               <ul class="aux-nav-list">
                 {% for link in site.aux_links %}
@@ -61,7 +71,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">
@@ -136,6 +146,12 @@ layout: table_wrappers
         </div>
       </div>
     </div>
+
+    {% if site.search_enabled != false %}
+      <a href="#" id="search-button" class="search-button">
+        <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#search"></use></svg>
+      </a>
+    {% endif %}
   </div>
 
 </body>

_sass/layout.scss

@@ -164,16 +164,10 @@
 }
 
 .site-button {
-  appearance: none;
   display: flex;
   height: 100%;
   padding: $gutter-spacing-sm;
   align-items: center;
-  color: $link-color;
-  text-transform: uppercase;
-  background: transparent;
-  border: 0;
-  @include fs-3;
 
   @include mq(md) {
     display: none;
@@ -214,3 +208,9 @@ body {
     justify-self: end;
   }
 }
+
+.icon {
+  width: $sp-5;
+  height: $sp-5;
+  fill: $link-color;
+}

_sass/search.scss

@@ -62,6 +62,8 @@
 }
 
 .search-icon {
+  width: 1.2rem;
+  height: 1.2rem;
   align-self: center;
   margin-right: $sp-2;
   fill: $grey-dk-000;
@@ -165,3 +167,26 @@
   font-weight: bold;
   color: $link-color;
 }
+
+.search-button {
+  position: fixed;
+  right: $sp-4;
+  bottom: $sp-4;
+  display: flex;
+  width: $sp-9;
+  height: $sp-9;
+  background-color: $search-background-color;
+  border-radius: #{$sp-9 / 2};
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+  align-items: center;
+  justify-content: center;
+}
+
+.search-results,
+.search-button {
+  border: 1px solid rgba($link-color, 0.3);
+}
+
+.blur {
+  filter: blur(5px);
+}

assets/js/just-the-docs.js

@@ -37,24 +37,36 @@ function initNav() {
 
   const siteNav = document.getElementById('site-nav');
   const mainHeader = document.getElementById('main-header');
-  const navTrigger = document.getElementById('site-nav-trigger');
+  const menuButton = document.getElementById('menu-button');
 
-  jtd.addEvent(navTrigger, 'click', function(e){
+  jtd.addEvent(menuButton, 'click', function(e){
     e.preventDefault();
-    var text = navTrigger.innerText;
-    var textToggle = navTrigger.getAttribute('data-text-toggle');
 
-    siteNav.classList.toggle('nav-open');
+    if (menuButton.classList.toggle('nav-open')) {
-    mainHeader.classList.toggle('nav-open');
+      siteNav.classList.add('nav-open');
-    navTrigger.classList.toggle('nav-open');
+      mainHeader.classList.add('nav-open');
-    navTrigger.innerText = textToggle;
+    } else {
-    navTrigger.setAttribute('data-text-toggle', text);
+      siteNav.classList.remove('nav-open');
-    textToggle = text;
+      mainHeader.classList.remove('nav-open');
-  })
+    }
+  });
+
+  {% if site.search_enabled != false -%}
+  const searchInput = document.getElementById('search-input');
+  const searchButton = document.getElementById('search-button');
+
+  jtd.addEvent(searchButton, 'click', function(e){
+    e.preventDefault();
+
+    mainHeader.classList.add('nav-open');
+    searchInput.focus();
+  });
+  {%- endif %}
 }
 
 // Site search
 
+{% if site.search_enabled != false -%}
 function initSearch() {
   var request = new XMLHttpRequest();
   request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true);
@@ -106,10 +118,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){
@@ -188,6 +202,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);
@@ -289,6 +304,7 @@ function initSearch() {
     });
   }
 }
+{%- endif %}
 
 // Focus
 
@@ -314,9 +330,9 @@ jtd.setTheme = function(theme) {
 jtd.onReady(function(){
   initNav();
   pageFocus();
-  if (typeof lunr !== 'undefined') {
+  {% if site.search_enabled != false -%}
-    initSearch();
+  initSearch();
-  }
+  {%- endif %}
 });
 
 })(window.jtd = window.jtd || {});