search

matttrenary / rugby-ratings

Calculate ratings from rugby scores
2 stars 1 forks source link

Optimize tables for mobile #17

Open grjanke opened 1 year ago

grjanke commented 1 year ago

Right now our styling is clunky on mobile devices. Most prominently, you have to scroll to see the entirety of each row in the tables.

Do we withhold certain information? I don't have much experience with this but I can see what the internet says.

matttrenary commented 1 year ago

https://css-tricks.com/responsive-data-tables/

Something like this is probably best. I haven't looked into if Bootstrap has anything native for it.

grjanke commented 1 year ago

I fixed every mobile-device issue except the results table. I couldn't find any fix on Bootstrap that matches what we're looking for.

I agree with the solution you found on that website; this is something we'll have to implement later.

SheaLoughnane commented 7 months ago

https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column/

@grjanke I think the results table would look better on mobile if the header row and first column were both pinned like above example. Do you know how I could do this with Bootstrap?

Also want to know how you feel about striped rows like in here https://getbootstrap.com/docs/4.0/content/tables/#responsive-tables. I think they would look good on both mobile and the main site