Fix Table Styling (esp. on mobile)

[skipjack]

As mentioned in #244, we need to figure out a way to better handle markdown tables.

I'm pushing a quick fix in 6a95c83 to #225 but if others have better ideas please discuss here.

[NejcZdovc]

I would do something like this:

Desktop

Mobile

Other improment

One thing that can maybe improve table also on desktop. On page we have a lot of tables with very important data (API properties). We lose 260px with a side bar on the side. What if we move it to the top of the page or go full out mobile approach. Also increase max-width of the content to 1200px from 1024px (Users have bigger screens now 24" and 27").

1. Proposal - Mobile first approach (based on #254)

2. Proposal - Navigation top

[pksjce]

@NejcZdovc - This is the problem table that @skipjack is trying to fix.
Its a table of how values in resolve.alias are resolved in relative and module path requires.
Can you think of some alternate way to show this data?

[NejcZdovc]

@pksjce My suggestion is that we move side menu out, so that we have a lot more space. Also set max-width to the 1200px from 1024px. For mobile we create alternative table (almost the same HTML as now, just some CSS magic).

When your screen is bigger then 1200px

When is around 850px

Bellow 768px

I would show alternative table as I posted in my previous post. So we change table into alternative table with column name on the left and value on the right.

[NejcZdovc]

We can play around with break points when should we move to the alternative table.

[skipjack]

What if we move it to the top of the page or go full out mobile approach. Also increase max-width of the content to 1200px from 1024px (Users have bigger screens now 24" and 27").

Personally I think keeping the Sidebar on the side is better, however we are planning to make it sticky so the user can always navigate despite where they are on the page. Maybe we have one bigger breakpoint than the current large one but honestly I think it's fine the way it is right now. For readability I think keeping all content at a max width of about 90 - 95 characters is best (see #191).

Showing the donate link on smaller screens isn't a bad idea though. For the tables I was thinking something more along the lines of making the first column fixed or something so they're more approachable on mobile screens (a fixed first column might also help on desktop's for the bigger tables). The only problem with fixing the first column is that we'd have to hack how the html for tables is rendered in the markdown.js utility. Here's a CSS Tricks Article that has a few other approaches including one that doesn't require changing the markup.

I don't think the tables on desktops are as big of a problem, in fact the scrolling fix I added might be enough for now. I think we should be careful not to drastically change the layout just to accommodate a few tables. We should also consider whether using a table, especially a long table, in certain contexts is even the best approach in the first place.

[SpaceK33z]

I think it's fine the way it is right now. For readability I think keeping all content at a max width of about 90 - 95 characters is best (see #191).

Agreed completely, this is very important for readability.

[skipjack]

Semi-related PR - #440.

@NejcZdovc looking at your "alternative table" suggestion again:

I realize this is somewhat similar to what the CSS Tricks Article suggests. That seems like a it would be the best approach for sure. Feel free to PR if you're still interested.

[NejcZdovc]

@skipjack sure I can tackle this, but only in few days, right now I need to finish some things. Is this ok, if not you are more then welcome to take it?

[skipjack]

Yep that'd be great, take your time... definitely plenty of other ones I can work on resolving.

[NejcZdovc]

Then you can assign this issue to me

[skipjack]

Yep, once you accept the collaborator invite I sent, I can assign you.

[NejcZdovc]

Accepted, thank you

[skipjack]

Another good roundup of different approaches that I found while reviewing #875. Though even with that whole list there's not one that jumps out to me as a clear winner.

@NejcZdovc in the process of looking through #875 and #440 now.