Mobile tables kinda suck (still)

[dgw]

@half-duplex recently mentioned on IRC that our "migration guide" for Sopel 7 has a table from which the header disappears on narrow windows (or most mobile devices).

This goes back to a change from a few years back that attempted to make the Plugin Commands page work better on mobile (f15fcb5), a change that I probably didn't test on every piece of content. I used a modified version of the technique from some old CSS Tricks article about responsive tables, copying a lot of the styles for that approach but omitting part of it—the part that would put "column" labels back next to the data in the "mobile" state.

Looking at this again, I can see why I omitted that part. That approach requires specifically addressing each <td> element by its column index, embedding the data labels in CSS using the :before pseudo-element and a content: attribute. That's terrible for maintainability—not to mention we don't have a way to address specific pages in CSS—and I stand by my choice not to do it that way. I guess coming back to it got forgotten in all the other run-up to Sopel 7 and beyond.

The real solution, if I or anyone else can be coaxed into working on it, is probably something like this approach (gone from the web, but archived by IA), only with real table markup instead of the <div> fakery they included for no apparent reason. The data-label attribute is the key to implementing responsive tables in a maintainable fashion, since it can be accessed from CSS.

Some kind of Jekyll helper to use in place of the bare table markup should be able to take care of generating the HTML. It's probably going to require a bit more than what can be done in a Liquid include, though (at least, more than the Liquid I know). While I hope it can be done without touching Ruby plugins, someone might have to write one if it doesn't already exist.