Update layout file details page to improve overall design/usability

[miketheman]

I'd like to make some changes to the layout of this page (see image below) to improve overall design/usability.

For reference, these are the changes I am proposing:

Originally posted by @nlhkabu in #15087 (comment)

[miketheman]

Adding my 2 cents:

Looking at a project page with a single wheel - a lot of visual space is taken up with these selectors, so many we add a qualifier and only render the selectors if there's more than a single file?

[nlhkabu]

Yes, I agree @miketheman

The other concern I have is changing the link to point to the file detail page and adding a download button to download the file.

This is a change from the current UI where the blue underlined link directly downloads the file, and a user must click on "view details" to see the file information.

Here is an alternative design I've been playing with:

I feel this is more explicit, but it does require the user to make an additional click.

[merwok]

Could we add here

• update browser URL with filters from selects as they are selected (suggested by Mike on the PR)
  • (remove now unneeded copy button, people can copy current URL with the normal ways afforded by their browser)
• in the selects, use pretty tags as labels (keep cp33 as value, but display CPython 3.3, matching the badges shown in the list)

only render the selectors if there's more than a single file

or more than 5 say? it’s not a big need to filter 3 items 🙂

[merwok]

I also noticed the text uploaded {date} is not marked for translation.

[webknjaz]

Looking at a project page with a single wheel - a lot of visual space is taken up with these selectors, so many we add a qualifier and only render the selectors if there's more than a single file?

@miketheman oh, I haven't seen this discussion and filed #18796.

Feel free to incorporate my issue into this. It's effectively the same sentiment.

[nlhkabu]

Help wanted on PR: Improve download files page layout #18741