Add filtering using Jets

Add filtering capabilities and a search bar, using the Jets library.
JackMc · Jan 4, 2016 · 3dff9d3 · 3dff9d3
1 parent 689c6e8
commit 3dff9d3
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 6 deletions.
diff --git a/_includes/table.html b/_includes/table.html
@@ -12,7 +12,7 @@
       <th>Software Token</th>
     </tr>
     </thead>
-    <tbody>
+    <tbody class="jets-content">
 
     {% assign section_file = site.data[section.id] %}
     {% for website in section_file.websites %}

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -47,8 +47,9 @@
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="/lib/semantic/javascript/semantic.min.js"></script>
 <script src="/js/jquery.unveil.min.js"></script>
+<script src="/js/jets.min.js"></script>
 
 <!-- TFA JS -->
 <script src="/js/app.js"></script>
 </body>
-</html>
+</html>
diff --git a/css/base.scss b/css/base.scss
@@ -2,6 +2,7 @@
 ---
 
 @import 'mixins';
+$primary-color: #39CCCC;
 
 html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
   margin: 0;
@@ -40,6 +41,39 @@ p {
   padding: 3em 0;
 }
 
+.ui.header .sub.header {
+  margin-top: 10px;
+
+  label {
+    color: #333333;
+  }
+}
+
+input[type=search] {
+  @include transition(all, ease, 300ms);
+  border: 1px #E3E3E3 solid;
+  border-radius: 30px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  margin-top: 30px;
+  padding: 10px 30px;
+  width: 50%;
+
+  &:focus {
+    border-color: $primary-color;
+    box-shadow: 0 0 10px $primary-color;
+    outline: none;
+  }
+}
+
+.active-icon {
+  background-color: $primary-color;
+  color: white;
+
+  &+small {
+    color: #389B9B;
+  }
+}
+
 .category {
   cursor: pointer;
   text-align: center;
@@ -48,8 +82,7 @@ p {
     @include transition(all, ease, 300ms);
 
     &:hover {
-      background-color: #39CCCC;
-      color: white;
+      @extend .active-icon
     }
   }
 }
@@ -63,3 +96,19 @@ p {
   width: 90vw;
   z-index: 1000;
 }
+
+.ui.table td.icon {
+  text-align: center;
+}
+
+.ui.celled.table tr td.main a,
+.ui.celled.table .exception,
+.ui.celled.table .exception * {
+  padding-left: 5%;
+  margin-bottom: 5px;
+  vertical-align: top;
+}
+
+span.progress {
+  padding-left: 10%;
+}
diff --git a/index.html b/index.html
@@ -17,10 +17,16 @@ <h2>Two Factor Auth (2FA)</h2>
   <div class="sub header">List of websites and whether or not they support
     <a href="https://en.wikipedia.org/wiki/Two-step_verification">2FA</a>.
   </div>
-  <div id="{{ first.id }}" class="sub header">
+  <div class="sub header">
     Add your own favorite site by submitting a pull request on the
     <a href="https://github.com/2factorauth/twofactorauth">GitHub repo</a>.
   </div>
+  <div class="sub header">
+    <label for="jets-search">
+      <i class="fa fa-search"></i>
+    </label>
+    <input type="search" id="jets-search" placeholder="Search websites">
+  </div>
 </div>
 
 <div class="ui stackable equal width five column grid container">

diff --git a/js/app.js b/js/app.js
@@ -1,5 +1,4 @@
 (function (root, $) {
-  $('.menu .dropdown').dropdown();
   $('span.popup.exception').popup({
     hoverable: true
   });
@@ -10,6 +9,21 @@ $(document).ready(function () {
   $("img").unveil(50);
 });
 
+var jets = new Jets({
+  searchTag: '#jets-search',
+  contentTag: '.jets-content',
+  didSearch: function (searchPhrase) {
+    if (searchPhrase == '') {
+      $('*.website-table thead').css('display', 'block');
+      $('*.website-table').css('display', 'none');
+    } else {
+      $('*.website-table thead').css('display', 'none');
+      $('*.website-table').css('display', 'block');
+    }
+  },
+  columns: [0] // Search by first column only
+});
+
 function getStyle(element, styleProp) {
   var validElement = document.getElementById(element),
     validStyle;
@@ -22,11 +36,14 @@ function getStyle(element, styleProp) {
 
 $('.category').click(function () {
   var id = $(this).attr('id');
+  var icon = $(this).find('h5 i');
   var table = $('#' + id + '-table');
   if (table.css('display') == 'block') {
     table.css('display', 'none');
   } else {
     $('*.website-table').css('display', 'none');
+    $('.category h5 i').removeClass('active-icon');
     table.css('display', 'block');
   }
+  icon.hasClass('active-icon') ? icon.removeClass('active-icon') : icon.addClass('active-icon');
 });
diff --git a/js/jets.min.js b/js/jets.min.js