Update server list looks

* Squeeze a bit more servers into the list * Fixed column widths/position/text alignment, to squeeze in more info
Facepunch · May 1, 2014 · ae86e2a · ae86e2a
1 parent ccc462e
commit ae86e2a
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 61 deletions.
diff --git a/garrysmod/html/css/menu/Servers.css b/garrysmod/html/css/menu/Servers.css
@@ -72,7 +72,7 @@ H1 small
 	top: 90px;
 	bottom: 0px;
 	left: 0px;
-	right: 360px;
+	right: 320px;
 	background-color: white;
 	padding: 10px;
 	border-radius: 4px;
@@ -88,13 +88,42 @@ H1 small
 	overflow: hidden;
 	height: 16px;
 	position: absolute;
+	text-align: center;
+}
+
+.serverlist name
+{
+	position: absolute;
+	overflow: hidden;
+	white-space: nowrap;
+	left: 4px;
+	right: 240px;
+	font-size: 13px;
+}
+
+.serverlist map
+{
+	right: 148px;
+	width: 90px;
+	text-align: left;
+}
+
+.serverlist players
+{
+	right: 100px;
+	width: 48px;
+}
+
+.serverlist ping
+{
+	right: 68px;
+	width: 32px;
 }
 
 .serverlist rank
 {
-	right: 8px;
+	right: 4px;
 	width: 64px;
-	text-align: right;
 }
 
 .serverlist .server rank
@@ -122,36 +151,7 @@ H1 small
 	background-image: url( '../../img/rank2.png?1' );
 }
 
-.serverlist ping
-{
-	right: 80px;
-	width: 50px;
-	text-align: right;
-}
-
-.serverlist players
-{
-	right: 110px;
-	width: 40px;
-	text-align: right;
-}
 
-.serverlist map
-{
-	right: 150px;
-	text-align: left;
-	width: 80px;
-}
-
-.serverlist name
-{
-	position: absolute;
-	overflow: hidden;
-	white-space: nowrap;
-	left: 8px;
-	right: 240px;
-	font-size: 13px;
-}
 
 .serverlist .server
 {
@@ -190,11 +190,11 @@ H1 small
 .serverlist .header 
 {
 	background-color: #6af;
-	height: 31px;
+	height: 30px;
 	position: absolute;
 	border-radius: 4px 4px 0 0;
 	padding-top: 4px;
-	font-size: 10px;
+	font-size: 11px;
 }
 
 .serverlist .header ping, .serverlist .header maxplayers, .serverlist .header players, .serverlist .header map, .serverlist .header name, .serverlist .header rank
@@ -216,35 +216,20 @@ H1 small
 
 	.serverlist name
 	{
-		font-size: 14px;
+		font-size: 13px;
 		font-weight: bold;
-		padding-top: 3px;
 		right: 280px;
 	}
-
-	.serverlist .server
-	{
-		height: 24px;
-	}
-
+
 	.serverlist map
 	{
-		width: 100px;
-		right: 170px;
-	}
-
-	.serverlist players
-	{
-		right: 130px;
-		width: 80px;
-		text-align: right;
+		width: 130px;
 	}
 
 	.serverlist .header name
 	{
 		padding: 0;
 	}
-
 }
 
 
@@ -279,7 +264,7 @@ A.bglink
 	position: absolute;
 	top: 90px;
 	bottom: 0px;
-	width: 320px;
+	width: 280px;
 	right: 0px;
 	background-color: white;
 	padding: 10px 15px;

diff --git a/garrysmod/html/template/servers.html b/garrysmod/html/template/servers.html
@@ -79,16 +79,16 @@ <h1 class="menuheader">
 			<div class='serverlist'>
 
 				<div class='header' style="top: 8px; left: 8px; right: 8px;">
-						<name ng-click="ChangeOrder( CurrentGamemode, 'name' )" ng-tranny="'server_name_header'"></name>
-						<ping ng-click="ChangeOrder( CurrentGamemode, 'ping' )" ng-tranny="'server_ping'"></ping>
-						<players ng-click="ChangeOrder( CurrentGamemode, '-players' )" ng-tranny="'server_players'"></players>
-						<map ng-click="ChangeOrder( CurrentGamemode, 'map' )" ng-tranny="'server_mapname'"></map>
-						<rank ng-click="ChangeOrder( CurrentGamemode, 'recommended' )" ng-tranny="'server_ranking'"></rank>
+					<name ng-click="ChangeOrder( CurrentGamemode, 'name' )" ng-tranny="'server_name_header'"></name>
+					<ping ng-click="ChangeOrder( CurrentGamemode, 'ping' )" ng-tranny="'server_ping'"></ping>
+					<players ng-click="ChangeOrder( CurrentGamemode, '-players' )" ng-tranny="'server_players'"></players>
+					<map ng-click="ChangeOrder( CurrentGamemode, 'map' )" ng-tranny="'server_mapname'"></map>
+					<rank ng-click="ChangeOrder( CurrentGamemode, 'recommended' )" ng-tranny="'server_ranking'"></rank>
 				</div>
 
 				<div class='body scrollable' style="top: 32px; left: 8px; right: 8px; bottom: 8px;">
 
-					<div ng-repeat="server in CurrentGamemode.servers|filter:CurrentGamemode.Search|orderBy:CurrentGamemode.OrderBy:CurrentGamemode.OrderReverse|limitTo:100" class="server {{ServerClass(server)}} {{IfElse( CurrentGamemode.Selected == server, 'activeserver', '' )}}" ng-click="SelectServer( server )" ng-dblclick="JoinServer( server )">
+					<div ng-repeat="server in CurrentGamemode.servers|filter:CurrentGamemode.Search|orderBy:CurrentGamemode.OrderBy:CurrentGamemode.OrderReverse|limitTo:128" class="server {{ServerClass(server)}} {{IfElse( CurrentGamemode.Selected == server, 'activeserver', '' )}}" ng-click="SelectServer( server )" ng-dblclick="JoinServer( server )">
 						<name><img src='img/server-passworded.png' style="margin-right: 8px;" ng-show="server.pass"/>{{server.name}}</name>
 						<ping>{{server.ping}}</ping>
 						<players>{{server.players}} / {{server.maxplayers}}</players>
@@ -140,7 +140,6 @@ <h1 class="menuheader">
 			</div>
 
 		</div>
-
 
 	</div>
-
+