RFC Mobile Tables

[brianteeman]

Making all the tables "mobile friendly" is a real pia - especially if you want to maintain accessibility. I've seen you jump through all sort of loops to even try to make it work. Adding lots of additional classes and even additional markup for mobile only.

Instead of that I would like to propose a much simpler option which I am calling "is-stacked-mobile". This is a CSS only solution that requires very minimal extra markup to convert a table row into a stack when mobile.

Example Screenshots

Before

After

Howto

This draft pr contains an example for the extensions table in the screenshots above. As you can see it introduces some extra scss and then just 4 easy edits on a table. Thats it. Of course you can still do d-sm-none etc if needed as well.

[brianteeman]

Forgot to add. As well as the ease of implementation the other main benefit is that you no longer have to remember what the data is in each column or keep scrolling up and down to the header

[nikosdion]

This is great, just a bit premature – it's okay, you can't read my mind.

Right now, all pages use server-side rendering. This is a problem when we have repetitive markup and strings, like we do in tables, and even more so in a mobile stack. We end up with a very lengthy HTML document. I want to reduce the size of the data transferred from server to client to better support mobile devices which tend to be worse in terms of bandwidth, roundtrip time, and dropped packages compared to desktop.

I would like to follow this approach after I introduce Petite Vue on that page. Going from server-side to client-side rendering would allow us to both reduce the initial document transferred over the wire (a very small HTML file with an embedded JSON document where all various bits and pieces are loaded from), and allow us to update parts of the page dynamically which is something we cannot currently do.

Since that would be making the page mobile-friendly, I think it would also be a great choice for introducing a mobile stack in it as well. So, please leave this open until I get to that.

[brianteeman]

This is great, just a bit premature – it's okay, you can't read my mind.

Are you sure about that?

[nikosdion]

Look, my mind-reading expectations are set very high by Crystal. You can get quite close, but not at that level 🤣

[morphinestyle]

If it hadn't been for SCSS, I would have gladly taken care of the CSS myself.

[nikosdion]

@morphinestyle SCSS isn't all that scary. Most of what they are doing there, and the way we're using it, is going to be part of the CSS specification itself.

.foo {
  &:hover { color: fuchsia; }

  span { color: red; }
}

becomes

.foo:hover { color: fuchsia; }
.foo span { color: red; }

That's pretty much it. It's a more… cascading way to write cascading style sheets :)