diff --git a/Gemfile b/Gemfile index 838a52f2..bf666bfb 100644 --- a/Gemfile +++ b/Gemfile @@ -9,7 +9,7 @@ gem 'graphql-client' gem 'http' gem 'importmap-rails' gem 'jbuilder' -gem 'mitlibraries-theme', git: 'https://github.com/mitlibraries/mitlibraries-theme', tag: 'v1.2' +gem 'mitlibraries-theme', git: 'https://github.com/mitlibraries/mitlibraries-theme', tag: 'v1.4' gem 'puma' gem 'rails', '~> 7.0' gem 'sentry-rails' diff --git a/Gemfile.lock b/Gemfile.lock index 8868e12e..74e403d3 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ GIT remote: https://github.com/mitlibraries/mitlibraries-theme - revision: bcbe5d3de36a92d275085a045c5c4d8f30f33e62 - tag: v1.2 + revision: ba5bdc9840ef817ba0b92e522b92da3f52669fc3 + tag: v1.4 specs: mitlibraries-theme (1.0.2) rails (>= 6, < 8) diff --git a/app/assets/stylesheets/partials/_filters.scss b/app/assets/stylesheets/partials/_filters.scss index 722c0141..7faede4d 100644 --- a/app/assets/stylesheets/partials/_filters.scss +++ b/app/assets/stylesheets/partials/_filters.scss @@ -1,12 +1,12 @@ #filters { - .category { + details.filter-category { position: relative; margin-bottom: 0.5em; border: 1px solid $gray-l3; border-radius: 3px; } - button.filter-label { + summary.filter-label { display: flex; justify-content: space-between; width: 100%; @@ -47,12 +47,6 @@ } } - .filter-options { - max-height: 0; - transition: max-height 0.5s ease-in-out; - overflow: hidden; - } - ul.category-terms { border-collapse: separate; border-spacing: 0px 4px; diff --git a/app/assets/stylesheets/partials/_shared.scss b/app/assets/stylesheets/partials/_shared.scss index 5afdd46c..f6a6b079 100644 --- a/app/assets/stylesheets/partials/_shared.scss +++ b/app/assets/stylesheets/partials/_shared.scss @@ -39,3 +39,23 @@ } } } + +.skip-link { + position: absolute; + overflow: hidden; + top: 0; + left: 0; + height: 0; + color: $gray-l2; + background-color: $black; + border-bottom: 2px solid $success; + + &:focus { + position: relative; + display: block; + height: auto; + color: $white; + width: 100%; + padding: 5px 2%; + } +} diff --git a/app/javascript/filters.js b/app/javascript/filters.js index 27035d38..32a79cee 100644 --- a/app/javascript/filters.js +++ b/app/javascript/filters.js @@ -1,11 +1,16 @@ // 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'); + var filter_panel = document.getElementById('filter-container'); + var filter_categories = document.getElementsByClassName('filter-category'); filter_toggle.addEventListener('click', event => { filter_panel.classList.toggle('hidden-md'); filter_toggle.classList.toggle('expanded'); - + }); + [...filter_categories].forEach(element => { + element.addEventListener('click', event => { + element.getElementsByClassName('filter-label')[0].classList.toggle('expanded'); + }); }); } diff --git a/app/views/layouts/_site_nav.html.erb b/app/views/layouts/_site_nav.html.erb index 87067840..e563a5ea 100644 --- a/app/views/layouts/_site_nav.html.erb +++ b/app/views/layouts/_site_nav.html.erb @@ -1,7 +1,7 @@
-