Map legend cannot be closed on small screens

hotosm / fmtm

Field Mapping Tasking Manager - coordinated field mapping.

https://fmtm.hotosm.org/

GNU Affero General Public License v3.0

40 stars 44 forks source link

Map legend cannot be closed on small screens #1590

Open spwoodcock opened 3 weeks ago

spwoodcock commented 3 weeks ago

Describe the bug

If the map legend is open on a small screen, it cannot be closed (I think the close button is displayed outside the map viewport).
Once open, the legend remains open until refresh.

Expected behavior

Clicking somewhere on the screen that is not on the legend should close the legend.
This handles the case when the 'Close' button is hidden.

Screenshots

Device (please complete the following information):

Laptop 1080p
Windows
Firefox

manjitapandey commented 1 week ago

The issue is still same, If the zoom level of screen is more than 100%. I can't collapse the legend. I think we need to redesign the legend which is smaller and there is small gap between items. Currently, the legend has occupied more of map section. @spwoodcock

manjitapandey commented 1 week ago

the slightly modified legend. The gap is reduced to make it look smaller and also can we make the legend reponsive to small screen size. @NSUWAL123

NSUWAL123 commented 1 week ago

@manjitapandey, yes reducing the gap would be perfect. But I have also added a functionality to close the legend on clicking outside the legend.