Render widget groups with CSS grid #2053
Conversation
|
I honestly don't think CSS Grid is the right approach for widgets. The overall layout should/could be Grid, but the widgets are flow elements that should use flex if anything. https://webdesign.tutsplus.com/articles/flexbox-vs-css-grid-which-should-you-use--cms-30184
I don't think that's the case with the Contao back end DCA form. |
|
You cannot do stuff like |
|
Each single widget can be rendered with flex (if required), but they should be arranged on the page using grid. |
Our DCA form is no different to a page layout: it has fixed-sized columns + you do not want to have reflow/relayout. It's a 2-dimensional problem (columns + aligned/"cleared" rows) which imo is best solved with grid. Flexbox layouting is content-driven by nature. That's why it is so good for one-dimensional layouts without fixed sizes or for situations where you e.g. dynamically want to reflow elements into the next row and that take up all available space. |
|
the time is ready for grid |
|
Closing this as I currently do not have plans to continue this PR. Anyone interested feel free to pick up the work. I think we should tackle these things as a part of a bigger BE rework when we know where we want to go. Otherwise we're likely breaking edge cases by implementing something new that wouldn't be future proof either. |
| } | ||
| .widget-group > * { | ||
| -ms-grid-column: 1; | ||
| -ms-grid-column-span: 12; |
There was a problem hiding this comment.
I think we should remove the -ms- prefixes
Description ----------- 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<br>_(Defaults to 12)_ | | `--widget-cols` | Amount of space that this takes per row<br>_(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 | Commits ------- df706f1 Rewrite #2053 for Contao 5.3 (5.x) 13ff350 Mobile and tablet styles for grid widgets 67d15bd Revert editorConfig 8524095 Add a size range for grid template columns 84ca874 Update grid-layout b8fab3f Use `grid-column-end` for widget cols abd0710 Rebuild the assets 608b93e Use custom properties for backend widgets and introduce `w16` 87c308d Mobile first + CS ef4799a Update widget layout 1ec3509 Revert the unrelated changes 5c0d886 Consider more classes for backwards compatibility 937c34b Run the tools 8ab3b5a Use `align-items: center` instead of `.m12` 00c3545 Use `align-items: center` instead of `.m12` 0e6e8ff Consider `m12` for backwards compatibility 0ad58fb Remove unnecessary margins for `.tl_checkbox` c0f6333 Rebuild the assets Co-authored-by: leofeyer <1192057+leofeyer@users.noreply.github.com>
This is an early draft to render the BE widgets as grid elements. See #1824 (comment).
Open questions/notes:
fieldsetas grid parent (display:contents+ the definition on the parent instead would be another solution but this does not work on IE11).