From 31aaf2ee85f4c00782c263b9775e39751c942f56 Mon Sep 17 00:00:00 2001 From: Thalia Date: Tue, 27 Nov 2018 16:17:07 +0000 Subject: [PATCH] Improve layout of ExpiryInputWidget on mobile Bug: T208271 Change-Id: If3f9c417cd2fad98165b8a2eaef9a05673ce5b4d --- .../mw.widgets.ExpiryInputWidget.less | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/resources/src/mediawiki.widgets/mw.widgets.ExpiryInputWidget.less b/resources/src/mediawiki.widgets/mw.widgets.ExpiryInputWidget.less index cd0cbd7ace..b3c25fafb8 100644 --- a/resources/src/mediawiki.widgets/mw.widgets.ExpiryInputWidget.less +++ b/resources/src/mediawiki.widgets/mw.widgets.ExpiryInputWidget.less @@ -1,8 +1,12 @@ +// TODO: Redefined here to avoid importing variables.less; +@width-breakpoint-desktop: 1000px; + @wm-expirywidget-text-width: 43.3em; .mw-widget-ExpiryWidget.mw-widget-ExpiryWidget-hasDatePicker { .oo-ui-buttonSelectWidget { - float: left; + display: inline-block; + vertical-align: top; } .oo-ui-textInputWidget.mw-widget-ExpiryWidget-relative { @@ -10,7 +14,16 @@ max-width: @wm-expirywidget-text-width; } + .mw-widget-selectWithInputWidget { + display: inline; + } + + .mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-dropdownInputWidget { + display: inline-block; + } + .mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-textInputWidget { + display: inline-block; max-width: 22.8em; } @@ -23,4 +36,18 @@ max-height: 2.286em; } } + + @media ( max-width: ( @width-breakpoint-desktop - 1px ) ) { + .mw-widget-selectWithInputWidget { + display: block; + } + + .mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-dropdownInputWidget, + .mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-textInputWidget, + .mw-widgets-datetime-dateTimeInputWidget { + display: block; + max-width: 50em; + margin-top: 0.5em; + } + } } -- 2.20.1