Bootstrap 5

[nimmolo]

This PR is a massive lift, because there were big changes between versions 3 and 4 of Bootstrap.

Sorta minimum necessary changes

Every Bootstrap update requires altering the CSS classes used in nearly all our HTML markup (whether in templates or helpers) to the CSS class names for that version of Bootstrap. It also requires updating the Bootstrap SCSS variable names that build the Bootstrap CSS classes, and building and testing new variable maps to get our theme color SCSS variables corresponding to the Bootstrap ones. This is mandatory, because these CSS class names control integration with Bootstrap JS, that is also updated with each version.

Between 3 and 4, there were significant changes required in HTML element nesting and class assignment, particularly in forms, dropdowns, modals and complex elements like carousels. There are nearly none of these nesting changes between 4 and 5, so there it's mostly CSS class name changes and variable name changes. (For example, to account for RTL languages in BS 5, classes including the word "left" or "right" now use "start" and "end". Variable names change to account for new methods of calculating SASS color and spacing variants.)

For the latter reason especially, it seems advisable to do these two updates in one PR. I believe it will save work, and I don't want to be troubleshooting Bootstrap 4 on the live site while i'm trying to get to 5.

Themes

Each theme compounds the work mathematically, so my goal is to put the PR live with a single B&W theme "Coprinus" having a dark and light mode. My idea is to put the majority of users who use the default theme on this theme, and use the cookie to store their light/dark mode preference. Users who have selected "Amanita", our only dark theme, would get the dark mode of "Coprinus" for now.

More colorful themes can be rolled out later; in fact BS 5 just added the ability to have color variants of a single theme, in addition to light and dark. But we need at least one theme that works, to go live.

Nice-to-haves

• Carousels
• Consistent use of icons where possible
• Header: use dropdown menus instead of spacious tabsets where possible
• Modal forms for on-page editing

TODO

CSS - BS 4

• Switch gem to Bootstrap 4
• Update to BS4 css class names in templates and helpers using the migration guide
• Update our JS to work with BS 4
• Clean up mushroom-observer SCSS
  • Remove BS4 classes added to ease transition
  • Remove superfluous classes with Bootstrap analogues
• Convert classes with breakpoints (sm->md, etc) in columns and others
• Update matrix table and matrix box markup to use bs4
• Rename vars in the map that converts theme color vars to bootstrap vars
• Convert panels to cards
• Convert form elements
• Convert spinners

CSS - BS 5

• switch gem to Bootstrap 5
• update to BS5 css class names in templates and helpers using the migration guide
• Update our JS to work with BS 5
• build the light/dark mode switch
• fine tune Coprinus dark mode

Icons

• Choose an icon library (currently Fontawesome, may switch to Bootstrap Icons)
• Write icon helpers

Helpers

• Buttons
  • New helpers for buttons with icons, for every type of CRUD action
    • Add, Edit, Delete
  • Also for descriptions
• Interactive Images with overlays for lightbox, voting, etc
• Tabset helpers per controller

Presenters

• New image presenter for data governing image interactivity

Carousel

• create carousel template for multiple images in a view
• Implement carousel in views wherever multiple images are shown
  • Observations
  • Locations
  • Names

Top nav, title and tabset

• rework top nav
  • redo sort link bar helper
  • code new dropdown menu helper
• convert tabset links to appear elsewhere
  • icons if possible, or
  • in a dropdown menu from the top nav

Views

• Make Observation show view the test case for new design patterns to be rolled out to other views
  • Redo Namings table, modal forms
• Move recurring HTML patterns to shared templates or helpers, to DRY up views and centralize changes
  • Carousels
  • Interactive Images
  • Modals for forms
• Scour every template for updated markup
• Test every view

Tests

• Switch Lurker integration tests to Capybara from rails-dom-testing, so we can test for new classes