Merge "Correct ContentHeader source order to match design"

includes/templates/ContentHeader.mustache

@@ -2,17 +2,7 @@
     Content Header - Main <H1> title for all pages, with either the indicators or language selector.
     When language button is visible, indicators are placed in the ContentSubheader.mustache template instead.
 }}
-<header class="mw-body-header">
-    {{#is-language-in-content-top}}
-        {{#data-portlets.data-languages}}
-            {{>Menu}}
-        {{/data-portlets.data-languages}}
-    {{/is-language-in-content-top}}
-
-    {{^is-language-in-content-top}}
-        {{>Indicators}}
-    {{/is-language-in-content-top}}
-
+<header class="mw-body-header vector-page-titlebar">
 	{{#data-toc}}
 	<label
 		id="vector-toc-collapsed-button"
@@ -26,5 +16,16 @@
 		{{msg-vector-toc-collapsible-button-label}}
 	</label>
 	{{/data-toc}}
+
     {{{html-title-heading}}}
+
+	{{#is-language-in-content-top}}
+        {{#data-portlets.data-languages}}
+            {{>Menu}}
+        {{/data-portlets.data-languages}}
+    {{/is-language-in-content-top}}
+
+    {{^is-language-in-content-top}}
+        {{>Indicators}}
+    {{/is-language-in-content-top}}
 </header>

resources/skins.vector.styles/components/ContentHeader.less

@@ -0,0 +1,9 @@
+.vector-page-titlebar {
+	display: flex;
+	border-bottom: 1px solid @border-color-base;
+
+	.firstHeading {
+		flex-grow: 1;
+		border: 0;
+	}
+}

resources/skins.vector.styles/components/LanguageButton.less

@@ -12,6 +12,7 @@
 	margin-right: -@icon-padding-md;
 	box-sizing: border-box;
 	height: @height-button-lang;
+	flex-shrink: 0;
 
 	.mw-ui-icon:before {
 		// Put icon on correct standard normal state color.

resources/skins.vector.styles/skin.less

@@ -12,6 +12,7 @@
 
 	// Components
 	@import './components/ArticleToolbar.less';
+	@import './components/ContentHeader.less';
 	@import './components/SearchBoxLoader.less';
 	@import './components/VueEnhancedSearchBox.less';
 	@import './components/Sidebar.less';