Nodejs.dev: Feature: Downloads table

[benhalverson]

Summary

We need a downloads table to go along with #547
See https://staging.nodejs.dev/547/
Note that this was done when the staging branch was active still so we need to somehow get that code that @saulonunesdev started over to the master branch

https://www.figma.com/file/lOxAGGg5KXb6nwie7zXkz6/NJ-Design-System?node-id=0%3A1652
Here's the figma section on one possible way of doing it.

[jemjam]

Ah, I see: so the context here is that pull request #547 builds a bunch of the download page, but we need a more elegant way to display the downloads than just the list of links displayed. Do I have that right? I would love to help (just getting oriented to the requirements here).

Note that this was done when the staging branch was active still so we need to somehow get that code that @saulonunesdev started over to the master branch

Little confused what you meant by this part?

[benhalverson]

Yes the first part is finished which is depending on your OS the box at the top is autoselected and the user can quickly download the installer. The finished page should look something like. https://www.figma.com/proto/lOxAGGg5KXb6nwie7zXkz6/NJ-Design-System?node-id=1373%3A791&scaling=min-zoom

The bottom half is a table of data about Node that is completely unstyled.

What I mean about the staging branch is way back in March and earlier the feature development branch for this repo was the staging branch. So this PR is based on that branch. If we try to merge as it is, we will probably have lots of conflicts and old code. I spoke with Saulo earlier tonight and he said he would update / create a new PR with his changes in his morning.

[Mhmdabed11]

I can help with this !

[jemjam]

Gravy. I'm definitely on board for this also.

I think I noticed a few visual inconsistencies with how the OS box displayed for me (firefox?), if I can reliably repro I'll post a fix (or at least update an issue).

[marcustisater]

@jemjam @Mhmdabed11 would you guys want to pair up and work on this together?

I added some initial styling, here is the PR

If you look at the table design in figma there is a margin above each table row. I am having trouble adding it bc border-collapse:separate would remove borders and I can't find any other "hack".

Styling:

• [ ] Add spacing to table rows
• [ ] Responsive styling
• [ ] Add hover style for table row

And then there is a filter and pagination. Is this included in this issue @benhalverson? 👍

[benhalverson]

No
I think for a first PR we should focus on the styling and can add functionality in additional PR’s

[alexandriaroberts]

Hey @marcustisater , I can work on this one. Would you like to do it together or shall I go ahead and start working on it? 🙂

[marcustisater]

@alexandriaroberts go for it, unfortunately, I am busy with other stuff at the moment. Feel free to ask me if you have any questions. As you see there are some basic styling added already to the table so try to make it responsive and also as designed in figma. 👍

[benhalverson]

You can see what the table currently looks like here. https://nodejs.dev/download/

[JohnPhamous]

@alexandriaroberts Have you started working on adding the styles? If not I can start.