Styled header/subtitles and "sensors"

[alexelash]

Overview

This PR addresses the need to style metrics, headers/subtitles, and the "sensors" page suggested in issue #24.

To do make these changes, I also added an assets/ folder that contains League Gothic Condensed (an open source typeface that resembles the one used elsewhere in the application) and two illustration options for the Sensors page.

Screenshots

Turbidity with reading from the Schuylkill

Turbidity with reading from the Delaware

Turbidity with no sensor reading

Sensor (option 1)

Sensor (option 2)

Notes

• Working with Scott and Arianna, we shortened the text down for each screen.
• To style the Sensors page, I tried to use the if(!metric) statement within window.onload in order to give the page's .container a class name of "sensor". Please let me know if this was a bad way to do this!
• I'm not sure if I need all of the fallbacks I included in my @font-face declaration.
• If neither illustration fit what you imagined for Sensors, please let me know, @ajrobbins!

Testing

• Get this branch, then server
• Load the spokes without making any changes and verify that you see data for the Schuylkill and appropriate headers and subscripts
• Drop .usgs from the PRIMARY_SENSOR_URL constant, then refresh the app. visit the spokes and verify that you see the values, headers, and subscripts from the Delaware River.
• Drop .usgs from the BACKUP_SENSOR_URL const, refresh the app, then visit the spokes again. Verify that you see the fallback values and text.
• Switch out the illustration being used by changing background-image: url("assets/Sensor_Illustration_opt2.png"); to background-image: url("assets/Sensor_Illustration_opt1.png");
  `

[ajrobbins]

I love the styling on the metrics (top three screenshots). I'm sending the images to the client for feedback on text.

For the sensors illustration, I like option 1 but think the line brightness and weight (as perceived on my laptop) clash a bit with the rest of the graphic outside. Can you reduce the opacity or otherwise de-emphasize the lines?

[alexelash]

@ajrobbins Sounds good! I'll keep working on option 1 per your suggestions and post a screenshot of it here for more feedback.

[alexelash]

@ajrobbins Is this any better?

or

[alexelash]

Newest Illustration in context:

[kellyi]

Taking a look at this!

[kellyi]

It looks like the #sensor-data:after line's being drawn before the data returns, so it seems to show up at the top of the div before moving to the center when the number and subscript come back; read up on :after and since the div exists on loading the page, it looks like it's drawing the line immediately after the empty div.

Is there some good way to have it hidden initially and then to unhide it when writing data to the document here?: https://github.com/azavea/pwd-river-dispatches/blob/develop/usgs-details.html#L211

[kellyi]

This seems like it works well! I was able to load and unload the different spokes and this shows up only when the sensor spoke's selected.

I wonder if it'd make sense to give the container div above a unique string like sensor-data-container for its id attribute so that we could use something like

var container = documentGetElementById('sensor-data-container');
container.setAttribute('name', 'sensor');

to get the single element and then not have to use the array index here.

[alexelash]

That makes sense! I'm not super sure how to go about doing that (my javascript skills are that I can mostly read it, haha) so the revisions to the commit I put up won't include that.

[kellyi]

Sounds good! I tested this out and it works as is.

[kellyi]

There are few extra lines of whitespace here, plus one on 309. We usually try to avoid committing extra whitespace, so it may be worth dropping the extra lines in a fixup commit.

[kellyi]

Here's a screenshot of the horizontal line thing; it shows up while the request is being made/before there's new data to display:

[kellyi]

Looks like the :after line might be showing up at the top of the sensor illustration, too:

Wonder if we should just hide that div altogether for the illustration spoke.

[kellyi]

Primary, backup, and fallback value's displaying correctly with the new styles!

[alexelash]

@kellyi I hopefully got rid of all of the areas with unnecessary whitespace. To hide the white line unless sensor data has loaded, I'm checking whether or the div has any content yet using :not(:empty).

[ajrobbins]

Victoria likes the design and language on the metric displays! Called them "legible and simple". Now I'm just checking with her on the sensor illustration.

[ajrobbins]

Accidentally hit the "close and comment" button instead of "comment", apologies.

[ajrobbins]

Victoria says the illustration is "spot-on". Nice job, @alexelash

[kellyi]

+1. Nice job with this!