Maximize Minimize Button for hiding route information

[mpmckenna8]

One thing I find annoying about google maps when getting directions, especially on mobile is that there's often no clear way to toggle between the mapview and all of the map options. Especially while out using the routing feature. I think just having a nice max min button to hide and show all the stuff would be nice and make this usable even before turn by turn directions are added.

See https://mpmckenna8.github.io/mapbox-maps/ and enter a route to see an example of what I was thinking.

[benjamintd]

Nice prototype!

While i've tried to make this project mobile-friendly it's hard to accomodate for all screen sizes. Maps on mobile are much more complex (users expect turn by turn navigation, etc) so I want to focus on making this a great tool for the web in priority.

Do you think we can fix that problem by hiding some elements by default on small screens, using css?

[mpmckenna8]

We could totally do that in the css. But it would also be possible to conditionally render stuff in the jsx based on window properties. And With tiling being increasingly popular with desktop users it's a good idea to have conditional styling anyway I think. That should be a easy first pull request where you can tell me if I did anything wrong too, so don't implement that yourself super soon. I'll try and have at least an area for small screen styling in the css by the end of the week.

[mpmckenna8]

So I wasn't totally sure what to try to make hide by default on small screens. I think if we really try to use the mapbox css class thing (https://www.mapbox.com/assembly/) then it should do a lot of the conditional styling for us.

But if you know some of the elements you think should be hidden on a small screen let me know. I guess maybe the scale isn't super necessary but it doesn't really get in the way.