Adds 'no results found' message to search

Signed-off-by: Christopher Rogers <[email protected]>
grsahil20 · Apr 12, 2014 · 535a3b0 · 535a3b0
1 parent 5892700
commit 535a3b0
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 12 deletions.
diff --git a/source/javascripts/app/search.js b/source/javascripts/app/search.js
@@ -14,7 +14,7 @@
   function populate () {
     $('h1').each(function () {
       var title = $(this);
-      var body = title.nextUntil('h1');
+      var body = title.nextUntil('h1, .search-nothing-found');
       var wrapper = $('<section id="section-' + title.prop('id') + '"></section>');
 
       title.after(wrapper.append(body));
@@ -33,18 +33,30 @@
     $('#input-search').on('keyup', search);
   }
 
-  function search () {
-    var sections = $('section, #toc .tocify-header');
+  function search (event) {
+    var $sections = $('section, #toc .tocify-header');
+    var $content = $('.content');
+    var opts = { element: 'span', className: 'search-highlight' };
+
+    $content.unhighlight(opts);
+
+    // esc clears the field
+    if (event.keyCode === 27) this.value = '';
 
     if (this.value) {
       var items = index.search(this.value);
-      sections.hide();
-      items.forEach(function (item) {
-        $('#section-' + item.ref).show();
-        $('.tocify-item[data-unique=' + item.ref + ']').closest('.tocify-header').show();
-      });
+      $sections.hide();
+      if (items.length) {
+        items.forEach(function (item) {
+          $('#section-' + item.ref).show();
+          $('.tocify-item[data-unique=' + item.ref + ']').closest('.tocify-header').show();
+        });
+        $content.highlight(this.value, opts);
+      } else {
+        $sections.filter('.search-nothing-found').show();
+      }
     } else {
-      sections.show();
+      $sections.show();
     }
 
     // HACK trigger tocify height recalculation

diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
@@ -23,7 +23,7 @@ under the License.
 
     <%= stylesheet_link_tag :screen, media: :screen %>
     <%= stylesheet_link_tag :print, media: :print %>
-    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+    <script src="https://code.jquery.com/javascripts/jquery-1.11.0.min.js"></script>
     <%= javascript_include_tag  "all" %>
 
     <% if language_tabs %>
@@ -57,6 +57,11 @@ under the License.
         <% current_page.data.includes && current_page.data.includes.each do |include| %>
           <%= partial "includes/#{include}" %>
         <% end %>
+        <section class="search-nothing-found">
+          <aside class="search-info">
+            No results found
+          </aside>
+        </section>
       </div>
       <div class="dark-box">
         <% if language_tabs %>

diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
@@ -33,10 +33,16 @@ html, body {
   -moz-osx-font-smoothing: grayscale;
   @extend %default-font;
   background-color: $main-bg;
+  height: 100%;
 }
 
-.highlight {
-  background-color: #FFFF88;
+.search-highlight {
+  background-image: linear-gradient(to bottom right, #F7E633 0%, #F1D32F 100%);
+  padding: 2px;
+  margin: -2px;
+  border-radius: 4px;
+  border: 1px solid #F7E633;
+  text-shadow: 1px 1px 0 #666;
 }
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -180,6 +186,7 @@ html, body {
   position: relative;
   z-index: 10;
   background-color: $main-bg;
+  min-height: 100%;
 
   padding-bottom: 1px; // prevent margin overflow
 
@@ -412,6 +419,20 @@ html, body {
     aside.success:before {
       @extend %icon-ok-sign;
     }
+
+    aside.search-info {
+      font-size: 1.2em;
+      margin-top: 0;
+      height: 52px;
+      &:before {
+        @extend %icon-search;
+        font-size: 1.2em;
+      }
+    }
+
+    .search-nothing-found {
+      display: none;
+    }
   }
 }