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 <matma....@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits