iD icon indicating copy to clipboard operation
iD copied to clipboard

Collapse sidebar on narrow screens

Open waldyrious opened this issue 2 years ago • 2 comments

Description

When opening iD in a device with a narrow screen, the sidebar appears automatically even though it is empty, occupying precious real estate:

Screen Shot 2023-08-05 at 02 08 28

IMO it should automatically be loaded in the collapsed state when the container is narrow:

Screen Shot 2023-08-05 at 02 10 13

As an example of existing behavior that matches the expectation, the toolbar buttons already adopt a more compact display in narrower screens by omitting the labels and showing just the icons, which IMO is sensible behavior:

Wide screen Narrow screen
image image

I would gladly contribute a PR making the sidebar also auto-collapse in narrow screens, if there's agreement that this is desirable, and if I can get some guidance on how to do it — I suppose one needs to do something like, say selection.classed('collapsed', containerWidth < 600); (or whatever pixel width we consider narrow enough) somewhere when initializing the sidebar?

waldyrious avatar Aug 05 '23 01:08 waldyrious

Hello !! I think my PR will be able to solve the issue !!

AviralSingh-code avatar Sep 25 '23 14:09 AviralSingh-code

It could be confusing for users when the sidebar is (sometimes) completely collapsed: In order to edit the properties one must now, after selecting the feature, also click on the top-left button to open the sidebar again.

I think it would be better to revisit the UI concept from #7496: essentially just removing the gray search box as long as no search results are to be displayed (and no OSM feature is selected) should make the map much more usable on narrow screens.

tyrasd avatar Jun 03 '25 08:06 tyrasd