Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fehler bei w50-Klasse #1024

Closed
dazzle89 opened this issue Nov 27, 2019 · 15 comments · Fixed by #7087 · May be fixed by #2053
Closed

Fehler bei w50-Klasse #1024

dazzle89 opened this issue Nov 27, 2019 · 15 comments · Fixed by #7087 · May be fixed by #2053
Labels
feature help wanted Issues and PRs which are looking for volunteers to complete them. up for discussion Issues and PRs which will be discussed in our monthly Mumble calls.

Comments

@dazzle89
Copy link

Bei der Verwendung der CSS-Klasse w50 habe ich schon öfters das Problem gehabt, dass zum einen der Abstand der beidenden floatenden Container zur nächsten Überschrift darunter viel zu gering ist. Es ist quasi gar kein Abstand vorhanden. Zum anderen lässt sich das input-Feld der beiden w50-Container nicht anklicken. Ich kann nur über die TAB-Taste dahin gelangen und die Felder ausfüllen.

Das Problem habe momentan mit Metamodels, hatte es früher aber auch schon bei den Rocksolid Custom Elements. Daher könnte es vielleicht ein genereller Contao-Fehler sein?

Ich verwende Contao 4.8.5., der Fehler trat aber auch bei älteren Versionen schon auf. Getestet in sämtlichen Browsern auf dem Mac.
@fritzmg
Copy link
Contributor

fritzmg commented Nov 27, 2019

Wenn du Felder, die w50 verwenden, gemeinsam mit Feldern verwendest, die kein w50 haben, dann musst du clr verwenden.

@dazzle89
Copy link
Author

Danke und sorry, ich dachte es sei ein Fehler. Vielleicht könnte man hier irgendwann ja trotzdem eine automatische Lösung für das Clearen anstreben.

@fritzmg
Copy link
Contributor

fritzmg commented Nov 27, 2019

Mja, das ganze Backend auf flex umbauen 😁

@m-vo
Copy link
Member

m-vo commented Nov 27, 2019

Grid!

@aschempp
Copy link
Member

aschempp commented Nov 29, 2019 via email

@Tastaturberuf
Copy link
Contributor

Manchmal wünsch ich mir schon so 3-4 Felder in einer Reihe zu haben, vorallem bei "kleinen" Widget-Values.

@zonky2
Copy link
Contributor

zonky2 commented Jan 2, 2020

@Tastaturberuf siehe #1119

@Tastaturberuf
Copy link
Contributor

Oh nice. Ich nutze ich OM-Backend eh relativ oft.

@leofeyer leofeyer added the help wanted Issues and PRs which are looking for volunteers to complete them. label Jun 12, 2020
@m-vo m-vo mentioned this issue Aug 1, 2020
Draft
@zoglo
Copy link
Contributor

zoglo commented Apr 3, 2024 •
edited

Kinda wanna re-discuss this issue and propose using CSS-Flex due to having the possibility of the new classes in 5.x such as:
.w25, .w33, .w50, .w66, .w75

In common cases, you'd want to use different layouts based on logic like we did here for improved UX
(Yes, this example also uses .w20 🙃)
image

I don't see #2053 as a good solution when trying to display it based on the mentioned example above.
Sometimes it's not about visuals but about the UX aspect.

Flex would be BC compatible and devs could still use the classes that they were used to... tho I'd want to think further and would like to introduce col-classes based on the 12 column system.

Meaning we'd be able to use:

BC class New class Columns %
- .col-1 1/12 8.33
- .col-2 2/12 16.66
.w25 .col-3 3/12 25.00
.w33 .col-4 4/12 33.33
- .col-5 5/12 41.66
.w50 .col-6 6/12 50.00
.w66 .col-8 8/12 66.66
.w75 .col-9 9/12 75.00
- .col-10 10/12 83.33
- .col-11 11/12 91.66
.w100 .col-12 12/12 100.00

Having .w50, .col-6 { width... } together in the css won't be as big and make sure that you could still use the new classes.
Maybe the width-classes could be removed in Contao 7 🤔 .

(We could also introduce breakpoint specific classes as well...)

Either way, rewriting current float to flexbox should happen long-term and would also work with the current width classes.

Wdyt @leofeyer @ausi ?

@aschempp
Copy link
Member

aschempp commented Apr 4, 2024

I would like to see a flex-implementation as well. Not sure we really need columns, a static mix of the existing classes makes most sense to me. But we sure do need responsive classes… because .w25 on a mobile is unusable :D

@ausi
Copy link
Member

ausi commented Apr 4, 2024

But we sure do need responsive classes… because .w25 on a mobile is unusable :D

What do you mean by that? Why is .w25 unusable on mobile?
.w25 is set to 25%, 50% and 100% at screen min-widths of 1280px, 767px and 0px respectively.

tho I'd want to think further and would like to introduce col-classes based on the 12 column system.

I’m +1 for using flexbox, but im not sure about the .col-x classes. I’d just add some more wXX classes like w20, w40 and w80.

@fritzmg
Copy link
Contributor

fritzmg commented Apr 4, 2024

I'd still prefer #2053

@leofeyer leofeyer added the up for discussion Issues and PRs which will be discussed in our monthly Mumble calls. label Apr 4, 2024
@leofeyer
Copy link
Member

leofeyer commented Apr 4, 2024

As discussed in the Contao call, we probably have to use grid because we need float clearing (aka column-start: 1). However, we would prefer flex if we can solve the float clearing problem.

@zoglo zoglo mentioned this issue Apr 4, 2024
Merged
@ausi
Copy link
Member

ausi commented Apr 5, 2024

we would prefer flex if we can solve the float clearing problem.

I was not able to find a clean (CSS-only) solution to implement clear: left inside a wrapping flexbox layout.
We’d need to insert an extra HTML element before every .clr widget.

@leofeyer
Copy link
Member

leofeyer commented Apr 5, 2024

That's not an option, I guess.

@leofeyer leofeyer linked a pull request May 2, 2024 that will close this issue
Render widget groups in the back end with CSS grid #7087
Merged
@leofeyer leofeyer closed this as completed May 2, 2024
leofeyer added a commit that referenced this issue May 22, 2024
@zoglo @leofeyer
Render widget groups in the back end with CSS grid (see #7087)
c8e1d25 
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature help wanted Issues and PRs which are looking for volunteers to complete them. up for discussion Issues and PRs which will be discussed in our monthly Mumble calls.
Projects
None yet
Milestone
No milestone
9 participants
@ausi @Tastaturberuf @zonky2 @aschempp @leofeyer @fritzmg @m-vo @dazzle89 @zoglo