Address code review feedback

Adam rightly pointed out that the mockups in this ticket called for the
mobile filter behavior to kick in at the medium screen size (below 768),
not small (below 480).

This swaps the change over to that screen size, replacing -sm with -md
as needed.

Author: matt-bernhardt

app/assets/stylesheets/partials/_filters.scss

@@ -33,7 +33,7 @@
         scrollbar-gutter: auto;
         scroll-behavior: auto;
 
-        @media (max-width: $bp-screen-sm) {
+        @media (max-width: $bp-screen-md) {
           max-height: inherit;
         }
       }
@@ -123,7 +123,7 @@ button#filter-toggle {
   width: 100%;
   text-align: left;
 
-  @media (min-width: $bp-screen-sm) {
+  @media (min-width: $bp-screen-md) {
     display: none;
   }
 

app/assets/stylesheets/partials/_layouts.scss

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

app/javascript/filters.js

@@ -3,7 +3,7 @@ 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_panel.classList.toggle('hidden-md');
     filter_toggle.classList.toggle('expanded');
 
   });

app/views/search/results.html.erb

@@ -19,8 +19,8 @@
     <% if @filters.present? %>
       <aside class="col1q filter-container">
         <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">
+        <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>