Improve mobile layout

[wcedmisten]

Closes https://github.com/gis-ops/valhalla-app/issues/15

Improves the layout to be a bit more mobile friendly.

Minor regression: the drawer takes up the entire vertical space, which obscures part of the map on desktop. I tried fixing this by adding height: undefined to the style, but this broke the ability to scroll when the content expands past the screen.

Changes

• use drawer for "Directions/Isochrones" modal
• use drawer for the settings modal
• don't show the settings page by default
• adds close button for the Directions/Isochrones drawer, allowing user to see the whole map
• adds a button to open the Directions/Isochrones drawer from the map view

You can also view a demo of this (only on North America) at https://map-demo.wcedmisten.dev, if you want to check it out on a true mobile device.

Desktop Layout

Mobile layout

Sorry the commit history is a bit ugly because I had to revert the changes from my fork.

[nilsnolde]

Wow, that's great! Thanks so much @wcedmisten ! We didn't have much time lately to care about this repo. I think this is a great start! I tried it on an iPhone 11 Pro and it looks really good. On Desktop it could be better I guess, but I'd argue it was worse before, now at least it's hideable sidebars.

There's one more smaller thing I'd do (nothing related to your PR):

The button group on the upper right: I think it's a weird arrangement, the settings button should be more prominent. IMO the settings button should be as big as the profile buttons and the "reset all" & "add via" buttons could be in the row below all locations. Then there's a bit more space in that row. Also, the settings button could be highlighted somehow, as that's hiding the whole meat of Valhalla.

What do you think @wcedmisten ? No problem if you'd like to skip that, can always do it in a later PR. Honestly this is great. We're about to apply for a renewal of the funding for the servers, so it's a great timing:)

[wcedmisten]

Thanks for the feedback! I went ahead and implemented the changes you suggested. It looked a little weird just having the reset/add buttons alone in the next row, so I moved them to the bottom for Directions and next to the search bar for Isochrones.