Add a category label when searching on mobile

JackMc · Jan 15, 2016 · ed0e77b · ed0e77b
1 parent af3e9a2
commit ed0e77b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/_includes/mobile-table.html b/_includes/mobile-table.html
@@ -1,6 +1,9 @@
 {% assign section = include.variable-param %}
 {% assign section_file = site.data[section.id] %}
 <div class="website-table mobile-table {{ section.id }}-table" id="{{ section.id }}-mobiletable" style="display:none">
+  <div class="label">
+    <h3>{{ section.title }}</h3>
+  </div>
   <div class="jets-content">
     {% for website in section_file.websites %}
     {% if website.status %}

diff --git a/css/base.scss b/css/base.scss
@@ -162,6 +162,12 @@ input[type=search] {
 .mobile-table {
   display: none;
 
+  .label {
+    display: none;
+    padding: 15px 0;
+    text-align: center;
+  }
+
   .jets-content {
     border: 1px groove rgba(34, 36, 38, 0.14902);
     border-radius: 5px;

diff --git a/js/app.js b/js/app.js
@@ -44,11 +44,13 @@ var jets = new Jets({
     // Non-strict comparison operator is used to allow for null
     if (searchPhrase == '') {
       $('.website-table').css('display', 'none');
+      $('.website-table .label').css('display', 'none');
       $('.category').show();
       $('table').show();
       isSearching = false;
     } else {
       $('.website-table').css('display', 'none');
+      $('.website-table .label').css('display', 'block');
       $('.category').hide();
       table.css('display', 'block');
       content.parent().show();