Add no results message and fix location hash (2factorauth#2608)

JackMc · Jul 4, 2017 · 9ac5bc7 · 9ac5bc7
1 parent e92878f
commit 9ac5bc7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/css/base.scss b/css/base.scss
@@ -122,6 +122,12 @@ input[type=search] {
   }
 }
 
+#no-results {
+  display: none;
+  padding-bottom: 40px;
+  text-align: center;
+}
+
 .active-icon {
   background-color: $primary-color;
   color: white;

diff --git a/index.html b/index.html
@@ -95,3 +95,7 @@ <h5 class="ui icon header">
     {% endif %}
     {% endfor %}
   </div>
+
+  <div id="no-results">
+    <h2>No results found</h2>
+  </div>
diff --git a/js/app.js b/js/app.js
@@ -7,6 +7,12 @@ $(document).ready(function () {
 
   // Unveil images 50px before they appear
   $('img').unveil(50);
+
+  // Show exception warnings upon hover
+  $('span.popup.exception').popup({
+    hoverable: true
+  });
+  $('a.popup.exception').popup();
 });
 
 /**
@@ -22,47 +28,50 @@ $(window).resize(function () {
   }, 500);
 });
 
-// Show exception warnings upon hover
-(function (root, $) {
-  $('span.popup.exception').popup({
-    hoverable: true
-  });
-  $('a.popup.exception').popup();
-}(window, jQuery));
-
 var isSearching = false;
 var jets = new Jets({
   searchTag: '#jets-search',
   contentTag: '.jets-content',
   didSearch: function (searchPhrase) {
+    document.location.hash = '';
+    $('#no-results').css('display', 'none');
     $('.category h5 i').removeClass('active-icon');
+    // Two separate table layouts are used for desktop/mobile
     var platform = ($(window).width() > 768) ? 'desktop' : 'mobile';
     var content = $('.' + platform + '-table .jets-content');
     var table = $('.' + platform + '-table');
 
     // Non-strict comparison operator is used to allow for null
     if (searchPhrase == '') {
+      // Show all categories when no search term is entered
       $('.website-table').css('display', 'none');
       $('.website-table .label').css('display', 'none');
       $('.category').show();
       $('table').show();
       isSearching = false;
     } else {
+      // Hide irrelevant categories
       $('.website-table').css('display', 'none');
       $('.website-table .label').css('display', 'block');
       $('.category').hide();
       table.css('display', 'block');
       content.parent().show();
       content.each(function () {
-        // Hide table when all rows are hidden by Jets
+        // Hide table when all rows within are hidden by Jets
         if ($(this).children(':hidden').length === $(this).children().length) {
           if (platform == 'mobile') $(this).parent().hide();
           else $(this).parent().parent().hide();
         }
       });
+
+      if (table.children().length == table.children(':hidden').length) {
+          $('#no-results').css('display', 'block');
+      }
+
       isSearching = true;
     }
   },
+  // Process searchable elements manually
   manualContentHandling: function(tag) {
     return $(tag).find('.title > a.name').text();
   }
@@ -127,4 +136,5 @@ function openCategory(category) {
 function closeCategory(category) {
   $('#' + category + ' h5 i').removeClass('active-icon');
   $('.' + category + '-table').css('display', 'none');
+  document.location.hash = '';
 }