Render widget groups in the back end with CSS grid #7087

zoglo · 2024-04-04T20:25:32Z

Reviving #2053 with this for Contao ^5.3 and the new introduced classes (w25, w33, w50, w66, w75).
Could be merged with additional changes and would be BC-compatible due to the widget-group wrapper.

Keep in mind this is the reworked CSS-Grid based on @m-vo's solution for the backend widgets as discussed in the contao call for #1024.

Rewrite

Also grouped most media-queries so it's mobile first (not the split-button tho, doesn't make sense for that one)

Additional classes

Introcuded .w16 on that occasion

Custom properties

Following custom properties were added:

Custom property	Description
`--widget-col-amount`	Column amount of the backend-grid (Defaults to 12)
`--widget-cols`	Amount of space that this takes per row (Can be used to create more specific widget classes)
`--widget-gap-rows`	Row gap for widget-group container
`--widget-gap-cols`	Column gap for widget-group container

- See m-vo at 2053

zoglo · 2024-04-04T20:31:56Z

Questionable if we'd need other classes than .w25,.w33,.w50,.w66,.w75.
I changed this to a Draft PR due to possible optimizations with custom properties and not using "max-width" media queries.

Tbh, @m-vo's PR was flawless, it just needed some love and some edge-cases.

core-bundle/contao/themes/flexible/styles/basic.css

Co-authored-by: Martin Auswöger <martin@auswoeger.com>

- do not use column-gap on handhelds (overflow issue) - do not use !important for .clr

core-bundle/contao/themes/flexible/styles/basic.css

Co-authored-by: Fritz Michael Gschwantner <fmg@inspiredminds.at>

- added `--widget-col-amount` - added `--widget-cols`

zoglo · 2024-04-09T21:48:42Z

I think this PR is finished if the solution mentioned in #7087 (comment) is fine.

The last commit Use custom properties for backend widgets and introduce w16-class introduces custom properties so people can modify their backend grid based on the following custom properties (This doesn't have to apply to the whole backend and can be controlled by adding a specific class to a parent).

Custom property	Description
`--widget-col-amount`	Column amount of the backend-grid (Defaults to 12)
`--widget-cols`	Amount of space that this takes per row (Can be used to create more specific widget classes)

fritzmg · 2024-04-10T08:03:44Z

This CSS is already desktop

On that note, may be it should be changed to mobile first? This would simplify the grid CSS even more.

core-bundle/contao/themes/flexible/styles/basic.css

zoglo · 2024-04-10T10:51:26Z

On that note, may be it should be changed to mobile first? This would simplify the grid CSS even more.

Could do that for the grid. I'd prefer having .split-button in the max-media-query though

core-bundle/contao/themes/flexible/styles/basic.css

- also introduce `--widget-gap-rows` and `--widget-gap-cols`

zoglo · 2024-04-10T21:14:06Z

@fritzmg

I did the CS and did the following changes:

Media queries

Grouped all media-queries so it's mobile first (not the split-button tho, doesn't make sense for that one)

Custom properties

Added the following ones for more customization, see initial description for the other ones

Custom property	Description
`--widget-gap-rows`	Row gap for widget-group container
`--widget-gap-cols`	Column gap for widget-group container

- consider sub-palettes - consider `non-width` classes (always 100% width) - reset cbx styles properly

fritzmg

Noice 👍

Approving tentatively (haven't tested everything exhaustively.)

core-bundle/contao/themes/flexible/styles/basic.css

leofeyer · 2024-05-10T10:54:16Z

I like the concept a lot. Well done!

- Also sort BC css

core-bundle/contao/themes/flexible/styles/basic.css

Co-authored-by: leofeyer <1192057+leofeyer@users.noreply.github.com>

leofeyer · 2024-05-22T10:05:32Z

Thank you @zoglo.

fritzmg · 2024-05-22T10:07:19Z

🎉

Description ----------- Follow-up on #7087 ### Before <img width="847" alt="" src="https://github.com/contao/contao/assets/1192057/0acc60fa-e73b-4bc1-9a4f-57f49bc0e69c"> ### After <img width="782" alt="" src="https://github.com/contao/contao/assets/1192057/52deebc2-9863-45ca-af14-ad46c1ac7234"> Commits ------- c008fe2 Fix the `.nogrid` backwards compatibility layer b1eb3bc Use the :is() selector c23109b Convert `*:not` to `:not`

zoglo added 3 commits April 4, 2024 21:07

Rewrite contao#2053 for Contao 5.3 (5.x)

df706f1

Mobile and tablet styles for grid widgets

13ff350

- See m-vo at 2053

Revert editorConfig

67d15bd

github-actions bot assigned zoglo Apr 4, 2024

github-actions bot added the feature label Apr 4, 2024

zoglo marked this pull request as draft April 4, 2024 20:28

ausi reviewed Apr 4, 2024

View reviewed changes

core-bundle/contao/themes/flexible/styles/basic.css Outdated Show resolved Hide resolved

ausi reviewed Apr 4, 2024

View reviewed changes

core-bundle/contao/themes/flexible/styles/basic.css Outdated Show resolved Hide resolved

zoglo and others added 3 commits April 9, 2024 18:34

Merge branch 'contao:5.x' into feature/grid-widget-backend

736191a

Add a size range for grid template columns

8524095

Co-authored-by: Martin Auswöger <martin@auswoeger.com>

Update grid-layout

84ca874

- do not use column-gap on handhelds (overflow issue) - do not use !important for .clr

fritzmg reviewed Apr 9, 2024

View reviewed changes

zoglo and others added 2 commits April 9, 2024 23:08

Use grid-column-end for widget cols

b8fab3f

Co-authored-by: Fritz Michael Gschwantner <fmg@inspiredminds.at>

Rebuild the assets

abd0710

zoglo marked this pull request as ready for review April 9, 2024 21:22

Use custom properties for backend widgets and introduce w16

608b93e

- added `--widget-col-amount` - added `--widget-cols`

zoglo requested review from fritzmg and ausi April 9, 2024 21:49

fritzmg reviewed Apr 10, 2024

View reviewed changes

core-bundle/contao/themes/flexible/styles/basic.css Outdated Show resolved Hide resolved

fritzmg requested changes Apr 10, 2024

View reviewed changes

core-bundle/contao/themes/flexible/styles/basic.css Outdated Show resolved Hide resolved

fritzmg requested changes Apr 10, 2024

View reviewed changes

core-bundle/contao/themes/flexible/styles/basic.css Outdated Show resolved Hide resolved

zoglo marked this pull request as draft April 10, 2024 20:25

Mobile first + CS

87c308d

- also introduce `--widget-gap-rows` and `--widget-gap-cols`

zoglo marked this pull request as ready for review April 10, 2024 21:14

zoglo requested a review from fritzmg April 10, 2024 21:14

Update widget layout

ef4799a

- consider sub-palettes - consider `non-width` classes (always 100% width) - reset cbx styles properly

fritzmg previously approved these changes Apr 11, 2024

View reviewed changes

leofeyer added this to the 5.4 milestone Apr 11, 2024

leofeyer force-pushed the 5.x branch from 7ad8bbb to 3d1a486 Compare April 12, 2024 13:00

leofeyer linked an issue May 2, 2024 that may be closed by this pull request

Fehler bei w50-Klasse #1024

Closed

Merge branch '5.x' into feature/grid-widget-backend

6989900

leofeyer dismissed fritzmg’s stale review via 6989900 May 10, 2024 10:27

leofeyer changed the title ~~Render widget groups with CSS grid (see #2053)~~ Render widget groups in the back end with CSS grid May 10, 2024

leofeyer reviewed May 10, 2024

View reviewed changes

core-bundle/contao/themes/flexible/styles/basic.css Show resolved Hide resolved

Revert the unrelated changes

1ec3509

leofeyer force-pushed the feature/grid-widget-backend branch from 79b6216 to 1ec3509 Compare May 10, 2024 10:48

leofeyer reviewed May 10, 2024

View reviewed changes

core-bundle/contao/themes/flexible/styles/basic.css Outdated Show resolved Hide resolved

zoglo added 2 commits May 10, 2024 16:36

Consider more classes for backwards compatibility

5c0d886

- Also sort BC css

Run the tools

937c34b

zoglo requested a review from leofeyer May 10, 2024 14:37

leofeyer reviewed May 10, 2024

View reviewed changes

core-bundle/contao/themes/flexible/styles/basic.css Outdated Show resolved Hide resolved

leofeyer and others added 6 commits May 17, 2024 17:54

Merge branch '5.x' into feature/grid-widget-backend

bd40431

Use align-items: center instead of .m12

8ab3b5a

Use align-items: center instead of .m12

00c3545

Consider m12 for backwards compatibility

0e6e8ff

Remove unnecessary margins for .tl_checkbox

0ad58fb

Co-authored-by: leofeyer <1192057+leofeyer@users.noreply.github.com>

Rebuild the assets

c0f6333

leofeyer approved these changes May 22, 2024

View reviewed changes

leofeyer enabled auto-merge (squash) May 22, 2024 10:05

leofeyer merged commit c8e1d25 into contao:5.x May 22, 2024
18 checks passed

leofeyer mentioned this pull request May 22, 2024

Fix the .nogrid backwards compatibility layer #7229

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Render widget groups in the back end with CSS grid #7087

Render widget groups in the back end with CSS grid #7087

zoglo commented Apr 4, 2024 •

edited

zoglo commented Apr 4, 2024

zoglo commented Apr 9, 2024 •

edited

fritzmg commented Apr 10, 2024

zoglo commented Apr 10, 2024

zoglo commented Apr 10, 2024

fritzmg left a comment

leofeyer commented May 10, 2024

leofeyer commented May 22, 2024

fritzmg commented May 22, 2024

Render widget groups in the back end with CSS grid #7087

Render widget groups in the back end with CSS grid #7087

Conversation

zoglo commented Apr 4, 2024 • edited

Rewrite

Additional classes

Custom properties

zoglo commented Apr 4, 2024

zoglo commented Apr 9, 2024 • edited

fritzmg commented Apr 10, 2024

zoglo commented Apr 10, 2024

zoglo commented Apr 10, 2024

Media queries

Custom properties

fritzmg left a comment

Choose a reason for hiding this comment

leofeyer commented May 10, 2024

leofeyer commented May 22, 2024

fritzmg commented May 22, 2024

zoglo commented Apr 4, 2024 •

edited

zoglo commented Apr 9, 2024 •

edited