adi_matrix – Multi-article update tabs

giz · 2025-02-09 16:26:02

A lack of support for container queries shouldn’t break the layout, but rather change its position on the page. If the component in question is designed correctly, it will be flexible enough to cope with any width.

I expected to use container queries extensively, but so far I’ve found little need for them.

adi_matrix doesn’t appear to have any unusual requirements from a css perspective (famous last words), but I’ll add it’s html as a test panel on my dev site to see how it behaves.

Bloke · 2025-02-09 16:27:19

Thank you. If the html is tamed a bit, I fully expect 90% of the CSS can go. I’m moving the prefs now, so that’s more of it to get rid of.

giz · 2025-02-09 20:32:15

Here’s adi_matrix displayed using txp5 core.css; it copes well out of the box. Niceties like spacing between groupings is left to the theme layout (my example themes like Five are purely content:write-focussed for the moment).

A bit of source reordering (and removal of all those redundant custom class names) and its functional.

phiw13 · 2025-02-09 22:19:35

Bloke wrote #339033:

Thank you. If the html is tamed a bit, I fully expect 90% of the CSS can go. I’m moving the prefs now, so that’s more of it to get rid of.

My thinking is to use the default list table markup, including the wrapper div, for that panel. If if people want to have the first column “pinned” when scrolling horizontally, then an option could be included (same as existing using positioning) with position:sticky, I think that should work.

the matrix admin panel will also get some more love next.

Bloke · 2025-02-09 22:49:25

phiw13 wrote #339036:

My thinking is to use the default list table markup, including the wrapper div, for that panel.

That makes a lot of sense. I’ll tinker with that.

The fixed first column idea sounds like it might work.well. If so, that could be as simple as just adding a class to the first column, right? With the position: sticky class rule associated to it.

Bloke · 2025-02-09 22:52:19

Further thought: I wonder if by using the stock html layout and classes, maybe the column hiding thing comes along for the ride automatically? That might be interesting because you could include a bunch of columns in your matrix but choose to hide some of them if you didn’t want to edit those fields, thus saving space and maybe obviating the need for the sticky first column.

Hmm….

phiw13 · 2025-02-09 22:55:05

Bloke wrote #339037:

That makes a lot of sense. I’ll tinker with that.

The fixed first column idea sounds like it might work.well. If so, that could be as simple as just adding a class to the first column, right? With the position: sticky class rule associated to it.

Hold on till later today, please.. so that I have time to make the mockup and tinker with it.

Bloke wrote #339038:

Further thought: I wonder if by using the stock html layout and classes, maybe the column hiding thing comes along for the ride automatically? That might be interesting because you could include a bunch of columns in your matrix but choose to hide some of them if you didn’t want to edit those fields, thus saving space and maybe obviating the need for the sticky first column.

That could be nice of course (personally would prefer that, honestly)

Bloke · 2025-02-09 22:56:16

Sure thing. I won’t have time to do much more than the prefs panel relocation today anyway.

phiw13 · 2025-02-10 01:24:05

Part 1: the matrix panel

with Sandspace: dev.l-c-n.com/txp-4.9/adi_matrix1.html
with Hive: dev.l-c-n.com/txp-4.9/adi_matrix_hive.html

All standard Textpattern Core markup.

The first column is set to sticky (and that should be an option only) for testing and evaluating. Narrow your browser window to try.

Issue: the cells now need a background set to cover the other cells when scrolling. That sort of kills the alternate row background. I tried with background-blur: blur(80px), but that also blurs all borders. As you can see, I used a slightly translucent background-color, and one for dark mode (I hope it works in Hive…).

I kept all classes on the table cells as set by the plugin. On the parent form, one class: .adi_matrix_matrix, on the table one class: .adi_matrix_matrix_table. I don’t use them for anything, maybe useful if someone wants some custom styling ?

Before the table I added a link-button that could link to the matrix admin panel (matrix editing, new matrix…) and the ”Column display options” widget if that can be made to work.

The pencil thingie, I kept as is, I wonder if it could be just a plain link (“edit”) – there are a few examples across the panels

Minimal styling:

.adi_matrix_timestamp {  white-space:nowrap; }
.adi_matrix_timestamp div { margin-block-end: .25em}
.adi_matrix_edit_link { margin-inline-start: .25em}

.adi_matrix_matrix thead th:first-child,
.adi_matrix_matrix tbody td:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background-color: hsl(0 5% 97% / .8)
}
@media screen and (prefers-color-scheme:dark) {
  .adi_matrix_matrix thead th:first-child,
  .adi_matrix_matrix tbody td:first-child {
    background-color: hsl(0 5% 15% / .8)
  }
}

search for <style> in the HTML.

Next up, the matrixAdmin panel, later today if I can.

Bloke · 2025-02-10 05:35:40

That’s way cool it can be done in core table parlance. Thank you for all the work.

The sticky table column takes up over 70% of the screen width on my portrait phone, which means the remaining columns barely fit in the remaining space. That would make editing a chore, methinks.

See screen grab

Maybe if the column toggle options are worth pursuing, I’ll try that as a first port of call. Top stuff.

phiw13 · 2025-02-10 06:13:06

Bloke wrote #339042:

That’s way cool it can be done in core table parlance. Thank you for all the work.

:-)

The sticky table column takes up over 70% of the screen width on my portrait phone, which means the remaining columns barely fit in the remaining space. That would make editing a chore, methinks.

Yes, expected. If you check the source, you’ll see I included, commented out, a media query for those. It make no sense to have the column “sticky’ on a small devices.

I have updated the two files with the MQ uncommented.

(I had left like that too have the opportunity to check a couple of devices).

Maybe if the column toggle options are worth pursuing, I’ll try that as a first port of call. Top stuff.

I’ll leave that for others to comment on. Me, I don’t particularly need it.

–^–

Now also a mockup for the adi matrix admin panel: dev.l-c-n.com/txp-4.9/adi_matrix_admin.html

WIP and Sandspace only atm.

phiw13 · 2025-02-10 08:43:30

I have made some updates to the admin panel: dev.l-c-n.com/txp-4.9/adi_matrix_admin.html

One question: would it be much work / difficult to change the markup for all those label / form control pairs?

The current markup is <p><label>text</label> <input……>. In the original display those labels have an equal width, aligning neatly. I tried to reproduce with as minimal css as possible, but that is very brittle and requires overrides both in markup (classes?) and css for same cases, etc, etc. I did that with flexbox layout, it would be just as possible with css grid, and equally loopy.

My proposal would be to change all that to the TXP markup, as seen in the sidebar on the Write panel.
All the spacing / sizing / alignment / … comes for free courtesy of the admin theme.

<div class="txp-form-field">
  <div class="txp-form-field-label"><label for="foo">label text</label></div>
  <div class="txp-form-field-value"><input id="foo" name="foo" type="text"></div>
</div>

In the left-most column, the first pair (“Name”) uses this structure.

The checkbox markup structure is fine as is and need no changes.

Bloke · 2025-02-10 11:39:32

It’s no hardship to swap it. I’d far rather do it with less need for CSS than have the plugin littered with it. And since the matrix admin panel is only one matrix at a time now, we’re less vertically constrained than in the previous version. I’ll give it a go with the standard structure.

Presumably the Prefs panel layout doesn’t work in a tri-column setup?

phiw13 · 2025-02-10 12:05:56

Bloke wrote #339045:

Presumably the Prefs panel layout doesn’t work in a tri-column setup?

By coincidence, on the bus earlier today, I was thinking about the Pages layout. Right hand; Save, New + Duplicate and below, list of available matrix.

I am not sure how well a 3column layout might fix in the work area of the panel, might be a little cramped on not-so-large windows (same problem for the Prefs panel layout). Although – it could be made to wrap.

Bloke · 2025-02-10 13:48:20

That’s an interesting idea, though as you say it may be a bit squished. I wasn’t thinking of the three quarter panel split, but more utilizing the right hand pane where the labels are left aligned and values right aligned. I was musing out loud whether the CSS for that panel would work for each column of the matrix definition, instead of vertically stacking label and value.

Textpattern CMS

Textpattern CMS support forum

#211 2025-02-09 16:26:02

Re: adi_matrix – Multi-article update tabs

#212 2025-02-09 16:27:19

Re: adi_matrix – Multi-article update tabs

#213 2025-02-09 20:32:15

Re: adi_matrix – Multi-article update tabs

#214 2025-02-09 22:19:35

Re: adi_matrix – Multi-article update tabs

Bloke wrote #339033:

#215 2025-02-09 22:49:25

Re: adi_matrix – Multi-article update tabs

phiw13 wrote #339036:

#216 2025-02-09 22:52:19

Re: adi_matrix – Multi-article update tabs

#217 2025-02-09 22:55:05

Re: adi_matrix – Multi-article update tabs

Bloke wrote #339037:

Bloke wrote #339038:

#218 2025-02-09 22:56:16

Re: adi_matrix – Multi-article update tabs

#219 2025-02-10 01:24:05

Re: adi_matrix – Multi-article update tabs

#220 2025-02-10 05:35:40

Re: adi_matrix – Multi-article update tabs

#221 2025-02-10 06:13:06

Re: adi_matrix – Multi-article update tabs

Bloke wrote #339042:

#222 2025-02-10 08:43:30

Re: adi_matrix – Multi-article update tabs

#223 2025-02-10 11:39:32

Re: adi_matrix – Multi-article update tabs

#224 2025-02-10 12:05:56

Re: adi_matrix – Multi-article update tabs

Bloke wrote #339045:

#225 2025-02-10 13:48:20

Re: adi_matrix – Multi-article update tabs

Board footer