Make map size dynamic and eliminate scrolling on iPad

caseycesari commented 5 years ago

Overview

This is a joint effort by @alexelash and I.

There are two main changes here to fix the issues described in #55:

The height and width properties of the map component are removed from the redux state. Even though react-map-gl supports using strings to specify the map size (like 100% or 100vw), when we did use string values, they were overridden with the pixel values of the rendered map size. It is unclear why this was happening, however it was an easy change to remove these values from the state and specify them as props directly to the component.
The CSS rules for the layout and map are revised to better support a full-screen map on the iPad.

Also, the react-map-gl library is updated in here in hopes that it would fix the issue. It didn't appear to help, but some bug fixes were incorporated in the new version.

Connects #55

Demo

(This hard to take a screenshot of, and is best demoed on the iPad)

Testing Instructions

Visit the preview site on an iPad, and verify that app is no longer scrollable. Specifically try scrolling from dragging within the footer.

fungjj92 commented 5 years ago

Also, the Delaware sensor is breaking on the similator, but not my computer's web browser, with this error. Possibly simulator issue too? Ignore that shortcuts modal that keeps popping up with I screenshot.

caseycesari commented 5 years ago

I'm not able to reproduce the missing "back to map" button in the simulator, but I did get the Delaware sensor error. I'll try to reproduce both issues on a real iPad shortly.

caseycesari commented 5 years ago

Got the Delaware error on Safari on my Macbook. Going to open up a new issue.

caseycesari commented 5 years ago

Can't reproduce the missing button on a real iPad. Hoping it was a fluke. Going to merge. Thanks for the review.

azavea / ism-watershed-wellness-snapshot