fix responsive behaviour of topbar

smogon · Oct 21, 2024 · cf726b7 · cf726b7
1 parent 8737e39
commit cf726b7
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 7 deletions.
diff --git a/play.pokemonshowdown.com/js/client-topbar.js b/play.pokemonshowdown.com/js/client-topbar.js
@@ -36,7 +36,7 @@
 			if (!app.user.loaded) {
 				buf = '<button disabled class="button">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> <span class="usernametext">' + BattleLog.escapeHTML(name) + '</span></span>';
+				buf = '<span class="username myuser" 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" class="button">Choose name</button>';
 			}

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

diff --git a/play.pokemonshowdown.com/style/client.css b/play.pokemonshowdown.com/style/client.css
@@ -2,7 +2,7 @@
  * Global
  *********************************************************/
 
-html, body {
+ html, body {
 	margin: 0;
 	padding: 0;
 	height: 100%;
@@ -75,9 +75,12 @@ select {
 
 .userbar {
 	position: absolute;
-	top: 12px;
+	top: 13px;
 	right: 12px;
 	font-weight: bold;
+	display: flex;
+	align-items: center;
+	gap: 5px;
 }
 .userbar .username {
 	color: black;
@@ -86,9 +89,49 @@ select {
 .username {
 	cursor: pointer;
 }
-@media (max-width: 500px) {
+.myuser {
+	display: flex;
+	align-items: flex-end;
+	gap: 5px;
+}
+.usernametext {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding-right: 1px;
+}
+@media (max-width:350px) {
+	.usernametext {
+		max-width: 90px;
+	}
+}
+@media (min-width:351px) and (max-width:419px) {
+	.usernametext {
+		max-width: 120px;
+	}
+}
+@media (min-width:420px) and (max-width:600px) {
+	.usernametext {
+		max-width: 65px;
+	}
+}
+@media (min-width:601px) and (max-width:659px) {
+	.usernametext {
+		max-width: 120px;
+	}
+}
+@media (min-width:660px) and (max-width:1023px) {
 	.usernametext {
-		display: none
+		max-width: 90px;
+	}
+}
+@media (min-width:1024px) and (max-width: 1439px) {
+	.usernametext {
+		max-width: 140px;
+	}
+}
+@media (min-width:1440px) {
+	.usernametext {
+		max-width: 200px;
 	}
 }
 .userbar button.icon {
@@ -140,9 +183,33 @@ select {
 }
 .tabbar.maintabbar {
 	margin-left: 144px;
-	margin-right: 165px;
 	overflow: hidden;
 }
+@media (max-width: 599px) {
+	.tabbar.maintabbar {
+		margin-right: 165px;
+	}
+}
+@media (min-width: 600px) and (max-width: 659px) {
+	.tabbar.maintabbar {
+		margin-right: 225px;
+	}
+}
+@media (min-width: 660px) and (max-width: 1023px) {
+	.tabbar.maintabbar {
+		margin-right: 190px;
+	}
+}
+@media (min-width: 1024px) and (max-width: 1439px) {
+	.tabbar.maintabbar {
+		margin-right: 240px;
+	}
+}
+@media (min-width: 1440px) {
+	.tabbar.maintabbar {
+		margin-right: 320px;
+	}
+}
 .tabbar.maintabbar.minitabbar {
 	margin-left: 0;
 }