Feature/al/polish - Githubissues

alexelash commented 5 years ago

Overview

Design polish pass of ISM app.

Connects #107

Demo

Screen Shot 2019-09-03 at 1 39 31 PM

Screen Shot 2019-09-03 at 3 04 10 PM

Enhance contrast of icons on the Tinicum and Wissahickon detail pages, see note Screen Shot 2019-09-03 at 3 04 22 PM

Bubble animation bubbles

Changing text color for indicators Screen Shot 2019-09-03 at 10 49 33 AM Screen Shot 2019-09-03 at 10 50 17 AM

Notes

Added a "You are here" point for the ISM location. This was in the wireframes, but I forgot to add till now.
There doesn't appear to be a ton to be done about the contrast of (i) / compass icons -> map background. They're busy satellite tiles, and making the icons black made things worse, so I just made them white and full opacity. Luckily they aren't vital for app usage.
In screenshots, you'll note that the location labels are in the wrong locations. This should be fixed in the latest published changes, I just didn't update the screenshots.

Testing Instructions (ideally on Safari/iPad)

git pull
Click through intro to enter app
On landing page note bubble animations (these should fade in)
Tap each marker to see the different sensor pages
Within each sensor page, tap List icon. You should see centered fish animations (they were sometimes right aligned)
Tap a (i) anywhere in the app to see the newly styled map links

caseycesari commented 5 years ago

Looking good. I noticed two things when testing on my 9.7" iPad Pro. Not sure if these are an issue on a larger iPad, like the one this app will be deployed too.

First, the fish in the sensor overview pane are out of alignment. They fix themselves if I open the devtools are otherwise resize the browser.

Second, the map attribution icons collide slightly with each other and the sensor overview side panel.

Image-1 (1)

alexelash commented 5 years ago

@caseycesari I will check if the second issue is a problem on my iPad.

For the first issue on the detail page, I noticed that the animations weren't running at all whenever the layout got messed like that. I googled a bit, and found a potential solution that seems to be working consistently—I put a tiny delay on all animations that fire on page load. Could you check and see if you are still seeing this as of b289032?

caseycesari commented 5 years ago

@alexelash That seems to have fixed it! Nice work.

alexelash commented 5 years ago

@caseycesari Tested on an iPad as discussed offline:

Layout issues aren't a problem on a 13in
Noted some other small details that I fixed

azavea / ism-watershed-wellness-snapshot

Feature/al/polish #115

Overview

Demo

Notes

Testing Instructions (ideally on Safari/iPad)