re-organize sidebar

[oalders]

Try to re-organize the sidebar

I used https://github.com/settings/profile as a sort of inspiration to follow here.

Collapse dependencies by default

On some dists these take up a huge amount of vertical space, forcing you to do a lot of scrolling to get beyond them. They are now collapsed by default following the same pattern as author information so that you can expand/collapse on demand

Make dependency section a bit easier to spot

Put the deps in a card in order to draw the eye towards them. Now that they take up less space (in some cases) we can still try to make them prominent

Install instructions was the only blue link in the sidebar

This looked a bit weird and is now consistent

Re-organize sidebar

We currently have a wall of text that makes it hard to find what you are looking for.

• Try to group links logically
• Add icons to allow the eye to find specific links quickly
• Reduce the height of the activity histogram a little. It doesn't need to be very big
• Add some subtle header lines between sections to make it easier to spot the groupings
• Add headings to search inputs, trying to solve accessibility concerns raised in Search distribution and grep distribution inputs should not rely on placeholder for name #3109
• Add more contrast to the headings, for accessibility reasons
• Lower case the section headings. Not sure why they were upper case
• Try to make sure this all looks good on mobile
• Move the release date to the "Distribution" section. Having the date on its own at the sidebar seemed a bit confusing as it was not 100% clear what the purpose of the date was

Flatten sidebar

• The sidebar had a drop shadow that was "giving 2012". This should feel a bit more modern

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.62%. Comparing base (fd0b00e) to head (7ba89b7).
⚠️ Report is 5 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3558   +/-   ##
=======================================
  Coverage   74.62%   74.62%           
=======================================
  Files          71       71           
  Lines        2463     2463           
  Branches      349      349           
=======================================
  Hits         1838     1838           
  Misses        491      491           
  Partials      134      134           

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[oalders]

These screenshots are a bit dated as I've reduced some font sizes and padding, but they do show the general organization of things.

mobile top before:

mobile top after:

mobile scroll before:

mobile scroll after:

desktop before:

desktop after: