diff --git a/modules/ve-math/ve.ui.MWMathDialog.css b/modules/ve-math/ve.ui.MWMathDialog.css index 139d0e2..8cb23b4 100644 --- a/modules/ve-math/ve.ui.MWMathDialog.css +++ b/modules/ve-math/ve.ui.MWMathDialog.css @@ -26,6 +26,14 @@ overflow: auto; } +.ve-ui-mwMathDialog-menuLayout-short .oo-ui-menuLayout-menu { + height: 10em; +} + +.ve-ui-mwMathDialog-menuLayout-short .oo-ui-menuLayout-content { + bottom: 10em; +} + .ve-ui-mwMathPage-symbol { background-position: center; background-repeat: no-repeat; @@ -71,6 +79,11 @@ height: 10em; } +.ve-ui-mwMathDialog-menuLayout-short .ve-ui-mwMathDialog-preview { + line-height: 6em; + height: 6em; +} + /* Ensures the preview image is vertically centred */ .ve-ui-mwMathDialog-preview .mwe-math-fallback-image-display { display: inline-block; diff --git a/modules/ve-math/ve.ui.MWMathDialog.js b/modules/ve-math/ve.ui.MWMathDialog.js index 3f96aa7..a2fc701 100644 --- a/modules/ve-math/ve.ui.MWMathDialog.js +++ b/modules/ve-math/ve.ui.MWMathDialog.js @@ -276,14 +276,23 @@ ve.ui.MWMathDialog.prototype.getBodyHeight = function () { ve.ui.MWMathDialog.prototype.onWindowManagerResize = function () { var dialog = this; this.input.loadingPromise.done( function () { - // Wait for the window resize transition to finish + var availableSpace, maxInputHeight, singleLineHeight, minRows, + border = 1, + padding = 3, + borderAndPadding = 2 * ( border + padding ); + + // Toggle short mode as necessary + // NB a change of mode triggers a transition... + dialog.menuLayout.$element.toggleClass( + 've-ui-mwMathDialog-menuLayout-short', dialog.menuLayout.$element.height() < 450 + ); + + // ...So wait for the possible menuLayout transition to finish setTimeout( function () { - var availableSpace, maxInputHeight, singleLineHeight, minRows, - border = 1, - padding = 3; + // Give the input the right number of rows to fit the space availableSpace = dialog.menuLayout.$content.height() - dialog.input.$element.position().top; singleLineHeight = 19; - maxInputHeight = availableSpace - 2 * ( border + padding ); + maxInputHeight = availableSpace - borderAndPadding; minRows = Math.floor( maxInputHeight / singleLineHeight ); dialog.input.setMinRows( minRows ); }, 250 );