Use the gametype icons in the tabs!

diff --git a/xonstat/static/css/style.css b/xonstat/static/css/style.css
index b47f14accc2561f54321792b34eceeadb022d914..d8720661712eda625af652f54c5a0ec9ca12d4e7 100755 (executable)
--- a/xonstat/static/css/style.css
+++ b/xonstat/static/css/style.css
@@ -2113,7 +2113,7 @@ button.btn.small, input[type="submit"].btn.small {
 }
 .nav > li > a:hover {
   text-decoration: none;
-  background-color: #eeeeee;
+  /*background-color: #eeeeee;*/
 }
 .nav-list {
   padding-left: 14px;
@@ -3506,10 +3506,9 @@ header h2 { display:none; }
 /* Player Info Tabs */
 #gbtabcontainer { margin-top: 10px; }
 #gbtab { font-size: 12px; }
-.tabs-right .nav-tabs { border: none; }
-.nav-tabs > .active > a, .nav-tabs > .active > a:hover { background-color: #111; color: #aaa;}
-.tabs-right .nav-tabs > li > a { border-radius: 4px 4px 4px 4px; }
-.tabs-right .nav-tabs .active > a, .tabs-right .nav-tabs .active > a:hover { border-color: #222222 #222222 #222222 #222222; }
-.tabs-right .nav-tabs > li > a:hover { border-color: #222222 #222222 #222222 #222222; }
-.nav > li > a:hover { background-color: #333; color: #aaa; }
 .tabbable p { font-size: 14px; }
+.tabs-below .nav-tabs > li > a { border-radius: 4px 4px 4px 4px; }
+.nav-tabs > .active > a, .nav-tabs > .active > a:hover { background-color: #111; color: #aaa; border-color: #222; }
+.nav-tabs > li > a { border-radius: 4px 4px 4px 4px; text-align: center; }
+.nav-tabs > li > a:hover { background-color: #111; border-color: #333; }
+.nav-tabs { border-bottom: 0px solid #000; }

diff --git a/xonstat/static/images/icons/24x24/overall.png b/xonstat/static/images/icons/24x24/overall.png
new file mode 100644 (file)
index 0000000..802165a
Binary files /dev/null and b/xonstat/static/images/icons/24x24/overall.png differ

diff --git a/xonstat/templates/player_info.mako b/xonstat/templates/player_info.mako
index ecdc4babfcbf3f8194a17853eab172f9936bcabb..6ec476e68da170501f0277cb88a535b562e57787 100644 (file)
--- a/xonstat/templates/player_info.mako
+++ b/xonstat/templates/player_info.mako
@@ -13,12 +13,12 @@ ${nav.nav('players')}
       <script src="/static/js/bootstrap-tab.js"></script>
       <script type="text/javascript">
       $(function () {
-        $('#gbtab').click(function(e) {
+        $('#gbtab li').click(function(e) {
             e.preventDefault();
             $(this).tab('show');
         })
 
-      $('#gbtab a:first').tab('show');
+        $('#gbtab a:first').tab('show');
       })
       </script>
 
@@ -194,13 +194,7 @@ Player Information
 </div>
 
 <div class="row">
-  <div id="gbtabcontainer" class="tabbable tabs-right">
-      <ul id="gbtab" class="nav nav-tabs">
-      % for g in games_played:
-        <li><a href="#tab-${g.game_type_cd}" data-toggle="tab">${g.game_type_cd} (${g.games})</a></li>
-      % endfor
-      </ul>
-
+  <div id="gbtabcontainer" class="tabbable tabs-below">
       <div class="tab-content">
       % for g in games_played:
         <div class="tab-pane fade in 
@@ -262,6 +256,21 @@ Player Information
       </div>
   </div>
 </div>
+<div class="row">
+  <div class="span12">
+      <ul id="gbtab" class="nav nav-tabs">
+      % for g in games_played:
+        <li>
+          <a href="#tab-${g.game_type_cd}" data-toggle="tab">
+            <img src="/static/images/icons/24x24/${g.game_type_cd}.png"> <br />
+            ${g.game_type_cd} <br />
+            <small>(${g.games})</small>
+          </a>
+        </li>
+      % endfor
+      </ul>
+  </div>
+</div>
 
 
 % if 'nex' in recent_weapons or 'rifle' in recent_weapons or 'minstanex' in recent_weapons or 'uzi' in recent_weapons or 'shotgun' in recent_weapons: