Add toggle for filters on mobile UI

** Why are these changes being introduced:

* The result filters are awkward on a mobile display, and may only be
  needed for some users. Rather than having them display by default,
  and take up space that is very precious, we want to only show a UI
  control to expose them when needed.

** Relevant ticket(s):

* https://mitlibraries.atlassian.net/browse/gdt-174

** How does this address that need:

* This adds a button above the filters panel markup, and adds a few
  classes to the existing markup at the top of the filters panel.

* With CSS, we hide the filters panel on the smallest screens using a
  new hidden-sm class. This class is then toggled via javascript when
  the user clicks on the UI button.

* The javascript is part of a new file - app/javascript/filters.js -
  which is loaded by the filters partial.

** Document any side effects to this change:

* I'm not sure where best to add the .hidden-sm class to this codebase.
  For now I'm adding it to a new _layouts module.

* During initial testing, it feels awkward to have competing scroll
  bars in the filter UI by imposing a maximum height on the panels.
  Because the user has now chosen explicitly to show the filters, it
  feels better to just have them take up the space they need, rather
  than making the user navigate overlapping scroll bars on a linear
  display. So this overrides the maximum filter panel height.

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-sm) {
+          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-sm) {
+    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-sm {
+  @media (max-width: $bp-screen-sm) {
+    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-sm');
+    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-sm">
+          <div class="hidden-sm">
+            <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" %>