adi_matrix – Multi-article update tabs

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.

giz · 2025-02-10 16:40:24

phiw13 wrote #339041:

Part 1: the matrix panel

👍 I really like your sticky table 1st-column treatment (particularly the way it kicks in only as required). I’d suggest applying display: flex; to the :first-child class so that the edit link never wraps, and possibly an opaque background colour is all that is needed.

This should to be part of any table styling!

phiw13 · 2025-02-11 02:26:12

Bloke wrote #339047:

[…] but more utilizing the right hand pane where the labels are left aligned and values right aligned.

Ah, that is what you mean. Yes that is an option I had on the back of my mind when asking about the complexity of changing that markup. Horizontal alignment would certainly work. Look at the left-hand column (“Matrix”).

All it takes is adding the class txp-edit to the div.adi_matrix_field. On small screens it will display vertically stacked, same as e.g the Edit panels or the Preferences panel.

dev.l-c-n.com/txp-4.9/adi_matrix_admin.html

phiw13 · 2025-02-11 02:33:18

giz wrote #339048:

👍 I really like your sticky table 1st-column treatment (particularly the way it kicks in only as required). I’d suggest applying display: flex; to the :first-child class so that the edit link never wraps, and possibly an opaque background colour is all that is needed.

Thanks.

yeah, using display: flex; might help, although the input field would get narrower.

Edit: Nope that does in fact not work. Of course. Setting the td:first-child { display:flex } cause it lose it association with the table and (1) it collapse in height (2) it is not sticky anymore – it is “out” of the table box. HTML tables are very complex and weird animals.

.adi_matrix_matrix tbody td:first-child { white-space: nowrap; } does the work, though.

Related: Is there some benefit in restricting the width of the input fields ([type=text], select), like setting some width or max-width? at present the only constrain is the max-width set in the admin theme.

Example: if an option in a select contains a very_long_string (e.g. category name ) the select will expand to accommodate the longest string.

This should to be part of any table styling!

Now now… That is quite a bit opinionated :-). But maybe as part of a collection of custom styles rules. It is basically three lines of CSS, more or less.

Last edited by phiw13 (2025-02-11 03:24:12)

Textpattern CMS

Textpattern CMS support forum

#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

#226 2025-02-10 16:40:24

Re: adi_matrix – Multi-article update tabs

phiw13 wrote #339041:

#227 2025-02-11 02:26:12

Re: adi_matrix – Multi-article update tabs

Bloke wrote #339047:

#228 2025-02-11 02:33:18

Re: adi_matrix – Multi-article update tabs

giz wrote #339048:

Board footer