Use flex for logo container width and to show some username on small screens

* No columns, so no point aligning anything to column-widths here.
* Add some IE9 fallbacks because the entire header is now flex.
* Clean up, consolidate same styles, etc

Bug: T184998
Change-Id: Iecf99d093a689d3c32932b2603f16939127ce7bd

includes/SkinTimeless.php

@@ -33,6 +33,9 @@ class SkinTimeless extends SkinTemplate {
 			'skins.timeless.js',
 			'skins.timeless.mobile'
 		] );
+
+		// Basic IE support without flexbox
+		$out->addStyle( $this->stylename . '/resources/IE9fixes.css', 'screen', 'IE' );
 	}
 
 	/**

resources/IE9fixes.css

@@ -0,0 +1,16 @@
+/* Basic support for desktop-small and -mid because IE9 doesn't do flexbox */
+/* Mobile/desktop-full would need a bit more, but nobody cares */
+#p-search {
+	margin-left: 14em;
+	margin-right: 16em;
+}
+
+#p-logo-text {
+	width: 14em;
+	float: left;
+}
+
+#user-tools {
+	width: 16em;
+	float: right;
+}

resources/extensions/Echo.less

@@ -21,7 +21,7 @@
 		}
 	}
 
-	@media ( min-width: @desktop-mid-floor ) {
+	@media ( min-width: @desktop-small-floor ) {
 		div#personal {
 			padding-left: 0;
 		}
@@ -32,16 +32,6 @@
 		}
 	}
 
-	@media ( min-width: @desktop-small-floor ) and ( max-width: @desktop-small-width ) {
-		.extension-icons #p-search {
-			margin-right: 10em;
-		}
-
-		#personal-extra {
-			margin-left: -2.5em;
-		}
-	}
-
 	@media ( max-width: @mobile-width ) {
 		.mw-echo-ui-notificationBadgeButtonPopupWidget {
 			z-index: 2;

resources/screen-common.less

@@ -78,7 +78,7 @@ body {
 
 		/* images */
 		&.wordmark {
-			padding: 0;
+			padding: 0 0.5em 0 0;
 		}
 	}
 }

resources/screen-desktop-full.less

@@ -7,6 +7,10 @@
 	clear: both;
 }
 
+#p-logo-text {
+	min-width: @column-left-size;
+}
+
 #mw-site-navigation {
 	.column-left();
 	.flex(0, 0, @column-left-size, 1);
@@ -27,3 +31,8 @@
 #catlinks {
 	display: none;
 }
+
+// For the more responsive username support
+#user-tools {
+	min-width: @column-right-size;
+}

resources/screen-desktop-mid.less

@@ -6,6 +6,10 @@
 	clear: both;
 }
 
+#p-logo-text {
+	min-width: @column-left-size;
+}
+
 #mw-site-navigation,
 #mw-related-navigation {
 	.column-left();
@@ -42,3 +46,8 @@
 .color-right {
 	background: @blue-dark;
 }
+
+.ts-inner,
+.color-middle-container {
+	max-width: @content-width - @column-right-size;
+}

resources/screen-desktop-small.less

@@ -4,6 +4,13 @@
 
 #mw-content-block {
 	padding: 0;
+	position: relative;
+	// In case of high resolution usage
+	max-width: @content-width - @column-left-size - @column-right-size;
+}
+
+.ts-inner {
+	max-width: @content-width - @column-left-size - @column-right-size;
 }
 
 #mw-content {
@@ -62,7 +69,6 @@
 }
 
 .sidebar-chunk:hover {
-	.pokey,
 	.sidebar-inner {
 		display: block !important;
 	}
@@ -83,7 +89,7 @@
 
 #mw-site-navigation {
 	position: absolute;
-	top: 3.1em;
+	top: -2.35em;
 	left: 2em;
 
 	.sidebar-chunk {
@@ -101,7 +107,7 @@
 
 #mw-related-navigation {
 	position: absolute;
-	top: 3.1em;
+	top: -2.35em;
 	right: 2em;
 
 	.sidebar-chunk {
@@ -123,6 +129,7 @@
 
 #p-logo-text a {
 	padding-left: 0;
+	padding-right: 0.5em;
 	text-align: left;
 }
 
@@ -136,22 +143,10 @@
 	float: right;
 
 	h2 span {
-		display: none;
+		max-width: 130px;
-	}
-
-	h2:after {
-		margin-left: -0.65em;
 	}
 
 	.dropdown {
 		right: -1em;
 	}
 }
-
-#user-tools {
-	width: 6em;
-}
-
-#p-search {
-	margin-right: 6em;
-}

resources/screen-desktop.less

@@ -26,6 +26,10 @@ div.mw-notification-area {
 
 /* Header */
 
+#mw-header {
+	.flex-display;
+}
+
 #mw-header-container {
 	/* Stupid IE10+ bug requires defining the height property for this to work
 	 * the way it is intended; without doing that this'll break horribly under
@@ -45,18 +49,29 @@ div.mw-notification-area {
 }
 
 #p-logo-text {
-	width: @column-left-size;
+	.flex(0, 0, auto, 1);
-	float: left;
 }
 
 #p-search {
-	margin-left: @column-left-size;
+	.flex(1, 1, auto, 2);
-	margin-right: @column-right-size;
 }
 
 #user-tools {
-	width: @column-right-size;
+	.flex(0, 1, auto, 3);
-	float: right;
+	display: inline-block;
+
+	h2 span {
+		display: inline-block;
+		max-width: 300px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	// Because the overflow:hidden above messes up the alignment...
+	#personal h2:after {
+		height: 18px;
+	}
 }
 
 #mw-header-nav-hack,

resources/screen-misc.less

@@ -15,48 +15,6 @@
 	}
 }
 
-// uuuuugh wat I don't know what's going on, everything after this is possibly a horrible idea
-// trying to handle changeable-width username container, I guess?
-@media screen and ( min-width: @desktop-mid-floor ) {
-	#mw-header {
-		.flex-display;
-	}
-
-	#user-tools {
-		.flex(0, 1, auto, 3);
-		display: inline-block;
-
-		h2 span {
-			display: inline-block;
-			max-width: 300px;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		// Because the overflow:hidden above messes up the alignment...
-		#personal h2:after {
-			height: 18px;
-		}
-	}
-
-	#p-logo-text {
-		.flex(0, 0, @column-left-size, 1);
-	}
-
-	#p-search {
-		.flex(1, 1, auto, 2);
-		// this line breaks IE for mid (two-column), too, but whatever
-		margin: 0;
-	}
-}
-
-@media screen and ( min-width: @desktop-large-floor ) {
-	#user-tools {
-		min-width: @column-right-size;
-	}
-}
-
 // Internet Explorer 10-11
 /* stylelint-disable media-feature-parentheses-space-inside */
 @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {