Make Donate collapsible into user links dropdown, and make header more responsive

Bug: T375903
Bug: T375901
Depends-on: I52c1dde47fb46bba7cd62d0fa28cba2c77b0c9e6
Change-Id: I48b439f6e6f573172f3d334c1816cf84be675b24

includes/Components/VectorComponentUserLinks.php

@@ -237,7 +237,7 @@ class VectorComponentUserLinks implements VectorComponent {
 	public function getTemplateData(): array {
 		$portletData = $this->portletData;
 
-		$isDefaultAnonUserLinks = count( $portletData['data-user-menu']['array-items'] ) === 2;
+		$isDefaultAnonUserLinks = count( $portletData['data-user-menu']['array-items'] ) === 3;
 		$isAnonEditorLinksEnabled = isset( $portletData['data-user-menu-anon-editor']['is-empty'] )
 			&& !$portletData['data-user-menu-anon-editor']['is-empty'];
 
@@ -277,7 +277,13 @@ class VectorComponentUserLinks implements VectorComponent {
 							// * login
 							// * create account
 							$name = $item['name'];
-							return in_array( $name, [ 'watchlist', 'createaccount', 'login', 'login-private' ] );
+							return in_array( $name, [
+								'watchlist',
+								'createaccount',
+								'login',
+								'login-private',
+								'sitesupport'
+							] );
 						}
 					)
 				)

includes/Hooks.php

@@ -287,6 +287,9 @@ class Hooks implements
 			if ( isset( $content_navigation['user-menu']['createaccount'] ) ) {
 				$content_navigation['user-menu']['createaccount']['collapsible'] = true;
 			}
+			if ( isset( $content_navigation['user-menu']['sitesupport'] ) ) {
+				$content_navigation['user-menu']['sitesupport']['collapsible'] = true;
+			}
 
 			// Anon editor links handled manually in new anon editor menu
 			$anonEditorMenu = [];

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

@@ -1,11 +1,16 @@
 .mw-header {
 	// Vertical centering of header elements (IE>=11), requires Flexbox.
 	.flex-display();
-	flex-wrap: nowrap;
+	flex-wrap: wrap;
 	// https://caniuse.com/#search=align-items
 	align-items: center;
 	padding-top: 8px;
 	padding-bottom: 8px;
+	gap: @spacing-100;
+
+	.vector-header-start {
+		gap: 20px;
+	}
 
 	.vector-header-start,
 	.vector-header-end {
@@ -20,13 +25,10 @@
 	.search-toggle {
 		// At lower resolutions the search input is hidden and a toggle is shown
 		display: inline-flex;
+		float: right;
 		// Ensures the button has a font size of 16px
 		font-size: unit( 16 / @font-size-browser, rem );
 
-		@media ( min-width: @min-width-breakpoint-mobile ) {
-			float: right;
-		}
-
 		@media ( min-width: @min-width-breakpoint-desktop ) {
 			// Override .cdx-button styles
 			display: none !important;  /* stylelint-disable-line declaration-no-important */
@@ -41,13 +43,6 @@
 		}
 	}
 
-	@media ( max-width: @max-width-breakpoint-mobile ) {
-		#p-search,
-		.vector-header-end {
-			.cdx-mixin-button-layout-flush( 'start', true );
-		}
-	}
-
 	@media ( max-width: @max-width-breakpoint-tablet ) {
 		/**
 	 	 * Toggles the visibility of the search box at lower resolutions.

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

@@ -5,16 +5,6 @@
 	height: 100%;
 	// Center vertically.
 	align-items: center;
-	// Hamburger menu icon with padding (22px + 12px = 46px) + right margin (12px) + logo (222px @ 16) + space between
-	// logo and searchbox (28px) = 296px which equals the sum of widths of sidebar elements (i.e. TOC) when toggled.
-	// 226px @ 16 provides correct spacing between the right edge of logo container + left edge of searchbox input.
-	min-width: 13.875em; // 222px @ 16
-
-	.vector-feature-main-menu-pinned-disabled & {
-		// The logo is 40px from the page container.
-		// Main menu button width (20px) + 20px = 40px
-		margin-left: 20px;
-	}
 }
 
 .mw-logo-icon {
@@ -22,9 +12,15 @@
 	// This will be ignored in flexbox browsers.
 	float: left;
 	margin-right: 10px;
+	// Hide mobile icon at lower resolutions and defer to wordmark
+	display: none;
 	@size-mw-logo-icon: unit( 50 / @font-size-browser, em );
 	width: @size-mw-logo-icon;
 	height: @size-mw-logo-icon;
+
+	@media ( min-width: @min-width-breakpoint-tablet ) {
+		display: block;
+	}
 }
 
 .mw-logo-container {

resources/skins.vector.styles/layouts/screen.less

@@ -114,17 +114,6 @@ body {
 	background-color: @background-color-page-container;
 }
 
-@media ( max-width: @max-width-breakpoint-mobile ) {
-	.vector-header {
-		flex-flow: column;
-	}
-
-	.vector-header-start,
-	.vector-header-end {
-		width: 100%;
-	}
-}
-
 @media ( min-width: @min-width-breakpoint-desktop ) {
 	.mw-page-container,
 	.vector-header-container .mw-header,