Sidebar for New Display Package Page

[sophiamfavro]

Solution

I rearranged the information in the sidebar and got rid of Authors to match the redesign mockups. This included moving the download information to the top of the sidebar, moving report to above the tags, and adding the full stats and contact owners link to be across from their respective header. I then went into the .less files and added the necessary styling changes to match the mockups. This included rounding the owner icons, changing the color and spacing of the section headers, and changing the font size of all the text.
Here is what it looks like now:

Here is what the whole page looks like:

Testing

In order to test my changes I checked the console to make sure nothing happened to the .js file. Inspected the elements to make sure that the corrected styling was being applied to them, and made sure all of the features worked with the feature flag on and off.

[sophiamfavro]

IN PROGRESS PHASE RIGHT NOW

[agr]

Download item spacing looks uneven:

How does screen reader handle reading this information now that it is in table?

[loic-sharma]

@agr @dannyjdev Thanks for taking a look! I marked this pull request as a draft as we're still working on this. We'll let you know when this is ready for review! :)

[agr]

If the screenshot on top is still actual, we need to be a bit more consistent with spacing:

(Before I started measuring, I only noticed the ones marked in blue, so it might be enough to just fix those. Is it because the font is smaller there?)

Also, the download lines look like being pushed to the left: those are the only lines that don't have icons.

[sophiamfavro]

@agr I saw your comment so I went and double checked the spacing using edge inspect tooling. The spacing is consistent according to the developer tools, but it looks inconsistent due to the different font sizes. I will reach out to Jiachen and Maryanne to see if we can make the spacing in the downloads section smaller to make everything look more consistent.

[sophiamfavro]

@agr I saw your comment so I went and double checked the spacing using edge inspect tooling. The spacing is consistent according to the developer tools, but it looks inconsistent due to the different font sizes. I will reach out to Jiachen and Maryanne to see if we can make the spacing in the downloads section smaller to make everything look more consistent.

I checked with Jiachen and Maryanne and we decided to make the download rows margins smaller to give it a more consistent look. Everything else matches the mockups and we will update them with this change accordingly.

[zhhyu]

I am not very sure, but will it affect the package with multiple owners, and introduce more space between two owners?

[loic-sharma]

Great catch! This does add a little too much spacing between owners:

[sophiamfavro]

Thank you for catching this! I fixed the spacing so it should match the mockup and not be that far apart

[zhhyu]

I suggest to get other approvals before checking in.