WikiWatershed / model-my-watershed

The web application front end for Model My Watershed.
https://modelmywatershed.org
Apache License 2.0
57 stars 31 forks source link

Maintain sidebar and map proportions in embedded version of MMW #3365

Open dboyer opened 4 years ago

dboyer commented 4 years ago

Please move to another repo if this is in the wrong place.

Concord added a collapsible left panel for student instructions and questions.

image (12)

They reported: When we bring up the Model my Watershed app on smaller screens, the information panel on the left side stays the same size and makes the working area of the map much smaller (see attached). Is there a way on your end or on our platform side to maintain proportions of the left panel and the map area?

image (13)

rajadain commented 4 years ago

The sidebar is used for many things in MMW, not just this simple list of draw tools, many of which are complex layouts:

image

image

image

all of which depend on the dimensions of the sidebar. Making it narrower would involve moving many of these pieces around, and would be a large undertaking.

One thing we could do is make the "hide sidebar" button:

image

somehow more accessible. In the screenshots above, we see that it is obscured by the layer selector.

One approach may be to move it to the top-left corner of the map, which is currently empty, and would not be obscured. Another way may be to only do it for significantly narrow screens, keeping it in place for everyone else. Another way may be to add a second button, visible only in narrow screens, to hide the sidebar.

Toggling the sidebar to show and hide it is the best we can do in the short term. Adjusting the sidebar for narrower widths would involve redesigning dozens of screens and would be a large, complex undertaking.

dboyer commented 4 years ago

Thanks for the info. Agreed that adjusting the sidebar for narrower widths is not within the budget/timeframe we have. I'll pass on info about the hide sidebar button, but I don't think there is anything else to do on this issue for now.