Merge pull request #38 from MITLibraries/post-169-a

Make landing page filters toggle-able on mobile screens

Author: matt-bernhardt

asset/css/base.css

@@ -69,7 +69,6 @@ function ResetFilters() {
 }
 
 function UpdateFilter( e ) {
-    console.log(e);
     e.setAttribute('aria-pressed', 'true');
     $(e).toggleClass('pressed');
 }

asset/css/sites-filter.css

@@ -1,3 +1,5 @@
+@import 'variables';
+
 // ----------------------------
 // #CONTENT
 // ----------------------------
@@ -36,3 +38,15 @@
         }
     }
 }
+
+.hidden-above-md {
+    @media only screen and (min-width: $bp-screen-md) {
+        display: none;
+    }
+}
+
+.hidden-below-lg {
+    @media only screen and (max-width: $bp-screen-md) {
+        display: none;
+    }
+}

asset/js/sites-filter.js

@@ -2,36 +2,55 @@
 @import 'variables';
 
 .site-filter-outer {
-    align-items: baseline;
     border: none;
     display: flex;
-    margin: 0;
-    margin-bottom: 2rem;
+    flex-flow: column;
+    margin: 0 0 1rem;
     padding: 0;
 
     legend {
-        float: left;
-        font-weight: bold;
-
         h2 {
             font-size: inherit;
+
+            button {
+                font-size: inherit;
+                font-weight: inherit;
+
+                .collapsed {
+                    display: none;
+                }
+
+                .open {
+                    display: inherit;
+                }
+            }
+        }
+    }
+
+    &.collapsed legend h2 button {
+        .collapsed {
+            display: inherit;
+        }
+
+        .open {
+            display: none;
         }
     }
 
     #site-filter {
-        float: left;
+        align-items: initial;
+        border-top: 1px solid $gray-l3;
+        display: flex;
+        flex-flow: column;
 
         button {
             background-color: $white;
-            border: 1px solid $gray-l3;
-            padding: 1rem;
-            font-size: 1.625rem;
-            margin-right: 1rem;
-            margin-top: 2rem;
-
-            &:first-of-type {
-                margin-left: 1rem;
-            }
+            border: none;
+            border-bottom: 1px solid $gray-l3;
+            font-size: inherit;
+            margin: 0;
+            padding: 0.5rem 1rem;
+            text-align: left;
 
             &:hover,
             &:focus {
@@ -47,6 +66,64 @@
             }
         }
     }
+
+    &.collapsed #site-filter {
+        display: none;
+    }
+}
+
+@media only screen and (min-width: $bp-screen-md) {
+    .site-filter-outer {
+        align-items: baseline;
+        border: none;
+        flex-flow: row wrap;
+        margin: 0;
+        margin-bottom: 2rem;
+        padding: 0;
+
+        legend {
+            float: left;
+
+            h2 button {
+                .collapsed {
+                    display: inherit;
+                }
+
+                .open {
+                    display: none;
+                }
+            }
+        }
+
+        &.collapsed legend h2 button {
+            .collapsed {
+                display: inherit;
+            }
+
+            .open {
+                display: none;
+            }
+        }
+
+        #site-filter {
+            border: none;
+            flex-flow: row wrap;
+            float: left;
+
+            button {
+                background-color: $white;
+                border: 1px solid $gray-l3;
+                display: inline-block;
+                padding: 1rem;
+                font-size: 1.625rem;
+                margin: 1rem;
+            }
+        }
+
+        &.collapsed #site-filter {
+            display: inherit;
+        }
+    }
 }
 
 #site-grid {

asset/scss/_layouts.scss

@@ -1,6 +1,6 @@
 [info]
 name = "Tesseract"
-version = "0.10"
+version = "0.11"
 author = "MIT Libraries"
 description = "An Omeka S theme to implement the MIT Libraries' branding materials"
 theme_link = "https://github.com/MITLibraries/mitlibraries-theme-omeka"

asset/scss/sites-filter.scss

@@ -7,8 +7,16 @@ if (isset($sites_set) && isset($sites_page) && $sites_page == $page->slug()) {
     $this->headLink()->appendStylesheet($this->assetUrl('css/sites-filter.css'));
 
     ?>
-    <fieldset class="site-filter-outer">
-        <legend><h2>Filter exhibits by:</h2></legend>
+    <fieldset class="site-filter-outer collapsed">
+        <legend>
+            <h2>
+                <button class="hidden-above-md" id="site-filter-toggle">
+                    <span class="open">Hide filter</span>
+                    <span class="collapsed">Filter exhibits by category</span>
+                </button>
+                <span class="hidden-below-lg">Filter exhibits by category</span>
+            </h2>
+        </legend>
         <span id="site-filter">
             <button class="filter-button" value="All">All</button>
         </span>
@@ -18,6 +26,18 @@ if (isset($sites_set) && isset($sites_page) && $sites_page == $page->slug()) {
     <script>
         $(document).ready(function() {
             LoadItemSet( <?php echo $sites_set; ?> );
+
+            let toggle = document.getElementById('site-filter-toggle');
+            let container = document.getElementsByClassName('site-filter-outer')[0];
+
+            toggle.addEventListener(
+                "click",
+                (event) => {
+                    container.classList.toggle('collapsed');
+                },
+                false,
+            );
+
         });
     </script>
     <?php