From 902c2b18dcc3ca01cb12beb8340d33a8538538f2 Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Sat, 27 Apr 2013 19:20:18 -0700
Subject: [PATCH] Design improvements to ladder room

The ladder room is now at parity with the old client's ladder page.
---
 js/client-ladder.js | 10 +++++-----
 style/client.css    | 22 +++++++++++++++++++++-
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/js/client-ladder.js b/js/client-ladder.js
index 003bc8490..51b4c6902 100644
--- a/js/client-ladder.js
+++ b/js/client-ladder.js
@@ -14,7 +14,7 @@
 			if (!this.curFormat) {
 				var ladderButtons = '';
 				if (!window.BattleFormats) {
-					this.$el.html('Loading...');
+					this.$el.html('<div class="pad"><em>Loading...</em></div>');
 					return;
 				}
 				for (var i in BattleFormats) {
@@ -22,19 +22,19 @@
 					if (!format.searchShow || !format.rated) continue;
 					ladderButtons += '<li style="margin:5px"><button value="select" data-format="'+i+'" style="width:400px;height:30px;text-align:left;font:12pt Verdana">'+format.name+'</button></li>';
 				}
-				this.$el.html('<div><p>See a user\'s ranking with <code>/ranking <em>username</em></code></p>' + 
+				this.$el.html('<div class="ladder pad"><p>See a user\'s ranking with <code>/ranking <em>username</em></code></p>' + 
 					//'<p><strong style="color:red">I\'m really really sorry, but as a warning: we\'re going to reset the ladder again soon to fix some more ladder bugs.</strong></p>' +
 	 				'<p>(btw if you couldn\'t tell the ladder screens aren\'t done yet; they\'ll look nicer than this once I\'m done.)</p><ul>' +
 					ladderButtons +
 					'</ul></div>');
 			} else {
 				var format = this.curFormat;
-				this.$el.html('<div><p><button value="select"><i class="icon-chevron-left"></i> Format List</button></p><p><em>Loading...</em></p></div>');
+				this.$el.html('<div class="ladder pad"><p><button value="select"><i class="icon-chevron-left"></i> Format List</button></p><p><em>Loading...</em></p></div>');
 				$.get('/ladder.php?format='+encodeURIComponent(format)+'&server='+encodeURIComponent(Config.server.id.split(':')[0])+'&output=html', _.bind(function(data){
 					if (this.curFormat !== format) return;
-					var buf = '<p><button value="select"><i class="icon-chevron-left"></i> Format List</button></p>';
+					var buf = '<div class="ladder pad"><p><button value="select"><i class="icon-chevron-left"></i> Format List</button></p>';
 					buf += '<h3>'+format+' Top 100</h3>';
-					buf += data;
+					buf += data+'</div>';
 					this.$el.html(buf);
 				}, this), 'html');
 			}
diff --git a/style/client.css b/style/client.css
index 782e394d3..55fc1ddd4 100644
--- a/style/client.css
+++ b/style/client.css
@@ -21,7 +21,7 @@ body {
 
 .pad {
 	margin: 0;
-	padding: 0 15px;
+	padding: 5px 15px;
 }
 .label {
 	font-size: 9pt;
@@ -341,6 +341,26 @@ body {
 	box-shadow: 0 1px 2px rgba(0,0,0,.1);
 }
 
+/*********************************************************
+ * Ladder
+ *********************************************************/
+
+.ladder table, .ladder td, .ladder th {
+	border-collapse: collapse;
+	border: 1px solid #BBBBBB;
+}
+.ladder td, .ladder th {
+	padding: 3px 5px;
+}
+.ladder th {
+	text-align: left;
+	font-size: 9pt;
+	background: #EEEEEE;
+}
+.ladder span {
+	color: gray;
+}
+
 /*********************************************************
  * Chat
  *********************************************************/