From 6100a430c41faa54ffe769c0394b2213ed97816e Mon Sep 17 00:00:00 2001
From: Vincent Prouillet <vincent@wearewizards.io>
Date: Wed, 21 Mar 2018 15:25:25 +0100
Subject: [PATCH] Design tweaks on docs

---
 docs/sass/_search.scss    | 21 +++++++++++++++++++--
 docs/static/search.js     |  5 +++++
 docs/templates/index.html |  2 +-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/docs/sass/_search.scss b/docs/sass/_search.scss
index 8478d72..f1ffb70 100644
--- a/docs/sass/_search.scss
+++ b/docs/sass/_search.scss
@@ -5,6 +5,7 @@
 
   input {
     width: 100%;
+    padding: 0.5rem;
   }
 }
 
@@ -14,17 +15,33 @@
   background: white;
   color: black;
   padding: 1rem;
-  width: 100%;
   box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
   max-height: 500px;
   overflow: auto;
+  width: 150%;
+  right: 0;
 
   &__items {
     list-style: none;
   }
 
+  li {
+    margin-top: 1rem;
+    border-bottom: 1px solid #ccc;
+    font-size: 0.9rem;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+  }
+
   &__item {
     margin-bottom: 1rem;
-    font-size: 0.9rem;
+
+    a {
+      font-size: 1.2rem;
+      display: inline-block;
+      margin-bottom: 0.5rem;
+    }
   }
 }
diff --git a/docs/static/search.js b/docs/static/search.js
index 830b7bb..c24a596 100644
--- a/docs/static/search.js
+++ b/docs/static/search.js
@@ -156,6 +156,11 @@ function initSearch() {
     }
 
     var results = index.search(term, options);
+    if (results.length === 0) {
+      $searchResults.style.display = "none";
+      return;
+    }
+
     currentTerm = term;
     for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) {
       var item = document.createElement("li");
diff --git a/docs/templates/index.html b/docs/templates/index.html
index be9f370..87d795d 100644
--- a/docs/templates/index.html
+++ b/docs/templates/index.html
@@ -20,7 +20,7 @@
                 <a class="white" href="https://github.com/Keats/gutenberg" class="nav-link">GitHub</a>
 
                 <div class="search-container">
-                    <input id="search" type="search" placeholder="Search the docs">
+                    <input id="search" type="search" placeholder="🔎 Search the docs">
 
                     <div class="search-results">
                         <div class="search-results__items"></div>