Design improvements to ladder room

The ladder room is now at parity with the old client's ladder page.
This commit is contained in:
Guangcong Luo
2013-04-27 19:20:18 -07:00
committed by Cathy J. Fitzpatrick
parent ac1984cf09
commit 902c2b18dc
2 changed files with 26 additions and 6 deletions

View File

@@ -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');
}

View File

@@ -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
*********************************************************/