Category dashboard with collapsible filters

[sarahfossheim]

New features

• New compact header only used on the tech report pages
• Sidebar with filters, instead of big card on top of the page
• Prototype of the categories page:
  • Category level summary: number of origins and number of technologies within a category
  • Table with summarising info on all techs within that category
  • Possibility to click through to a specific tech, or compare multiple (or all) technologies within the tech
  • Prototype sortable table functionality (not in the UI yet)
  • /reports/techreport/category
• Only one view for both drilldown and comparison view
  • Add more technologies to compare in the sidebar
  • New template loads depending on the amount of techs selected
  • See /reports/techreport/tech

(Visual) Improvements

• Made clickable area in the landing page cards clickable (Tech Report: Minor Visual Recommendations #990)
• Responsive menu, turning into a dropdown on mobile (+ updating aria-expanded)
• When there are multiple technologies in the filter, they become numbered (same for the remove button alt texts)
• Comparison table now shows Overall Good CWVs as a percentage (Tech Report: Overall good CWV vs Origins mismatch #991)
• Removed or replaced placeholder texts (Tech Report: Replace placeholder text #995)
• Limited amount of categories displayed in the category description (Tech Report: truncate category tags #978)

Bugfixes

• Updates to the responsiveness/zoom (more improvements to come in future PR)
• The placeholder bright yellow color used for debugging WordPress line changed to color with enough contrast
• Updated copywriting for some section (more improvements to come in future PR)
• Fixed keyboard order for the points on comparison graphs (it was reversed)
• Geo & Rank are remembered between categories and technology dashboard
• Sort table alternatives from recent to old (Tech Report: The table data is not sorted #996)

---

Screenshots

Technologies

One technology

Multiple technologies

Desktop

Mobile

Categories

[rviscomi]

Staged here and left a bunch of feedback: https://technology-report-dot-httparchive.uk.r.appspot.com/reports/techreport/category?geo=ALL&rank=ALL&category=CMS

I had to patch one bug to get it to work (the fix is in one of the comment suggestions) but otherwise these are all just feature requests. Great work!

[rviscomi]

I was able to work around the error below by filtering out empty arrays before sorting. Not sure if it's the best fix though.

Suggested change

	this.dataArray = this.dataArray.sort((techA, techB) => {
	this.dataArray = this.dataArray.filter(tech => tech.length).sort((techA, techB) => {

[sarahfossheim]

@rviscomi - I made a lot of updates based on the feedback you left, and created follow-up action items for the larger todos (sorting of the table f.ex) so those can go in a follow-up PR. Also fixed a few other things at the same time, like removing/replacing the placeholder texts and making the navigation responsive (hamburger menu).

So it's ready for re-review :)

[tunetheweb]

OK I think this is good to merge!