Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Table Styling (esp. on mobile) #246

Closed
skipjack opened this issue Oct 14, 2016 · 13 comments
Closed

Fix Table Styling (esp. on mobile) #246

skipjack opened this issue Oct 14, 2016 · 13 comments

Comments

@skipjack
Copy link
Collaborator

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
Copy link
Collaborator

NejcZdovc commented Oct 16, 2016

I would do something like this:

Desktop

image

Mobile

image

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)

image

2. Proposal - Navigation top

image

@pksjce
Copy link

pksjce commented Oct 16, 2016

@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?
screen shot 2016-10-16 at 3 35 59 pm
screen shot 2016-10-16 at 3 36 08 pm

@NejcZdovc
Copy link
Collaborator

NejcZdovc commented Oct 16, 2016

@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

image

When is around 850px

image

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.

image

@NejcZdovc
Copy link
Collaborator

NejcZdovc commented Oct 16, 2016

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

@skipjack
Copy link
Collaborator Author

skipjack commented Oct 16, 2016

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
Copy link
Member

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 skipjack added the UI/UX label Oct 29, 2016
@bebraw bebraw added this to the webpack 2 Post-release Milestone milestone Nov 23, 2016
@skipjack
Copy link
Collaborator Author

skipjack commented Jan 31, 2017

Semi-related PR - #440.

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

image

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
Copy link
Collaborator

@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
Copy link
Collaborator Author

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

@NejcZdovc
Copy link
Collaborator

Then you can assign this issue to me

@skipjack skipjack assigned skipjack and unassigned skipjack Jan 31, 2017
@skipjack
Copy link
Collaborator Author

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

@NejcZdovc
Copy link
Collaborator

Accepted, thank you

@skipjack
Copy link
Collaborator Author

skipjack commented Feb 13, 2017

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.

skipjack added a commit to NejcZdovc/webpack.js.org that referenced this issue Feb 15, 2017
skipjack added a commit to NejcZdovc/webpack.js.org that referenced this issue Feb 15, 2017
skipjack added a commit that referenced this issue Feb 15, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants