Define various UI states for search [refs #5]

smartergiving · Jul 15, 2016 · b21baff · b21baff
1 parent f121b56
commit b21baff
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 14 deletions.
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -349,6 +349,9 @@ $wide-layout-margin: 20%;
 }
 
   /* Search */
+  .sort {
+    cursor: pointer;
+  }
   .search-wrapper {
     position: relative;
     .search-box:not(:valid) ~ .search-clear {
@@ -381,9 +384,10 @@ $wide-layout-margin: 20%;
       color: _palette(accent1, bg);
       display: inline-block;
     }
-    tr td.search-no-items-found {
-
-    }
+  }
+  #search-no-items-found {
+    display: none;
+    min-height: 500px;
   }
 
 a.grantee-thumb {

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -183,6 +183,29 @@
           listSearchAll.push(listObject);
         });
 
+        //Define UI states
+        var listStateDefault = function() {
+          $('.search-box-label').css('visibility', 'hidden');
+          $('tfoot, thead').show();
+          $('.js-listjs').show();
+          $('tbody.list:parent').closest('.js-listjs').children('h3').show();
+          $('#search-no-items-found').hide();
+        };
+
+        var listStateSearching = function() {
+          $('.search-box-label').css('visibility', 'visible');
+          $('tfoot, thead').hide();
+          $('tbody.list:empty').closest('.js-listjs').children('h3').hide();
+          $('tbody.list:parent').closest('.js-listjs').children('h3').show();
+          $('.js-listjs').show();
+          $('#search-no-items-found').hide();
+        };
+
+        var listStateNoResults = function() {
+          $('#search-no-items-found').show();
+          $('.js-listjs').hide();
+        };
+
         //Enable live search
         $('#db-search').on('keyup', function() {
           var searchString = $(this).val();
@@ -191,22 +214,19 @@
             //Show count
             var listSearchSize = $('.list tr').length;
             $('.search-count').html(listSearchSize);
-            $('.search-box-label').css('visibility', 'visible');
-            //Simplify table styling
-            $('tfoot, thead').hide();
-            $('tbody.list:empty').closest('.js-listjs').children('h3').hide();
-            $('tbody.list:parent').closest('.js-listjs').children('h3').show();
+            listStateSearching();
           });
+
           //Add anchor reference to count element for scroll
           var listFirstResult = $('tbody tr').eq(0).closest($('.js-listjs')).attr('id');
           if ( typeof listFirstResult !== 'undefined' ) {
             $('.search-count').attr('href', '#' + listFirstResult);
             $('.scrolly').scrolly(); //Re-initialize Scrolly
+            listStateSearching();
           }
           else {
             $('.search-count').removeAttr("href");
-            //TODO: Show no results found message
-
+            listStateNoResults();
           }
 
         });
@@ -216,7 +236,7 @@
           $.each(listSearchAll, function(){
             this.search();
           });
-          $('.search-box-label').css('visibility', 'hidden');
+          listStateDefault();
         });
 
       // Format numbers

diff --git a/pages/grantees.html b/pages/grantees.html
@@ -39,9 +39,9 @@ <h3 class="db-table-header">{{ year[0] }}</h3>
       <table border="0px">
         <thead>
           <tr>
-            <th class="sort db-grantee-name" data-sort="db-grantee-name">Grantee Name</th>
-            <th class="sort db-grantee-location" data-sort="db-grantee-location">Location</th>
-            <th class="sort db-grant-amount" data-sort="db-grant-amount">Amount</th>
+            <th class="sort" data-sort="db-grantee-name">Grantee Name</th>
+            <th class="sort" data-sort="db-grantee-location">Location</th>
+            <th class="sort" data-sort="db-grant-amount">Amount</th>
             <th class="db-grant-purpose">Purpose</th>
           </tr>
         </thead>
@@ -85,6 +85,10 @@ <h3 class="db-table-header">{{ year[0] }}</h3>
       </table>
     </div>
   {% endfor %}
+  <section id="search-no-items-found">
+    <h3>No grants found</h3>
+    <!--p><a href="#db-search" class="scrolly">Try new search</a></p-->
+  </section>
 </section>
 
 <script src="{{ site.baseurl }}/assets/js/list.min.js"></script>