Esanders has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/385421 )
Change subject: Cleanup use of min-height to prevent vertical height flicker
......................................................................
Cleanup use of min-height to prevent vertical height flicker
Remove non-calc fallback for unsupported/rarely used browsers.
Bug: T95207
Change-Id: Ide684e204539877ee951c409b592f03d4c91683c
---
M modules/styles/flow.variables.less
M modules/styles/flow/widgets/editor/mw.flow.ui.EditorSwitcherWidget.less
M modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
3 files changed, 8 insertions(+), 13 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow
refs/changes/21/385421/1
diff --git a/modules/styles/flow.variables.less
b/modules/styles/flow.variables.less
index 2765e4e..2325747 100644
--- a/modules/styles/flow.variables.less
+++ b/modules/styles/flow.variables.less
@@ -1,7 +1,9 @@
@topicIndent: 1em;
@replyIndent: 1.5em;
@textareaPadding: 0.3em;
-@editorToolbarHeight: 40px;
+// @todo This value is specific to MW theme, it is different in Apex.
+// Actual toolbar height is 40px, adds an extra pixel to leave room for focus
inset
+@editorToolbarHeight: 41px;
@editorMinHeight: 10em;
// @todo: Use same variable as MobileFrontend
diff --git
a/modules/styles/flow/widgets/editor/mw.flow.ui.EditorSwitcherWidget.less
b/modules/styles/flow/widgets/editor/mw.flow.ui.EditorSwitcherWidget.less
index e4257f5..9b99cdb 100644
--- a/modules/styles/flow/widgets/editor/mw.flow.ui.EditorSwitcherWidget.less
+++ b/modules/styles/flow/widgets/editor/mw.flow.ui.EditorSwitcherWidget.less
@@ -5,19 +5,13 @@
.flow-ui-editorSwitcherWidget {
display: block;
background-color: #fff;
+ // The placeholder should be the same height as the editor: minHeight +
toolbarHeight
+ // Also prevents height flicker when switching (T95207)
+ min-height: calc( @editorMinHeight ~'+' @editorToolbarHeight );
&-placeholder-input {
max-width: none;
background-color: transparent;
- // Provide fallback for browsers that don't have calc function
- // (Currently IE8, Opera Mini, Android 4.3)
- min-height: @editorMinHeight;
- // The placeholder should be the same height as the editor:
minHeight + toolbarHeight.
- // However, each of those is in different
- // units (minHeight in em and toolbarHeight in px) which means
we must
- // use CSS's native calc() method.
- // This escapes the calc() method while using LESS variables:
- min-height: ~'calc( @{editorMinHeight} + @{editorToolbarHeight}
)';
& textarea {
border: 0;
diff --git a/modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
b/modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
index 996c3bf..a463684 100644
--- a/modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
+++ b/modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
@@ -15,8 +15,7 @@
.flow-ui-wikitextEditorWidget .oo-ui-textInputWidget {
// This creates a space for the toolbar, a matching negative
margin-top
// shifts the toolbar into this location.
- // @todo This value is specific to MW theme, is different in
Apex.
- padding-bottom: @editorToolbarHeight + 1px;
+ padding-bottom: @editorToolbarHeight;
}
// Undo .mw-body-content font-size (0.875em) and apply font-size
matching OOUI theme (0.8em)
@@ -32,7 +31,7 @@
font-size: @uiFontSize;
// The 1px of positive margin gives room for the blue
border
// of the TextInputWidget
- margin: ( -@editorToolbarHeight - 1px ) 1px 1px 1px;
+ margin: -@editorToolbarHeight 1px 1px 1px;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/385421
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ide684e204539877ee951c409b592f03d4c91683c
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
