From c570cd3192f6e55757336258903c778d50508c30 Mon Sep 17 00:00:00 2001 From: Matthew Bernhardt Date: Wed, 28 Feb 2024 09:33:09 -0500 Subject: [PATCH 1/2] 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. --- app/assets/stylesheets/application.css.scss | 1 + app/assets/stylesheets/partials/_filters.scss | 50 +++++++++++++++++++ app/assets/stylesheets/partials/_layouts.scss | 5 ++ app/javascript/filters.js | 12 +++++ app/views/search/results.html.erb | 11 ++-- 5 files changed, 76 insertions(+), 3 deletions(-) create mode 100644 app/assets/stylesheets/partials/_layouts.scss create mode 100644 app/javascript/filters.js diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index c59ecac2..7e2d5b97 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/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"; diff --git a/app/assets/stylesheets/partials/_filters.scss b/app/assets/stylesheets/partials/_filters.scss index cee6f4a4..6a033d6d 100644 --- a/app/assets/stylesheets/partials/_filters.scss +++ b/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; + } + } +} + diff --git a/app/assets/stylesheets/partials/_layouts.scss b/app/assets/stylesheets/partials/_layouts.scss new file mode 100644 index 00000000..07478583 --- /dev/null +++ b/app/assets/stylesheets/partials/_layouts.scss @@ -0,0 +1,5 @@ +.hidden-sm { + @media (max-width: $bp-screen-sm) { + display: none; + } +} diff --git a/app/javascript/filters.js b/app/javascript/filters.js new file mode 100644 index 00000000..58c89a40 --- /dev/null +++ b/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(); diff --git a/app/views/search/results.html.erb b/app/views/search/results.html.erb index 1b50b171..af8b1716 100644 --- a/app/views/search/results.html.erb +++ b/app/views/search/results.html.erb @@ -18,9 +18,12 @@
<% if @filters.present? %>