Merge pull request #123 from MITLibraries/gdt-174-mobile-filters

Add toggle for filters on mobile UI

Author: matt-bernhardt

app/assets/stylesheets/application.css.scss

@@ -8,6 +8,7 @@
 @import "partials/_alerts";
 @import "partials/_filters";
 @import "partials/_global_alerts";
+@import "partials/_layouts";
 @import "partials/_local_nav";
 @import "partials/_pagination";
 @import "partials/_panels";

app/assets/stylesheets/partials/_filters.scss

@@ -32,6 +32,10 @@
         overflow-y: scroll;
         scrollbar-gutter: auto;
         scroll-behavior: auto;
+
+        @media (max-width: $bp-screen-md) {
+          max-height: inherit;
+        }
       }
     }
     &.expanded:after {
@@ -107,3 +111,49 @@
     }
   }
 }
+
+button#filter-toggle {
+  align-items: center;
+  background: none;
+  border: none;
+  color: blue;
+  display: flex;
+  justify-content: start;
+  margin-bottom: 0.5em;
+  width: 100%;
+  text-align: left;
+
+  @media (min-width: $bp-screen-md) {
+    display: none;
+  }
+
+  &::before {
+    content: '\f0b0';
+    font-family: FontAwesome;
+    font-size: 150%;
+    margin-right: 0.5em;
+  }
+
+  &:hover,
+  &:focus {
+    background: blue;
+    color: white;
+  }
+
+  .filter-toggle-name {
+    display: block;
+  }
+  .filter-toggle-hide {
+    display: none;
+  }
+
+  &.expanded {
+    .filter-toggle-name {
+      display: none;
+    }
+    .filter-toggle-hide {
+      display: block;
+    }
+  }
+}
+

app/assets/stylesheets/partials/_layouts.scss

@@ -0,0 +1,5 @@
+.hidden-md {
+  @media (max-width: $bp-screen-md) {
+    display: none;
+  }
+}

app/javascript/filters.js

@@ -0,0 +1,12 @@
+// These elements aren't loaded with the initial DOM, they appear later.
+function initFilterToggle() {
+  var filter_toggle = document.getElementById('filter-toggle');
+  var filter_panel = document.getElementById('filters');
+  filter_toggle.addEventListener('click', event => {
+    filter_panel.classList.toggle('hidden-md');
+    filter_toggle.classList.toggle('expanded');
+
+  });
+}
+
+initFilterToggle();

app/views/search/results.html.erb

@@ -18,9 +18,12 @@
   <div class="<%= @filters.present? ? 'layout-1q3q' : 'layout-3q1q' %> layout-band top-space">
     <% if @filters.present? %>
       <aside class="col1q filter-container">
-        <div id="filters">
-          <h2 class="hd-3">Filter your results</h2>
-          <h3 class="hd-4"><em><%= results_summary(@pagination[:hits]) %></em></h3>
+        <button id="filter-toggle"><span class="filter-toggle-name">Filter your results: <%= results_summary(@pagination[:hits]) %></span><span class="filter-toggle-hide">Hide filters</span></button>
+        <div id="filters" class="hidden-md">
+          <div class="hidden-md">
+            <h2 class="hd-3">Filter your results</h2>
+            <h3 class="hd-4"><em><%= results_summary(@pagination[:hits]) %></em></h3>
+          </div>
           <% @filters&.each_with_index do |(category, values), index| %>
             <% if index == 0 %>
               <%= render(partial: 'search/filter', locals: { category: category, values: values, first: true }) %>
@@ -53,3 +56,5 @@
     <%= render partial: 'shared/ask', locals: { display: 'view-md' } %>
   <% end %>
 </div>
+
+<%= javascript_include_tag "filters" %>