Finish up the game finder page.

I added styles to the nice row of gametype buttons at the top and made sure
that they didn't break the flow on mobile.

diff --git a/xonstat/static/css/app.css b/xonstat/static/css/app.css
index 07a916e38419b009858bda2b73dd4db4e4b1fba7..a15c61da9943ec28d4b4354ff4af8ea827f4c7d8 100644 (file)
--- a/xonstat/static/css/app.css
+++ b/xonstat/static/css/app.css
@@ -184,3 +184,18 @@ table thead tr th, table thead tr td, table tr th, table tr td {
   margin: 0;
   padding: 0.5rem 1rem 0.5rem;
 }
+
+.tabs dd > a, .tabs .tab-title > a {
+  background: none;
+  color: #aaa;
+  padding: 1rem;
+}
+
+.tabs dd > a:hover, .tabs .tab-title > a:hover {
+  background-color: #1D1D1D;
+}
+
+.tabs dd.active a, .tabs .tab-title.active a {
+  background-color: #111;
+  color: #aaa;
+}

diff --git a/xonstat/templates/game_finder.mako b/xonstat/templates/game_finder.mako
index 49ff842e380385f11c3623c1e04529aa28bf7235..a2ff12f887a7853c94c3fac19c8048f7502ebc27 100644 (file)
--- a/xonstat/templates/game_finder.mako
+++ b/xonstat/templates/game_finder.mako
@@ -20,7 +20,7 @@ Game Index
   <div class="small-12 columns">
     <ul class="tabs">
       % for gt, url in game_type_links:
-        <li class="tab-title
+        <li class="text-center tab-title
           % if game_type_cd == gt or (game_type_cd is None and gt == 'overall'):
             active
           % endif
@@ -39,7 +39,7 @@ Game Index
 
 ##### RECENT GAMES TABLE #####
 <div class="row">
-  <div class="span12">
+  <div class="small-12 columns">
     % if len(recent_games) > 0:
     <table class="table-hover table-condensed">
       <thead>