-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
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
Comments
I would do something like this: DesktopMobileOther impromentOne 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 |
@NejcZdovc - This is the problem table that @skipjack is trying to fix. |
@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 1200pxWhen is around 850pxBellow 768pxI 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. |
We can play around with break points when should we move to the alternative table. |
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 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 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. |
Agreed completely, this is very important for readability. |
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. |
@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? |
Yep that'd be great, take your time... definitely plenty of other ones I can work on resolving. |
Then you can assign this issue to me |
Yep, once you accept the collaborator invite I sent, I can assign you. |
Accepted, thank you |
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. |
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.
The text was updated successfully, but these errors were encountered: