Through Touchpoints and individual conversations we've heard that users can get stuck scrolling the radar when they want to scroll the page on mobile devices. This is because the radar and the site both allow scrolling, and the map can takes up the entire screen at certain points. To resolve the issue we've decided to:
Change the starting height (and thereby the aspect ratio)
Note that there is currently no USWDS icon for map zoom-in, only zoom-out. I've created the icon we should use in the expanded state (the collapse/zoom-in icon).
Acceptance Criteria
[ ] On mobile the map takes up the full container width, and starts with an aspect ratio of 6/4 (width/height)
[ ] On mobile the map takes up the full container width and expands to an aspect ratio of 3/4
[ ] On tablet+ the starting ratio is 3/2.
[ ] On tablet+ the expanded ratio is 1/1
[ ] The tablet+ width of map stays as is now – taking up the full container on tablet, and limited to 8 columns on tablet-lg.
[ ] The expand/collapse button follows the styling for the different states outline in the documentation
Description
Through Touchpoints and individual conversations we've heard that users can get stuck scrolling the radar when they want to scroll the page on mobile devices. This is because the radar and the site both allow scrolling, and the map can takes up the entire screen at certain points. To resolve the issue we've decided to:
Figma Prototype
Documentation
Note that there is currently no USWDS icon for map zoom-in, only zoom-out. I've created the icon we should use in the expanded state (the collapse/zoom-in icon).
Acceptance Criteria