Add navigation+layout buttons for mobile

[philippotto]

• Adds floating navigation buttons (see screenshot) for touch devices*. the buttons allow to:
  • toggle each sidebar
  • maximize a viewport (the one which was most recently touched)
  • navigate in the third dimension backwards/forwards (also depends on the most recently touched viewport). keeping the navigation buttons pressed moves the position continually (does not depend on the move-value at the moment, though)
• automatically collapses sidebars on narrow screens (the current threshold is 1080 pixel which is somewhat arbitrary, but loosely checked against https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide. also it works on a Mi 8 device)

Instead of detecting touch support or mobile devices, I implemented the logic so that the floating buttons appear automatically when the user uses touch as input. Conversely, the buttons are hidden again on mouse over. This should make the UX smooth even for devices where both is possible (e.g., convertible laptops). For narrow screens (se above), the floating bar is shown automatically, but will also disappear on mouse move.

URL of deployed dev instance (used for testing):

• https://mobiletracing.webknossos.xyz

Steps to test:

• open wk on your laptop and check that everything works as usual
• open wk on a tablet or mobile device and check that the floating buttons appear (either automatically or on touch; depending on screen width)
• test the floating buttons itself

Issues:

• fixes Mobile-friendly layout #7158
• fixes Navigation buttons for iPad #7159

---

(Please delete unneeded items, merge only when none are left open)

• Updated changelog
• Updated migration guide if applicable
• Updated documentation if applicable
• Adapted wk-libs python client if relevant API parts change
• Removed dev-only changes like prints and application.conf edits
• Considered common edge cases
• Needs datastore update after deployment

[philippotto]

this is not strictly necessary anymore (was a byproduct of trying to get the library use-redux-effect to work). however, I noticed that currently multiple versions of redux are referenced in yarn.lock which doesn't seem ideal (not sure whether they were included in the webpack bundle). so, I thought that pinning the version wouldn't hurt.

[daniel-wer]

Very cool! I like the simple design and thoughtful UX very much 💯

• Only thing I noticed during testing was that the viewport indicator as well as the forward/backward buttons are not implemented to properly support flight and oblique mode. I think the last active viewport is memorized and the position is adapted according to that.
  Depending on if you want to support it, the respective buttons could either be hidden, there, or the viewport button could be hidden and the forward/backward could be adapted to move in the proper w-direction according to the current rotation.

[daniel-wer]

In Slack you mentioned that this 10 * possibly should be removed

[philippotto]

I meant that the factor 10 feels fishy, but I don't think that it can be simply removed. I suspect that it's there for a reason 🤔 It was added in this PR: https://github.com/scalableminds/webknossos/pull/2070/files#diff-f1af7da1cff58c6ece76e97bdc89036a204b0e0f4ce57a201f5ff8a1b365ef43R455. Since I cannot really test the pinch-to-zoom feature, I'd leave it as is for now..