Hide username on screens smaller than 500px (smogon#1973)

MathyFurret · Mar 25, 2024 · 4feae2b · 4feae2b
1 parent b4f1141
commit 4feae2b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/js/client-topbar.js b/js/client-topbar.js
@@ -36,7 +36,7 @@
 			if (!app.user.loaded) {
 				buf = '<button disabled>Loading...</button>';
 			} else if (app.user.get('named')) {
-				buf = '<span class="username" data-name="' + BattleLog.escapeHTML(name) + '"' + (away ? ' data-away="true"' : '') + (status ? 'data-status="' + BattleLog.escapeHTML(status) + '"' : '') + ' style="' + color + '"><i class="fa fa-user" style="color:' + (away ? '#888;' : '#779EC5') + '"></i> ' + BattleLog.escapeHTML(name) + '</span>';
+				buf = '<span class="username" data-name="' + BattleLog.escapeHTML(name) + '"' + (away ? ' data-away="true"' : '') + (status ? 'data-status="' + BattleLog.escapeHTML(status) + '"' : '') + ' style="' + color + '"><i class="fa fa-user" style="color:' + (away ? '#888;' : '#779EC5') + '"></i> <span class="usernametext">' + BattleLog.escapeHTML(name) + '</span></span>';
 			} else {
 				buf = '<button name="login">Choose name</button>';
 			}

diff --git a/src/panel-topbar.tsx b/src/panel-topbar.tsx
@@ -213,7 +213,7 @@ class PSHeader extends preact.Component<{style: {}}> {
 		}
 		const userColor = window.BattleLog && {color: BattleLog.usernameColor(PS.user.userid)};
 		return <span class="username" data-name={PS.user.name} style={userColor}>
-			<i class="fa fa-user" style="color:#779EC5"></i> {PS.user.name}
+			<i class="fa fa-user" style="color:#779EC5"></i> <span class="usernametext">{PS.user.name}</span>
 		</span>;
 	}
 	render() {

diff --git a/style/client.css b/style/client.css
@@ -289,6 +289,11 @@ select {
 .username {
 	cursor: pointer;
 }
+@media (max-width: 500px) {
+	.usernametext {
+		display: none
+	}
+}
 .userbar button.icon {
 	height: 25px;
 	width: 27px;
@@ -2008,7 +2013,7 @@ a.ilink.yours {
 	white-space: pre;
 	overflow: hidden;
 }
-.allyparty button .picon, 
+.allyparty button .picon,
 .switchmenu button .picon {
 	float: left;
 	margin: -6px -3px -6px -4px;

diff --git a/style/client2.css b/style/client2.css
@@ -148,6 +148,11 @@ body {
 .username {
 	cursor: pointer;
 }
+@media (max-width: 500px) {
+	.usernametext {
+		display: none
+	}
+}
 .userbar button.icon {
 	height: 25px;
 	width: 27px;