Make the ranks page mobile-friendly.

diff --git a/xonstat/templates/rank_index.mako b/xonstat/templates/rank_index.mako
index 809a1640c975dd8ea1dc66b9a707ec6483371238..c6ea4540426d2a4ec3e3f960f7127f0376a4dcb7 100644 (file)
--- a/xonstat/templates/rank_index.mako
+++ b/xonstat/templates/rank_index.mako
@@ -2,46 +2,46 @@
 <%namespace file="navlinks.mako" import="navlinks" />
 
 <%block name="title">
-% if game_type_cd == 'dm':
-Deathmatch Rank Index
-% elif game_type_cd == 'duel':
-Duel Rank Index
-% elif game_type_cd == 'tdm':
-Team Deathmatch Rank Index
-% elif game_type_cd == 'ctf':
-Capture The Flag Rank Index
-% endif
+  % if game_type_cd == 'dm':
+    Deathmatch Rank Index
+  % elif game_type_cd == 'duel':
+    Duel Rank Index
+  % elif game_type_cd == 'tdm':
+    Team Deathmatch Rank Index
+  % elif game_type_cd == 'ctf':
+    Capture The Flag Rank Index
+  % endif
 </%block>
 
 <div class="row">
-  <div class="span6 offset3">
+  <div class="small-12 large-6 large-offset-3 columns">
     % if not ranks:
-    <h2>Sorry, no ranks yet. Get some buddies together and start playing!</h2>
+      <h2>Sorry, no ranks yet. Get some buddies together and start playing!</h2>
 
     % else:
-    <table id="rank-index-table" class="table table-hover table-condensed" border="1">
-      <tr>
-        <th style="width:40px;">Rank</th>
-        <th style="width:420px;">Nick</th>
-        <th style="width:90px;">Elo</th>
-      </tr>
-      <% i = 1 %>
-      % for rank in ranks:
-      <tr>
-        <td>${rank.rank}</td>
-        <td class="nostretch" style="max-width:420px;"><a href="${request.route_url("player_info", id=rank.player_id)}" title="Go to this player's info page">${rank.nick_html_colors()|n}</a></th>
-        <td>${int(round(rank.elo))}</th>
-      </tr>
-      <% i += 1 %>
-      % endfor
-    </table>
-  </div> <!-- /span6 -->
-</div> <!-- /row -->
+      <table class="table table-hover table-condensed" border="1">
+        <tr>
+          <th class="small-2">Rank</th>
+          <th class="small-8">Nick</th>
+          <th class="small-2">Elo</th>
+        </tr>
+        <% i = 1 %>
+        % for rank in ranks:
+        <tr>
+          <td>${rank.rank}</td>
+          <td class="no-stretch"><a href="${request.route_url("player_info", id=rank.player_id)}" title="Go to this player's info page">${rank.nick_html_colors()|n}</a></th>
+          <td>${int(round(rank.elo))}</th>
+        </tr>
+        <% i += 1 %>
+        % endfor
+      </table>
+    % endif
+  </div>
+</div>
 
 <div class="row">
-  <div class="span6 offset3">
+  <div class="small-12 large-6 large-offset-3 columns">
     <!-- navigation links -->
     ${navlinks("rank_index", ranks.page, ranks.last_page, game_type_cd=game_type_cd)}
-  </div> <!-- /span6 -->
-</div> <!-- /row -->
-% endif
+  </div>
+</div>