Bartosz Dziewoński has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/394769 )
Change subject: Set `max-width: 50em` for entire FieldLayout and all aligns
......................................................................
Set `max-width: 50em` for entire FieldLayout and all aligns
This was more complicated than it needed to be and behaved
unexpectedly in some cases, like putting a LabelWidget inside the
FieldLayout rather than using its label (T181733).
Bug: T181733
Change-Id: Ica96f4d48c0a5914f1dfb0aa7330c9e8a49b84bc
---
M demos/styles/demo.css
M src/themes/apex/layouts.less
M src/themes/wikimediaui/layouts.less
3 files changed, 10 insertions(+), 22 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/69/394769/1
diff --git a/demos/styles/demo.css b/demos/styles/demo.css
index cc8d70e..25af588 100644
--- a/demos/styles/demo.css
+++ b/demos/styles/demo.css
@@ -309,11 +309,6 @@
/* Special cases: ActionFieldLayout top aligned,
FieldLayout left & right aligned */
-.oo-ui-fieldLayout-align-left,
-.oo-ui-fieldLayout-align-right {
- max-width: 50em;
-}
-
.oo-ui-fieldLayout-align-top.oo-ui-actionFieldLayout .demo-link-example,
.oo-ui-fieldLayout-align-top.oo-ui-actionFieldLayout .demo-console-toggle,
.oo-ui-fieldLayout-align-left .demo-link-example,
diff --git a/src/themes/apex/layouts.less b/src/themes/apex/layouts.less
index 4f13a2b..f3a56ef 100644
--- a/src/themes/apex/layouts.less
+++ b/src/themes/apex/layouts.less
@@ -31,6 +31,11 @@
.theme-oo-ui-fieldLayout () {
margin-top: 1em;
+ &-body,
+ &-messages {
+ max-width: @max-width-base;
+ }
+
&.oo-ui-fieldLayout-align-left,
&.oo-ui-fieldLayout-align-right {
> .oo-ui-fieldLayout-body {
@@ -60,10 +65,6 @@
&.oo-ui-fieldLayout-align-inline {
margin-top: 1.25em;
- & > .oo-ui-fieldLayout-body {
- max-width: @max-width-base;
- }
-
&.oo-ui-labelElement > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header {
padding: 0.25em 0 0.25em 0.5em;
}
@@ -75,7 +76,6 @@
&.oo-ui-fieldLayout-align-top {
&.oo-ui-labelElement > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header {
- max-width: @max-width-base;
padding: 0.5em 0;
}
}
@@ -127,9 +127,6 @@
}
.theme-oo-ui-actionFieldLayout () {
- &.oo-ui-fieldLayout-align-top {
- max-width: 50em;
- }
}
.theme-oo-ui-fieldsetLayout () {
diff --git a/src/themes/wikimediaui/layouts.less
b/src/themes/wikimediaui/layouts.less
index 8a4f8a2..725ee78 100644
--- a/src/themes/wikimediaui/layouts.less
+++ b/src/themes/wikimediaui/layouts.less
@@ -42,6 +42,11 @@
// At base `font-size: 12.8px` we just relatively follow M101 design
guideline here
margin-top: 1.25em; // `1.5em` in the guideline, we go for
`1.25em`≈`16px`
+ &-body,
+ &-messages {
+ max-width: @max-width-base;
+ }
+
&.oo-ui-labelElement,
&.oo-ui-fieldLayout-align-inline {
margin-top: 0.9375em; // `1.25em` in the guideline, we go for
`0.9375em`≈`12px`
@@ -62,11 +67,6 @@
> .oo-ui-labelElement-label {
line-height: @line-height-form-element;
}
- }
-
- &.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header,
- &.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
- max-width: @max-width-base;
}
&.oo-ui-fieldLayout-align-left,
@@ -163,10 +163,6 @@
}
.theme-oo-ui-actionFieldLayout () {
- &.oo-ui-fieldLayout-align-top {
- max-width: @max-width-base;
- }
-
.oo-ui-actionFieldLayout-button .oo-ui-buttonElement-frameless {
margin-left: @padding-horizontal-frameless; // Address
frameless negative margin focus hack
}
--
To view, visit https://gerrit.wikimedia.org/r/394769
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ica96f4d48c0a5914f1dfb0aa7330c9e8a49b84bc
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
