From 2c526bfdbcaf1fec9af85be392388569ff135caf Mon Sep 17 00:00:00 2001
From: Isarra <zhorishna@gmail.com>
Date: Tue, 13 Aug 2019 21:08:10 +0000
Subject: [PATCH] Make personal menu header expand to show (more of) full
 usernames

* Lose the special casing replacement labels for long usernames and
  just truncate in CSS with '...' or whatever
* Fix weird padding on two-column mode
* Possibly cleaner Echo badge/whatever handling
* Alignment fixes in general

Note: Breaks two-column layout for IE9-. Probably easily fixed (don't
apply that one line to it), but I don't know how, and don't care.

Bug: T161282
Bug: T173215
Change-Id: I7d27e13265ee54767c509387baf6430bd7c4792d
---
 i18n/en.json                   |  1 -
 i18n/qqq.json                  |  1 -
 includes/TimelessTemplate.php  |  8 +-----
 resources/extensions/Echo.less | 48 ++++++++--------------------------
 resources/screen-misc.less     | 42 +++++++++++++++++++++++++++++
 5 files changed, 54 insertions(+), 46 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index bce6196..62b2a8a 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -4,7 +4,6 @@
 	},
 	"skinname-timeless": "Timeless",
 	"timeless-desc": "A timeless skin designed after the Winter prototype by Brandon Harris, and various styles by the Wikimedia Foundation",
-	"timeless-loggedin": "Your account",
 	"timeless-anonymous": "Anonymous",
 	"timeless-loggedinas": "Logged in as '''$1'''",
 	"timeless-notloggedin": "Not logged in",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 6550202..a37fe9c 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -11,7 +11,6 @@
 	},
 	"skinname-timeless": "{{name}}",
 	"timeless-desc": "{{desc|what=skin|name=Timeless|url=https://www.mediawiki.org/wiki/Skin:Timeless}}",
-	"timeless-loggedin": "Label for logged in users' user menu (if their username is too long to fit)",
 	"timeless-anonymous": "Label for anonymous (not logged in) user menu\n{{Identical|Anonymous}}",
 	"timeless-loggedinas": "Note for personal menu for logged in users noting their current username\n\nParameters:\n* $1 - username",
 	"timeless-notloggedin": "Note for personal menu for anonymous users clarifying that they are not logged in\n{{Identical|Not logged in}}",
diff --git a/includes/TimelessTemplate.php b/includes/TimelessTemplate.php
index ad43975..300cec3 100644
--- a/includes/TimelessTemplate.php
+++ b/includes/TimelessTemplate.php
@@ -531,13 +531,7 @@ class TimelessTemplate extends BaseTemplate {
 
 		// Labels
 		if ( $user->isLoggedIn() ) {
-			// Make sure it fits first (numbers slightly made up, may need adjusting)
-			$fit = empty( $extraTools ) ? 13 : 9;
-			if ( mb_strlen( $userName ) < $fit ) {
-				$dropdownHeader = $userName;
-			} else {
-				$dropdownHeader = $this->getMsg( 'timeless-loggedin' )->text();
-			}
+			$dropdownHeader = $userName;
 			$headerMsg = [ 'timeless-loggedinas', $userName ];
 		} else {
 			$dropdownHeader = $this->getMsg( 'timeless-anonymous' )->text();
diff --git a/resources/extensions/Echo.less b/resources/extensions/Echo.less
index 70320ed..27c183e 100644
--- a/resources/extensions/Echo.less
+++ b/resources/extensions/Echo.less
@@ -1,54 +1,40 @@
 @import '../variables.less';
 
 @media screen {
-	.mw-echo-alert {
-		display: block;
-		padding: 0.25em 1em;
-		margin: 0 -1em;
+	div.mw-echo-ui-overlay {
+		z-index: 100;
 	}
 
 	/* Handle and position Echo icons */
-
-	#personal h2,
-	#personal-extra,
-	#personal-extra ul,
-	#personal-extra li {
-		display: inline-block;
-	}
-
 	#personal-extra {
-		// Position and keep it from randomly overflowing massively for no apparent reason
-		margin: 0.7em 0 -2em 0;
 		white-space: nowrap;
 
 		ul {
 			list-style: none;
-			margin: 0 -1em 0 0;
+			margin: 0.85em 0 0;
 			padding: 0;
 		}
 
 		li {
-			margin: 0 0.75em 0 0;
+			margin: 0 0.4em 0 0;
 			float: left;
 		}
 	}
 
-	@media ( min-width: @desktop-small-floor ) {
-		#personal-extra {
-			float: left;
-			margin-left: -4.5em;
+	@media ( min-width: @desktop-mid-floor ) {
+		div#personal {
+			padding-left: 0;
 		}
 
-		.extension-icons {
-			#p-search {
-				margin-right: 21em;
-			}
+		#personal-extra {
+			float: left;
+			padding: 0 0.75em;
 		}
 	}
 
 	@media ( min-width: @desktop-small-floor ) and ( max-width: @desktop-small-width ) {
 		.extension-icons #p-search {
-			margin-right: 11em;
+			margin-right: 10em;
 		}
 
 		#personal-extra {
@@ -56,18 +42,6 @@
 		}
 	}
 
-	@media ( min-width: @desktop-mid-floor ) and ( max-width: @desktop-mid-width ) {
-		.extension-icons {
-			#user-tools {
-				width: auto;
-			}
-
-			.color-middle {
-				margin-right: @column-left-size + 2 * @content-padding + 4em;
-			}
-		}
-	}
-
 	@media ( max-width: @mobile-width ) {
 		.mw-echo-ui-notificationBadgeButtonPopupWidget {
 			z-index: 2;
diff --git a/resources/screen-misc.less b/resources/screen-misc.less
index cb144ac..6a04e86 100644
--- a/resources/screen-misc.less
+++ b/resources/screen-misc.less
@@ -14,3 +14,45 @@
 		}
 	}
 }
+
+// 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;
+	}
+}