[HN Gopher] A table that looks good on mobile and desktop
___________________________________________________________________
A table that looks good on mobile and desktop
Author : andrewfromx
Score : 34 points
Date : 2023-07-05 19:29 UTC (3 hours ago)
(HTM) web link (many.pw)
(TXT) w3m dump (many.pw)
| putzdown wrote:
| This would be more convincing if the table looked good on mobile.
| On iOS, anyway, it is too wide for the page and wants horizontal
| scrolling to read the full title and table.
| noman-land wrote:
| Same here on Firefox Android.
| andrewfromx wrote:
| ok if you refresh, I think I fixed the issue with horizontal
| scroll. It was the <pre> tags for the code samples.
| metaphor wrote:
| No thanks. If I need to review a table on mobile, I still much
| prefer just rotating to landscape, which mobile handles quite
| well. This very opinionated implementation forces me to switch to
| desktop mode and rotate to landscape when reaching for pragmatic
| utility. Surely there's a reasonable usecase, but I really can't
| think of any tabular data that I regularly review where
| "tranpose-serialize" would result in a net positive UX.
| supercheetah wrote:
| I'm not sure what mobile you're using, but on Firefox Mobile on
| Android, if I rotate it to landscape, the tables turn into
| regular tables like in desktop mode, but I didn't have to
| change to desktop mode.
| xnx wrote:
| Full-width tables require extra eye scanning. Auto-width is
| better most of the time.
|
| I don't mind having to scroll a table if it doesn't fit in the
| view. Scrolling is better than trying to mentally piece together
| the rows and columns.
|
| As in a lot of areas, less fussing with styles/CSS is better.
| LeifCarrotson wrote:
| It completely depends on what you want to do with the
| information in the table.
|
| Yeah, it's marginally more strain on your eyeballs to track
| some 30 degrees across your field of view than glancing back
| and forth, but that only matters if you're reading every single
| value from left to right, row by row. It's extremely common to
| want to also compare values from top to bottom, column by
| column - or even just one particular column, known only to the
| reader. That's the whole point of a 2D table.
|
| It's one thing for an e-reader to have an option to flow
| longform text across multiple columns for that one guy with a
| 5120 x 2160 monitor who chooses to view the text in full-
| screen, another to apply "too wide is bad" everywhere.
|
| In particular, this looks stupidly blank in landscape mode on
| my 21:9 smartphone. Toggling Firefox to "Desktop Mode" shows it
| easily fits in that orientation.
| kelvie wrote:
| This really needs to be a userscript (if possible), does anyone
| know a way to run javascript helpers like this on Chrome on
| Android without going to a completely different browser that
| supports it straight-up (like firefox?)
| LordDragonfang wrote:
| Could you inject it as a bookmarklet?
|
| If not, you could probably just paste it into Eruda
| (https://eruda.liriliri.io/)
| baloki wrote:
| Isn't this just 2 tables with one hidden at a time?
| mrzimmerman wrote:
| Definitely. I thought this was going to be a single,
| semantically correct table that had some fancy use of the
| display property across the different elements to make them
| align differently (though that would help with the table
| headers).
|
| I actually think this is probably the more practical approach,
| though I wonder what screen readers make of the mobile version
| compared to traversing a normal table structure.
| noman-land wrote:
| You need to test with very long occupation names. How do these
| tables break text?
| andrewfromx wrote:
| oh i left it out of the example to keep it simple but there is:
|
| https://github.com/andrewarrow/a-table-that-looks-good-on-mo...
|
| {{ $wrap := "whitespace-nowrap" }}
|
| and I set: colAttributes := map[int]string{}
| colAttributes[0] = "w-1/2"
|
| https://github.com/andrewarrow/a-table-that-looks-good-on-mo...
|
| to make tailwind handle a column that needs to wrap.
| dvh wrote:
| It overflows right on WebView (non chrome) Android browsers.
| Update: On chrome too, my window.innerWidth=360
| Jaxan wrote:
| On iOS too. I have to scroll sideways to read it all, although
| there is a lot of white space.
| andrewfromx wrote:
| not the table part right? Just the html explanation below it?
| Yeah I need to fix that.
___________________________________________________________________
(page generated 2023-07-05 23:02 UTC)