adi_matrix – Multi-article update tabs

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

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….

Textpattern CMS

Textpattern CMS support forum

#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:

#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

Board footer