Clean up the rest of the main index style issues.

I will need to make "table-hover" class additions to all the tables
that need their backgrounds changed upon hover.

diff --git a/xonstat/static/css/app.css b/xonstat/static/css/app.css
index eb71103854c186232f5ad8d2bf9f99ba5d6b1d9f..c0f438d6bc317f1313e868fd5656f5a2624bf97c 100644 (file)
--- a/xonstat/static/css/app.css
+++ b/xonstat/static/css/app.css
@@ -17,6 +17,74 @@ body {
     color: #D0D0D0;
     font-family: "XoloniumNormal", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small {
+  font-weight: normal;
+  color: #999999;
+}
+h1 {
+  font-size: 30px;
+  line-height: 36px;
+}
+h1 small {
+  font-size: 18px;
+}
+h2 {
+  font-size: 24px;
+  line-height: 36px;
+}
+h2 small {
+  font-size: 18px;
+}
+h3 {
+  line-height: 27px;
+  font-size: 18px;
+}
+h3 small {
+  font-size: 14px;
+}
+h4, h5, h6 {
+  line-height: 18px;
+}
+h4 {
+  font-size: 14px;
+}
+h4 small {
+  font-size: 12px;
+}
+h5 {
+  font-size: 12px;
+}
+h6 {
+  font-size: 11px;
+  color: #999999;
+  text-transform: uppercase;
+}
+table {
+    background: rgb(0, 0, 0); /* IE Fallback */
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
+    border: 1px solid #436688;
+}
+table th { border: 1px solid #436688; background-color: #001021; }
+table td {
+    border: 1px solid #436688;
+    font-size: 10px;
+}
+.table-hover > tbody > tr:hover > td,
+.table-hover > tbody > tr:hover > th {
+    background-color: #222;
+}
+.table td {
+    vertical-align: middle;
+}
+.table .tdcenter { text-align: center; }
+
+
+/* One-off elements */
 #statline {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 13px;
@@ -31,6 +99,14 @@ body {
     margin-left: 0px;
     padding: 20px;
 }
+#title {
+    color: #0088CC;
+    font-size: 30px;
+    margin-bottom: 15px;
+    position: relative;
+    text-align: center;
+    text-shadow: 2px 2px 3px #333;
+}
 
 
 /* Navigation bar */
@@ -56,6 +132,7 @@ body {
     width: 100px;
 }
 
+
 /* Desktop-specific stuff */
 @media (min-width: 768px) {
     .navbar-form {

diff --git a/xonstat/templates/main_index.mako b/xonstat/templates/main_index.mako
index e310f8c3bd3a88d6f83a027c68c3a405a8725fe9..62d98872f7dce5e4b85886db6935c548aed85dff 100644 (file)
--- a/xonstat/templates/main_index.mako
+++ b/xonstat/templates/main_index.mako
@@ -5,74 +5,76 @@ Leaderboard
 </%block>
 
 <%block name="css">
-    ${parent.css()}
-    <link href="/static/css/sprites.css" rel="stylesheet">
+  ${parent.css()}
+  <link href="/static/css/sprites.css" rel="stylesheet">
 </%block>
 
 <%block name="hero_unit">
-    <div class="text-center">
-        <img src="/static/css/img/web_background_l2.png" />
-        % if summary_stats is None:
-        <p id="statline">Tracking Xonotic statistics since October 2011.</p>
-        % else:
-        <p id="statline">Tracking <a href="${request.route_url('player_index')}">${summary_stats.total_players}</a> players, <a href="${request.route_url('game_index')}">${summary_stats.total_games}</a> games (${summary_stats.duel_games} duel, ${summary_stats.ctf_games} ctf, ${summary_stats.dm_games} dm), and <a href="${request.route_url('server_index')}">${summary_stats.total_servers}</a> servers since October 2011.</p>
-        % endif
-    </div>
+  <div class="text-center">
+    <img src="/static/css/img/web_background_l2.png" />
+    % if summary_stats is None:
+    <p id="statline">Tracking Xonotic statistics since October 2011.</p>
+    % else:
+    <p id="statline">Tracking <a href="${request.route_url('player_index')}">${summary_stats.total_players}</a> players, <a href="${request.route_url('game_index')}">${summary_stats.total_games}</a> games (${summary_stats.duel_games} duel, ${summary_stats.ctf_games} ctf, ${summary_stats.dm_games} dm), and <a href="${request.route_url('server_index')}">${summary_stats.total_servers}</a> servers since October 2011.</p>
+    % endif
+  </div>
 </%block>
 
+##### RANKS #####
 % if len(ranks) < 3:
-<div class="row">
-  <div class="span12">
-    <p style="text-align: center;"><i class="icon-white icon-info-sign"> </i> You don't seem to have any ranks yet.</p>
-  </div> <!-- span12 -->
-</div> <!-- row -->
-% else:
-<div class="row">
-% for rs in ranks[:3]:
-  % if len(rs) > 0:
-  <div class="span4">
+  <div class="row">
+    <div class="span12">
+      <p style="text-align: center;"><i class="icon-white icon-info-sign"> </i> You don't seem to have any ranks yet.</p>
+    </div> <!-- span12 -->
+  </div> <!-- row -->
 
-    % if rs[0].game_type_cd == 'duel':
-    <h3>Duel Ranks</h3>
-    % elif rs[0].game_type_cd == 'ctf':
-    <h3>CTF Ranks</h3>
-    % elif rs[0].game_type_cd == 'dm':
-    <h3>DM Ranks</h3>
-    % endif
+% else:
+  <div class="row">
+    % for rs in ranks[:3]:
+    % if len(rs) > 0:
+    <div class="span4">
+      % if rs[0].game_type_cd == 'duel':
+      <h3>Duel Ranks</h3>
+      % elif rs[0].game_type_cd == 'ctf':
+      <h3>CTF Ranks</h3>
+      % elif rs[0].game_type_cd == 'dm':
+      <h3>DM Ranks</h3>
+      % endif
 
-    <table class="table table-bordered table-condensed">
-      <thead>
-        <tr>
-          <th>#</th>
-          <th>Nick</th>
-          <th>Elo</th>
-        </tr>
-      </thead>
-      <tbody>
-      <% i = 1 %>
-      % for r in rs:
+      <table class="table table-hover table-condensed">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Nick</th>
+            <th>Elo</th>
+          </tr>
+        </thead>
+        <tbody>
+        <% i = 1 %>
+        % for r in rs:
         <tr>
           <td>${i}</td>
           <td><a href="${request.route_url('player_info', id=r.player_id)}" title="Go to the player info page for this player">${r.nick_html_colors()|n}</a></td>
           <td>${round(r.elo, 3)}</td>
         </tr>
         <% i = i+1 %>
-      % endfor
-      </tbody>
-    </table>
-    <p class="note"><a href="${request.route_url('rank_index', page=1, game_type_cd=rs[0].game_type_cd)}" title="See more ${rs[0].game_type_cd} rankings">More...</a></p>
-  </div> <!-- /span4 -->
+        % endfor
+        </tbody>
+      </table>
+      <p class="note"><a href="${request.route_url('rank_index', page=1, game_type_cd=rs[0].game_type_cd)}" title="See more ${rs[0].game_type_cd} rankings">More...</a></p>
+    </div> <!-- /span4 -->
   % endif
 
-% endfor
+  % endfor
 </div> <!-- row -->
 % endif
 
 
+##### ACTIVE PLAYERS #####
 <div class="row">
   <div class="span4">
     <h3>Most Active Players</h3>
-    <table class="table table-bordered table-condensed">
+    <table class="table table-hover table-condensed">
       <thead>
         <tr>
           <th>#</th>
@@ -99,9 +101,11 @@ Leaderboard
     <p class="note">*Most active stats are from the past 7 days</p>
   </div> <!-- /span4 -->
 
+
+##### ACTIVE SERVERS #####
   <div class="span4">
     <h3>Most Active Servers</h3>
-    <table class="table table-bordered table-condensed">
+    <table class="table table-hover table-condensed">
       <thead>
         <tr>
           <th>#</th>
@@ -127,9 +131,11 @@ Leaderboard
     </table>
   </div> <!-- /span4 -->
 
+
+##### ACTIVE MAPS #####
   <div class="span4">
     <h3>Most Active Maps</h3>
-    <table class="table table-bordered table-condensed">
+    <table class="table table-hover table-condensed">
       <thead>
         <tr>
           <th>#</th>
@@ -156,11 +162,13 @@ Leaderboard
   </div> <!-- /span4 -->
 </div> <!-- /row -->
 
+
+##### RECENT GAMES #####
 % if len(recent_games) > 0:
 <div class="row">
   <div class="span12">
     <h3>Recent Games</h3>
-    <table class="table table-bordered table-condensed">
+    <table class="table table-hover table-condensed">
       <thead>
         <tr>
           <th></th>
@@ -175,7 +183,6 @@ Leaderboard
       % for rg in recent_games:
         <tr>
           <td class="tdcenter"><a class="btn btn-primary btn-small" href="${request.route_url('game_info', id=rg.game_id)}" title="View detailed information about this game">view</a></td>
-          <!-- <td class="gt_icon"><img title="${rg.game_type_cd}" src="/static/images/icons/24x24/${rg.game_type_cd}.png" alt="${rg.game_type_cd}" /></td> -->
           <td class="tdcenter"><span class="sprite sprite-${rg.game_type_cd}" alt="${rg.game_type_cd}" title="${rg.game_type_descr}"></span></td>
           <td><a href="${request.route_url('server_info', id=rg.server_id)}" title="Go to the detail page for this server">${rg.server_name}</a></td>
           <td><a href="${request.route_url('map_info', id=rg.map_id)}" title="Go to the map detail page for this map">${rg.map_name}</a></td>