Mobile friendly Webgrid

[matthiaswh]

I realize this may be a Webgrid 2.0 issue - adding it to that list too - but I'd like to explore the possibility of making the current version more mobile responsive. Webgrid tends to be the biggest piece holding us back from building sites that we can say are usable on mobile, even if mobile isn't a first class citizen.

Here's an example of a current grid implementation rendered for mobile:

The header controls are already largely fixed, leaving the only other major problem area the width of the grid stretching horizontally. The best way I have seen to fix this is to essentially turn the table into a more column based format that scales vertically. Buefy does this for the Bulma framework.

Becomes

I recently went through a similar process in making a non-Webgrid table print-friendly.

Turned into

That was done almost entirely with CSS, and with the limitation of not using flex box because it had to support printing. The only sticking point was that it required adding an additional element to every cell of the table with the column header text, hidden by default. (Buefy does this with data-label attributes and then uses JS to display them.)

It should be possible to make the Webgrid above become something like:

Although I would take it one step further and add one cell as the header, with the ability to collapse rows.

We would also likely want to collapse the header control box by default on mobile, and make the edit/delete buttons larger and more usable.

[rsyring]

126 makes some enhancements to the controls. However, in my testing on that, I noticed something seems really broken in the mobile render in chrome dev tools:

Note that the body width seems to not have filed the viewing portal. Could be a problem in my project's layout or nav CSS I guess, but wanted to note it's something to look into it.

[matthiaswh]

Moleliminator has some mobile enhancements in place we can pull into here, mostly CSS based. Although I'm noticing now there is an overflow issue with the filters.

[pytrumpeter]

Just in conceptualizing solutions for this, it would help for me to be aware of boundaries/expectations:

1. Do we want to avoid any additional dependencies? There are of course a bunch of free/open source libraries that will do a lot of this work for us, but that brings complexity and constraints that we might not want
2. For non-mobile views, do we want to keep the HTML table, or can we move to a full flexbox/div/other layout across the board? It's an implementation detail, but a big one. Seems like the latter is more work and could break more things, but would be less code to maintain.
3. In light of the new niceties added to webgrid with regard to API/React compatibility, do we want to stay with jinja2 rendering or move towards front-end rendering? I assume we'll want to continue to support the jinja2 templates, but just want to be sure since this is looking towards a major version bump.

[pytrumpeter]

Here's what I have so far:

The "row" of data collapses by clicking the button. I have all collapsed by default on mobile, and no changes are visible on the desktop view.

I'm thinking that the action buttons might need to be a keg-auth style change, since webgrid just thinks that's its own row of data and doesn't currently do much to render it differently. I can make it look a lot better with some javascript in webgrid, but it seems to me that we don't really need webgrid to be aware of keg-auth's button rendering.

[rsyring]

It seems like Company One is a heading. I'd leave that as data and not make the entire thing a button. Suggest adding something like chevrons pointing down inside a button to indicate that the row will expand if they click it. Use chevrons pointing up once the record is expanded to indicate it can be clicked again to collapse it.

Another option would be to do away with the header button row completely. It is a table after all. I'd make the separation between "rows" distinct somehow. <hr> just above it, some kind of double border or something, maybe just space between record elements that have a border and/or different shading. etc. Then, you could show the first two (configurable?) rows of data and put an icon or just the text "expand fields..." at the bottom that would be clicked to show the other fields in the record. Also give a button at the top of the table to "expand all". IMO, something like this would be the best.

Might not even need to collapse the data at all by default? Could be an option for the developer to specify what fields are initially visible in mobile.

[rsyring]

You may have read up on this already but I found a couple articles that have good ideas and principles:

• https://uxdesign.cc/when-you-cannot-runaway-of-using-tables-on-mobile-630923bcea72
• https://www.uxmatters.com/mt/archives/2020/07/designing-mobile-tables.php