Mass UI migration [was: try out collapsible sidebar component]

[JobLeonard]

So I was looking for sidebar components that we could use (after all, why re-invent the wheel if other people have battle-tested their own solutions for bugs and shared them online, right?)

• react-sidebar (source, demo) - seems to hit a sweet-spot, supports touch (swiping in from the left of the screen)
• react-burger-menu (source, demo) - too heavy (SVG based, focuses on pretty animations) and no touch support
• react-offcanvas (source, demo) - seems more lightweight but no touch support

... but then I came across this:

react-toolbox

The whole react-toolbox looks like a pretty amazing set of UI components to me. It comes with touch-support, sliders, autocomplete fields, everything.

Also, Google's Material Design comes with a lot of good visual design "defaults" in general (for example, the ripple effect when touching an button), and people will be familiar with it due to other websites.

Migrating to it from react-bootstrap might take a bit of work, and of course the whole interface will look very different, but I think it will be worth it. In the process we'll get a collapsible sidepanel, and a cleaner, more self-explanatory UI structure.

• [ ] explore react-toolbox components and how to use them
• [ ] redesign the UI to use these (in practice, only the navbar and sidebars will be strongly affected)
  • [ ] "paper" design first, re-organising layouts and buttons and such
  • [ ] split out tasks as this gets more clear
• [ ] implement UI upgrade
  • [ ] split out separate tasks as they get defined

[JobLeonard]

One thing that must be fixed during this conversion, because it infuriates me: this visual bug where Canvas is set to the right pixel dimensions first, and then the browser adds the vertical scrollbar of the sidepanel, creating these blurry interference patterns on the sparklines.

[JobLeonard]

Competitor for react-toolbox: react-md. Will compare these two over the next few days before deciding which one I take.

https://react-md.mlaursen.com/components/autocompletes