Make the UI mobile-friendly

[neverstew]

This wonderful little tool isn't that accessible from a mobile device. The elements are poorly sized and arranged, making them difficult to use.

At a cursory glance, this should only require CSS changes and a few minor tweaks to JS files for revealing/hiding elements.

[1000i100]

Do you feel the play mode isn't mobile friendly ? Or only the edit mode ?

[neverstew]

Hey @1000i100, thanks for the reply!

It's been a while so I've just had another play around with it to try and provide some more concrete examples for you... Here's a couple of the major symptoms:

• The sidebar doesn't scale well to small screens. All of the elements contained within become extremely small which a) makes them difficult to read and b) makes them difficult to interact with.
• Autofocus on the sidebar fields can (in some browsers e.g. firefox) mean an automatic scroll/zoom to that field. Coupling this with the problem above and the fact that zooming in/out is only available in the sidebar section, you end up with quite a difficult screen to navigate around.

This all stems from, I believe, two issues:

1. The sidebar is fixed.
2. You cannot zoom with pinch gestures in the main canvas.

If the sidebar made better use of the screen by, for example, sliding in across the entire screen and being dismissable, then I believe the bulk of these issues would be solved.

There is a separate case to be made about allowing the whole canvas to be resizable as I believe this affects both desktop and mobile - though this would greatly benefit a mobile user where there is less space to fit in nodes/edges. I think this is covered by #6

[1000i100]

https://1000i100.github.io/loopy/2/

is it better now ?

You still cannot zoom with pinch gestures in the main canvas, but for other mobile disagreement, is-it fixed ?

[neverstew]

A great start!

It seems that the toggle to close the menu doesn't quite work as expected, but other than that this would be a good improvement to merge in.

The issue I found:

1. Draw some nodes
2. Select a node (the menu appears)
3. Select the arrow to close the menu

Expected: the menu to close.
Actual: the menu stays open. Another click of the arrow closes it.

Maybe just some state not toggling properly?