From: Thalia <thalia.e.chan@googlemail.com>
Date: Tue, 27 Nov 2018 16:17:07 +0000 (+0000)
Subject: Improve layout of ExpiryInputWidget on mobile
X-Git-Tag: 1.34.0-rc.0~3278^2
X-Git-Url: http://git.cyclocoop.org/%24image?a=commitdiff_plain;h=31aaf2ee85f4c00782c263b9775e39751c942f56;p=lhc%2Fweb%2Fwiklou.git

Improve layout of ExpiryInputWidget on mobile

Bug: T208271
Change-Id: If3f9c417cd2fad98165b8a2eaef9a05673ce5b4d
---

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;
+		}
+	}
 }