[ WIP - DO NOT MERGE ] - Update styles to reflect new theme

[timhitchins]

NOTE THIS IS A WIP AND BEING ACTIVELY DEVELOPED - DO NOT MERGE

This updates many of styles to reflect @bretthalperin's designs. Updates were made to:

• titlebox
• search bar
• layer controller
• map layers styles (all layers)

In the process, an update was made to the titlebox that will require a translation for the i18n elements labeled data-i18n="titlebox.submit". At the moment only english is included. cc @unixjazz

Lastly, some minor clean up was done.

cc @djbusstop @jimboweb @erinmcel

[brett-halperin]

@timhitchins @djbusstop thanks again for all these changes! can we enlarge the header/title in the short term (~+4 px?) and change it to a non-google font whenever possible? I was hoping to use this font for the title: https://fontsgeek.com/fonts/Harbour-Regular and set that as the first font, and then we can set a second one (perhaps the one now if it looks better bigger) for corner cases when it does not work for whatever reason.

To use non-google fonts, it just requires downloading it and writing it in CSS. I have done it before, and I believe the snapshot below is how I did it for my own website with a font called 'dumb nerd' and then set Helvetica as the second one.

[timhitchins]

@bretthalperin @djbusstop Perhaps we can add these plus other styling changes that Brett pointed out in Slack to this PR. I can work on them today.

[clhenrick]

Wow this is looking pretty great with the dark basemap! My only suggestion would be to invert the color scheme for the tenant protections, e.g. make the lightest grey indicate "strong / many protections" and the darkest grey indicate "weak / few protections". The rationale is that when using a dark basemap lighter colors on top will pop while darker colors will recede, and when using color in data visualization for an ordinal / ranked color scheme the color with the most contrast is typically associated with the strongest / highest ranked value. Just a suggestion, feel free to take or leave it. cc @bretthalperin @timhitchins @djbusstop

[timhitchins]

That is a good point @clhenrick . Thanks!

[brett-halperin]

Wow this is looking pretty great with the dark basemap! My only suggestion would be to invert the color scheme for the tenant protections, e.g. make the lightest grey indicate "strong / many protections" and the darkest grey indicate "weak / few protections". The rationale is that when using a dark basemap lighter colors on top will pop while darker colors will recede, and when using color in data visualization for an ordinal / ranked color scheme the color with the most contrast is typically associated with the strongest / highest ranked value. Just a suggestion, feel free to take or leave it. cc @bretthalperin @timhitchins @djbusstop

Thanks @clhenrick - I agree that would be a good call to adhere to conventions in this case, thanks for pointing that out. I had a similar thought because the no data regions are black, and I feel like the reverse color scheme would make more sense with that. I user tested it today and got a lot of interesting findings that I hope to discuss Monday.

[brett-halperin]

I did some testing and plan to talk more about findings on Monday (a lot of positive and constructive feedback). Some long-term fixes to consider, but I was wondering if it were a quick fix to add a hover state to the polygons? People have struggled to make sense of what is clickable (and what isn't). A hover state would help address this by signifying the interactive affordance - could we decrease opacity of polygons by 50% (maybe more) for visual effect?

@djbusstop @timhitchins

[clhenrick]

@bretthalperin IMO reducing the opacity would make the element more difficult to see on the dark basemap and I think what would be a better UX is for the element to standout more when hovered over. One way of doing that could be to apply a white (or other light well contrasted non-grey color) solid opaque border to the element being hovered on. Or maybe make the element 100% opaque as they all already have an opacity value applied to them by default. Or do both.

More of a technical thing but hover states in SVG are a bit tricky due to how browsers handle SVG elements (which is how the protections layers are being rendered on the map). If you don't change the stacking order when applying a hover style then the element may be partially obscured by all other elements on top of it. This mostly applies to polygons where the borders of polygons stacked on top of the polygon being hovered over will obscure it. The way to solve this is to use JavaScript to bring the hovered polygon to the top of the stacking order. Leaflet may have a built in way to handle this but I'm not 100% certain.

[jimboweb]

Sorry I haven't looked at this yet I've been mostly on vacation and not paying much attention. A question/observation is that in in the mobile version:

• there is no search bar
• there is no window to check/uncheck the protections you want to view Are these things on purpose? Are we working toward adding them?

[jimboweb]

I am also curious about the thinking behind the black-on-dark-grey of countries that aren't highlighted with a protection. When national protections are turned off it makes the map look almost all-black and seems like it wouldn't be accessible. Maybe the oceans could be a lighter grey?

[brett-halperin]

@clhenrick we changed the elements to make them 95% opaque, so that is why I was thinking reduce opacity for visual effect. I also saw an example of this on another map that looked really nice - but it was not on a dark basemap and did not have layers stacked (e.g., states on nations), so it might not work as well for us. Maybe a red fill or border would work because polygons already have white borders, and some are filled white. It is hard to know without seeing it, so I would maybe like to test a few options, if this is all feasible from a development standpoint. I think this is a high priority item because not only is it a convention to signify the participatory affordance, but it also relates to a problem that is exacerbated by the zoom and information overload. I found that when users make it to their local housing justice action data, they are so far zoomed in and focused on the information that clicking on the grey landscape is not an intuitive interaction as it currently stands. Maybe adjusting the zoom would help, but if the development is not too bad, then this would really help the UX overall.

@jimboweb the search bar was broken on mobile, so we temporarily hid it and hope to put it back soon when it functions. (Side note: it works great on web, and users find it essential). I would also like to add the check boxes on mobile when we can. Regarding the basemap/colors, I can talk more about the thinking behind it via Zoom because there are many different reasons. In terms of the layers, I am still trying to determine what layers should be on at first because the users tend to roll with default settings, so we want to get it right within constraints of usability, loading, etc. You make a good point about Nations - maybe they should be on as a default setting. I think it is okay if once Nations are turned off that the map is underwhelming because users get the system feedback that their interaction triggered it. One thing that I would also like to add is a hover effect, where if a user hovers over a landscape with no data, then it says "no data available" and possibly the country. Again, not sure how big of a lift that is (and I have a whole list of items :), so hope to discuss Monday!

[jimboweb]

@bretthalperin Regarding the broken search bar, are you talking about issues 114 & 115? I think I fixed that with a styling change that's in pr right now.

[timhitchins]

Hi @unixjazz just tagging you to this PR to include the translations. Thanks!! LMK if you have questions.

[timhitchins]

Awesome @jimboweb ! One last thing I noticed is that the infowindow that appears after the geocoder returns results is missing the title that appears when you click on a polygon.

this vs this when clicking

[timhitchins]

Also I merged #117 that has all the style updates.