Add toggle for filters on mobile UI

[matt-bernhardt]

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.

Developer

Env

• All new ENV is documented in README
• All new ENV has been added to Heroku Pipeline, Staging and Prod
• No ENV implications

A11y

• ANDI or Wave has been run in accordance to
  our guide and
  all issues introduced by these changes have been resolved or opened as new
  issues (link to those issues in the Pull Request details above)

Stakeholder

• Stakeholder approval has been confirmed (or is not needed)
• Stakeholder approval will come during QA

Requires database migrations?

NO

Includes new or updated dependencies?

NO

Code Reviewer

• The commit message is clear and follows our guidelines
  (not just this pull request message)
• There are appropriate tests covering any new functionality
• The documentation has been updated or is unnecessary
• The changes have been verified
• New dependencies are appropriate or there were no changes

[coveralls]

Pull Request Test Coverage Report for Build 8146694535

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 99.454%

---

Totals
Change from base Build 8142811628:	0.0%
Covered Lines:	364
Relevant Lines:	366

---

💛 - Coveralls

[jazairi]

Now that we have a layouts partial, I wonder if we should move these rules to it? If you agree, I can make that change amid another change or two that Darcy has requested to the 'Ask Us' panel.

[jazairi]

Sorry for the rescinded review. The code looks good, but we actually want this to break at 768px. See the 'results page' section of the UI details doc.

[matt-bernhardt]

Thanks for catching the needed break point - I've pushed a commit to make this all take effect at the medium screen size, not small.

As for whether we move those other rules into _layouts.scss.... that may be logical. I'm not quite clear at the moment, but it will likely look fine during code review - so if you want to include it under that ticket, that seems fine.