Improve tables on mobile

[fabd]

Improve data tables UX on mobile (flashcard list, etc)

• [x] Extend table content edge to edge on mobile viewport
• [x] Layout tables inside a horizontal scroll container
• [ ] Increase height a tad for rows
• [ ] Make entire rows as touch target where appropriate?

VueJS

• Create a VueJS component for the uISelectTable backend component. (keep the data in the backend for now, and let the backend do the paging)
  • Create a "row" sub component that is iterated on the client side
    • Use a "card" view or a "row" view depending on a view setting

[faneca]

I'll leave here some links to nice workarounds to the generic problem of responsive tables, hoping not to be too off-topic: https://elvery.net/demo/responsive-tables/ https://css-tricks.com/responsive-data-tables/ (linked also from the previous article)

[fabd]

@faneca Thanks!

Yeah I've seen those and similar approaches. I'm not too thrilled about making the rows expand into a large block just for the sake of fitting data into the screen. It may be overkill for our needs and will make tables like FLashcard List very long, even 20 rows at a time.

Considerations

• tables are mostly for reference, the only interactive table currently is My Stories (the hidden kanji with reveal on mouseover) and Edit Keyword (where the edit button being off screen is definitely wrong).
• so tables tend to be secondary content, and it's not criticial to have all the data on the screen (I think)

Current approach

• use responsive css to show a shorter label (for example "#" instead of "Frame Num" in the Flashcard List), thus reducing the column sizes where possible
• make all the tables scrollable horizontally. I just tried on a phone today and it works quite well with touch.
• ... and hence, put the most important data first (left-wise), so the user will scroll for less important data

I think that's a "good enough" solution, unless there are issues specific, which may come later once it's "public beta" and there is more feedback. But I am hopeful the above is sufficient.

Note that this is all in the spirit of trying to keep as much common code between mobile and desktop to make development more manageable. Exceptions are made when mobile requires a specific solution for a decent experience.

We could also hide some columns on mobile, but I think the solution above, prioritizing important columns, is better, so mobile users can see the same data.

That said if there is a technique out there you think would do well on a particular page of the site, I can look at it.

[faneca]

I've seen two or three more techniques not explained in the linked articles (well, tbh more like variations on the same ideas), but don't think are worth mentioning. Your approach seems the most reasonable for kanji.koohii.com (but if anyone else has another interesting solution to share I also would be more than willing to hear it ;-). @fabd Thanks for your hard word!