adi_matrix – Multi-article update tabs

ironmangary · 2022-12-05 16:20:42

I just installed this plugin. I went through, chose the fields, clicked “Update Matrix Settings,” and got this generic error:

Matrix settings update failed

Is there a more verbose error somewhere? I didn’t have any errors under Admin -> Diagnostics.

Thanks!

Last edited by ironmangary (2022-12-05 16:22:40)

Bloke · 2025-02-06 15:44:16

For anyone following this thread, I’ve adopted the plugin because it’s too freaking cool and needs keeping alive.

I’ve applied a fix similar to peterj above and practically rewritten the entire plugin as a class, with a much much (much) reduced global footprint. There’s still more work to go but in the process I have:

Tidied the code for PSR compliance. More work needed here
Made some inroads on PHP 8 compatibility. Not tested properly yet, so probably a lot more work here too.
Added CSP-aware JavaScript and CSS. The CSS could really do with taming, and support for dark mode, if anybody has any wisdom here it would be appreciated.
Improved the admin workflow so you only work on one matrix at a time, which is cleaner, less confusing, less prone to error, and a lot less scrolling.

If anybody wants to take it for a spin, please do.

giz · 2025-02-06 18:39:23

In my admittedly limited testing, it behaves well (including dark mode).

Much of the css is redundant; for the most part I feel it looked and behaved better after I deleted the css block in inspector! I suggest moving the ‘View’ button so it appears in the first table column, and maybe leaving out the ‘eye’ icon altogether.

Good to see this useful; plugin getting some love in.

Bloke · 2025-02-06 19:05:49

Thanks for checking it out. Yeah, the CSS doesn’t seem to do much apart from get in the way. I’m not even sure what most of targets and why. I might take your approach, hack it all out and see what the fallout is!

That eye icon is a bit weird. And the table layout leaves a lot to be desired. Might be better in a CSS grid nowadays, not sure. I’ll take any and all html layout and CSS tweaks to improve the overall aesthetic. The delete icon position irrationally annoys me as well.

Bloke · 2025-02-07 00:22:41

giz wrote #339014:

I suggest moving the ‘View’ button so it appears in the first table column, and maybe leaving out the ‘eye’ icon altogether.

I’ve done a halfway house:

Removed the table in favour of flexbox.
Moved the ‘eye’ icon into the header row of each matrix.
Made the delete button absolutely positioned, top-right of each matrix.

It’s better. Not perfect, but better. CSS/layout tweaks welcome from anyone.

colak · 2025-02-07 06:00:24

Thanks for adopting this Stef. adi_matrix is indeed one of the most useful plugins.

Just a heads up that I visited your github page on github.com/Bloke/adi_matrix and there is an outdated link for the textpack of the plugin. It would be good if that is updated.

Bloke · 2025-02-07 06:58:26

Thanks for the note. I haven’t fixed up the help yet, so I will do that soon.

Edit: done.

Last edited by Bloke (2025-02-07 07:32:08)

phiw13 · 2025-02-08 07:09:22

Some random notes, including layout suggestions

[1] Extensions > Article Matrix (adi_matrix_tab)

It took me quite a while to discover what that eye icon did. Just the text-string “View”? see e.g. sections panel.
PluginPreferences at the bottom could be send to the Preferences Panel (the link from to options on the Plugin panels lead to a blank set on the Prefs. panel).

under article display column

checkboxes should come first in the flow
then remove all of these two blocks:

.adi_matrix_field p label.adi_matrix_checkbox input {

    /* float: left; */
}
.adi_matrix_field p {

    /* overflow: hidden; */
    /* margin-top: 0; */
    /* min-height: 1.4em; */
}

[2] a matrix panel: home > test1 (with scrollbox on)

there is a call somewhere to textpattern/txp_img/arrowupdn.gif which is 404. It is probably not needed anyway (leave to themes)
if a footer is enabled, use the (same) markup as seen in the thead.
remove .txp-list th, .txp-list td {padding-left: 0.5em} and leave that to admin themes
the Save button below the table – div.adi_matrix_button should be a standard <p class="adi_matrix_button" />
why do both the <table/> and the <form /> have the same classes adi_matrix_matrix adi_matrix_scroll ? .txp-list appears also on both. Leave that one on the table only.
The navigation at the bottom should be wrapped in div.txp-layout-cell-row.txp-navigation – the articles panel is your guide…

Layout changes:

set {position: relative} on the form.adi_matrix_matrix.adi_matrix_scroll (Containing block for the positioned column)
consider using container based units (cqi) instead of % for that positioning system
that would avoid sending that first column partly offscreen on not-so-large windows:

form.adi_matrix_matrix.adi_matrix_scroll {
  position: relative;
  container-type: inline-size;
  container-name: addi-matrix-box;
}
.adi_matrix_scroll div.scroll_box {
  width: 87cqi;
  margin-left: 13cqi;
}

.adi_matrix_scroll table#list th:first-child,
.adi_matrix_scroll table#list td:first-child {
  width: 13cqi 
  box-sizing: border-box;
}

for the pencil icon: the span should have the classes: ui-icon ui-icon-pencil
the icon hangs outside of the box (.adi_matrix_field_title { white-space: nowrap } ) then you can remove all styling added by the plugin leave the sizing to the theme

.adi_matrix_edit_link span {
/* display: inline-block; */
/* width: 20px; */
/* height: 20px; */
}

The navigation at the bottom should be wrapped in div.txp-layout-cell-row.txp-navigation – the articles panel is your guide…

screenshot before dev.l-c-n.com/_b/matrix_before.png and after dev.l-c-n.com/_b/matrix_after.png

Bloke · 2025-02-08 08:11:06

Wow. That’s amazing thank you. When I’m next at my laptop I’ll go through all your suggestions and implement them.

Btw, did you see I got rid of the table on the matrix admin panel in favour of flexbox? Is that a good move do you think, or is the table better, combined with your changes above?

I did make a note in the code somewhere about moving the prefs to where they should be. That blank page on plugin->options is annoying so I’ll probably tackle all that next.

Once again, thank you for this excellent advice.

phiw13 · 2025-02-08 08:41:56

Bloke wrote #339022:

Btw, did you see I got rid of the table on the matrix admin panel in favour of flexbox? Is that a good move do you think, or is the table better, combined with your changes above?

The flexbox layout on the matrix admin panel is fine, works nicely on a phone, I think. There are possibly some things that can be fine-tuned, haven’t checked too hard.

–^–

Some updates more:

use logical properties: margin-left -> margin-inline-start, left -> inset-inline-start
the matrix panel (home > test1 above) is unusable as given on a small screen (try it on your laptop, Firefox > Tools > Browser tools > responsible design mode). Suggestion, hide all the position code on smaller devices (e.g. smaller than a small iPad in landscape mode:

@container addi-matrix-box (width > 60em) {
  .adi_matrix_scroll div.scroll_box {
    position: absolute;
    width: 87cqi;
    margin-inline-start: 13cqi;
    /* rest of code*/
  }
  .adi_matrix_scroll table#list th:first-child,
  .adi_matrix_scroll table#list td:first-child {
    width: 13cqi;
    inset-inline-start: 0;
    box-sizing: border-box;
    /* rest */
  }
}

Edit : specify which container to use in the query (@container)

Last edited by phiw13 (2025-02-08 09:08:56)

giz · 2025-02-08 17:01:39

Regularly on this forum I read about developers discussing css intricacies — so that their code will look and behave as expected.

textpattern.css is already large and complex; adding more css just makes it more so.

I’m working towards future Textpattern styling which is less opinionated, more flexible and developer-friendly. Authors need only write semantic html, confident that it will display correctly.

Am I dreaming?

Bloke · 2025-02-08 19:22:32

I’m trying to remove as much CSS as I can from this plugin. It’s legacy and chock full of the stuff, and it’s annoying to have it floating around. If there are core styles I can use I’d much rather do so. Any assistance on html or style names to achieve this will be most appreciated.

Last edited by Bloke (2025-02-08 19:24:31)

phiw13 · 2025-02-09 02:43:58

giz wrote #339025:

Am I dreaming?

Yes.

Bloke wrote #339026:

I’m trying to remove as much CSS as I can from this plugin. It’s legacy and chock full of the stuff, and it’s annoying to have it floating around. If there are core styles I can use I’d much rather do so. Any assistance on html or style names to achieve this will be most appreciated.

I’ll try to make a mockup for that matrix, and sanitise the style rules.

jakob · 2025-02-09 06:16:44

giz wrote #339025:

textpattern.css is already large and complex; adding more css just makes it more so. I’m working towards future Textpattern styling which is less opinionated, more flexible and developer-friendly. Authors need only write semantic html, confident that it will display correctly.

I think that’s a good aim. If it is less opinionated and more flexible, then it can accommodate personal/stylistic modification with fewer special cases. You’ve shown with your mockups that you can push “the look” quite far on the same basic codebase. With the more regularised UI components in txp5, more situations are covered, too. All good things, in my opinion.

But there are always special cases with non-standard UI panes – such as this plugin? – and then many older plugins and sites that still come with their own (more or less opinionated) css, so there will always be cases the core css won’t cover. That’s okay too, as it keeps the core css leaner. And older plugins can be updated to use better core styling.

Am I dreaming?

I don’t think so. I think that’s a good target, at least for typical UI constellations. adi_matrix seems to me to be an outlier.

@container addi-matrix-box (width > 60em) …

You are very likely better aware than me, but can people still on MacOS 10 – and I think there are a few on the forum – utilize container queries? In Safari I think not, but possibly in Firefox and Chrome – from a brief search, it seems container support was just arriving with the last supported browser versions for MacOS 10, so maybe?

Otherwise, though, it’s a useful tool for UI elements that could appear in different positions in a UI layout.

phiw13 · 2025-02-09 07:32:50

jakob wrote #339028:

You are very likely better aware than me, but can people still on MacOS 10 – and I think there are a few on the forum – utilize container queries? In Safari I think not, but possibly in Firefox and Chrome – from a brief search, it seems container support was just arriving with the last supported browser versions for MacOS 10, so maybe?

Container Queries and Container based units (cqi and friends) require Safari 16 – MacOS 11+. Textpattern 4.9 “runs” on MacOS 10.15 / Safari 15 with some caveats, at least Safari 15 on my luddite iPhone does what it needs to do. With older versions of Safari, I don’t know how well Textpattern works.

I might have a better idea on making that positioning on the matrix page work better, with sticky positioning – if people think that behaviour (positioned first cell in each row when scrolling horizontally) is useful.

Otherwise, though, it’s a useful tool for UI elements that could appear in different positions in a UI layout.

Container queries are indeed very useful, it is a pity the WWW-style (pushed by Chrome folks, iirc) made a mess by speccing container-type: inline-size as establishing a block formatting context. This has since been corrected and I think all browsers except Safari 18.3 follow the updated spec¹.

¹ Try the behaviour of the pull down next to the search box in this mockup: dev.l-c-n.com/txp-4.9/txp-content-link.html. Compare Safari 18 with Firefox. It works correctly in Safari TP, though

Textpattern CMS

Textpattern CMS support forum

#196 2022-12-05 16:20:42

Re: adi_matrix – Multi-article update tabs

#197 2025-02-06 15:44:16

Re: adi_matrix – Multi-article update tabs

#198 2025-02-06 18:39:23

Re: adi_matrix – Multi-article update tabs

#199 2025-02-06 19:05:49

Re: adi_matrix – Multi-article update tabs

#200 2025-02-07 00:22:41

Re: adi_matrix – Multi-article update tabs

giz wrote #339014:

#201 2025-02-07 06:00:24

Re: adi_matrix – Multi-article update tabs

#202 2025-02-07 06:58:26

Re: adi_matrix – Multi-article update tabs

#203 2025-02-08 07:09:22

Re: adi_matrix – Multi-article update tabs

#204 2025-02-08 08:11:06

Re: adi_matrix – Multi-article update tabs

#205 2025-02-08 08:41:56

Re: adi_matrix – Multi-article update tabs

Bloke wrote #339022:

#206 2025-02-08 17:01:39

Re: adi_matrix – Multi-article update tabs

#207 2025-02-08 19:22:32

Re: adi_matrix – Multi-article update tabs

#208 2025-02-09 02:43:58

Re: adi_matrix – Multi-article update tabs

giz wrote #339025:

Bloke wrote #339026:

#209 2025-02-09 06:16:44

Re: adi_matrix – Multi-article update tabs

giz wrote #339025:

#210 2025-02-09 07:32:50

Re: adi_matrix – Multi-article update tabs

jakob wrote #339028:

Board footer