Redesigned area page

[zarino]

Fixes #210.

I’m attempting to resolve a couple of issues with the current area page layout:

• Breaking up the "wall of text" that you currently get, especially in the Public Opinion section, where all possible data is presented in one go. Navigating such a long section is difficult. Ideally we want to hint at the depth of data available, without forcing everyone to wade through it all every time.
• Standardising how datasets are presented – this will be less space efficient, but more consistent across the page, and should hopefully make it a bit easier to pull out datasets by their name, etc, rather than datasets sometimes being hidden as lines in tables or other layouts on special "hand made" cards.
• Displaying dataset descriptions where possible, especially for ambiguous datasets like supporters/activists (which, currently, due to their layout in a table—see point 2 above!—are particularly challenging to display descriptions for).

With that in mind…

Initial page load: "featured" datasets from all four categories

• Only "featured" datasets displayed by default on pageload. Site admins can decide which datasets are "Featured" at any given time (same as they currently can).
  • Tab labelled as "Quick facts" in the screenshot below, but could call them "Featured" or "Popular" or whatever.
• Standardise almost all datasets (exceptions being some of the MP data which benefits greatly from custom handling) to be one dataset per card, and one of only a handful of card sizes / layouts, to form a nice, tidy grid.
  • I am leaning towards us presenting less detailed data, but more actionable data, where possible. See, for example, the "Air pollution" dataset in the screenshot below, where the current table of gasses/particulates, is replaced with a single "High" (or medium or low, etc) summary. My instinct is campaigners and coordinators will value the simplicity of "summarised" datasets like this, over the flexibility of the raw measurements. We may want to investigate how other complex datasets, like socio-economic status, ethnicity, and flood risk could be "summarised" into categories in this way. Ideally industry standard categories? 🤔
• Reinstated the xxl breakpoint (~1400px viewports) to give more usable horizontal space on wide screens, allowing us to comfortably display three datasets side by side.
• Clicking a tab along the top, or "More" link under each section, immediately (without a page reload) shows all datasets of that type.

Clicking a tab to drill down to all datasets in a particular category

Note, in this screenshot, how the previously visible "Fuel poverty", "Air pollution", and "Flood risk" datasets have been joined by all the other "Place" datasets, because "Place" has been selected in the tab bar at the top.

The table of socio-economic statuses is included as an example of how we’d handle large cards, alongside the smaller ones. I’m hoping that, through a combination of "small" (1 row), "medium" (2 row), and "large" (3 row) cards, and "priority" ordering (which we already have), we can give editors enough control over the position of cards within their sections to keep the layouts looking relatively good, without needing each dataset to be placed individually. Happily, grid-auto-flow: row dense does most of the hard work for us here.

Note, in this screenshot, how the table of members/supporters/activists has been broken out, so there’s one card per dataset – not only does this give us a nice automatic place to display the description of what an "activist" or "supporter" means in the context of the given dataset (in the card "footer", alongside data attribution, etc) but this also slightly disincentivises direct "comparisons" of member/supporter numbers – presenting them as separate datasets (which is what they are!) implies that they might not be directly comparable (which they aren’t!). The only downside is that, as a result, they take up more space.

[codecov]

Codecov Report

Attention: 14 lines in your changes are missing coverage. Please review.

Comparison is base (81cb336) 84.39% compared to head (fa1ffb4) 84.49%.

❗ Current head fa1ffb4 differs from pull request most recent head baf2431. Consider uploading reports for the commit baf2431 to get more accurate results

Files	Patch %	Lines
hub/views/area.py	55.17%	11 Missing and 2 partials ⚠️
hub/templatetags/hub_filters.py	66.66%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #349      +/-   ##
==========================================
+ Coverage   84.39%   84.49%   +0.09%     
==========================================
  Files          88       88              
  Lines        2691     2676      -15     
  Branches      278      271       -7     
==========================================
- Hits         2271     2261      -10     
- Misses        350      351       +1     
+ Partials       70       64       -6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.