Use the correct overflow for the ranks row. Percentages too!

diff --git a/xonstat/static/css/app.css b/xonstat/static/css/app.css
index 64dd5985e07dc11bb6686196bcadae29296a95a7..2fdcc01073b73b746681d950fef60e3858ebafdb 100644 (file)
--- a/xonstat/static/css/app.css
+++ b/xonstat/static/css/app.css
@@ -62,10 +62,33 @@ table thead tr th, table thead tr td, table tr th, table tr td {
   color: #D0D0D0;
 }
 
+.table-condensed {
+  table-layout: fixed;
+  width: 100%;
+}
+
 .table-condensed th, .table-condensed td {
   padding: 4px 5px;
 }
 
+.w15p {
+  width: 15%;
+}
+
+.w60p {
+  width: 60%;
+}
+
+.w25p {
+  width: 25%;
+}
+
+.no-stretch {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .top-bar {
   height: 50px;
 }
@@ -125,7 +148,6 @@ table thead tr th, table thead tr td, table tr th, table tr td {
   box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.7);
 }
 
-
 /* Footer */
 #footer {
   background: linear-gradient( rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 95% );
@@ -148,13 +170,6 @@ table thead tr th, table thead tr td, table tr th, table tr td {
   margin-left: 0;
 }
 
-.statline {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 0.9rem;
-  position: relative;
-  top: -20px;
-}
-
 #title {
   color: #08C;
   font-size: 1.8rem;
@@ -163,3 +178,16 @@ table thead tr th, table thead tr td, table tr th, table tr td {
   text-align: center;
   text-shadow: 2px 2px 3px #333;
 }
+
+.statline {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 0.9rem;
+  position: relative;
+  top: -20px;
+}
+
+.nostretch {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

diff --git a/xonstat/templates/main_index.mako b/xonstat/templates/main_index.mako
index fc7197ced36021874fac397be319f9617888d962..05682b16a9919635d4600dca63684788829ec901 100644 (file)
--- a/xonstat/templates/main_index.mako
+++ b/xonstat/templates/main_index.mako
@@ -27,7 +27,7 @@
 ##### RANKS #####
 % if len(ranks) < 4:
   <div class="row">
-    <div class="small-1 large-12 columns">
+    <div class="small-12 large-12 columns">
       <p class="text-center"><i class="icon-white icon-info-sign"> </i> You don't seem to have any ranks yet.</p>
     </div>
   </div>
@@ -36,7 +36,7 @@
   <div class="row">
     % for rs in ranks[:4]:
       % if len(rs) > 0:
-        <div class="small-1 large-3 columns">
+        <div class="small-12 large-3 columns">
           % if rs[0].game_type_cd == 'duel':
             <h5>Duel Ranks <a href="${request.route_url('rank_index', game_type_cd=rs[0].game_type_cd)}" title="See more ${rs[0].game_type_cd} rankings"><i class="fa fa-plus-circle"></i></a></h5>
           % elif rs[0].game_type_cd == 'ctf':
@@ -47,12 +47,12 @@
             <h5>TDM Ranks <a href="${request.route_url('rank_index', game_type_cd=rs[0].game_type_cd)}" title="See more ${rs[0].game_type_cd} rankings"><i class="fa fa-plus-circle"></i></a></h5>
           % endif
 
-          <table class="table table-hover table-condensed">
+          <table class="table-hover table-condensed">
             <thead>
               <tr>
-                <th style="width:40px;">#</th>
-                <th style="width:150px;">Nick</th>
-                <th style="width:60px;">Elo</th>
+                <th class="w15p">#</th>
+                <th class="w60p">Nick</th>
+                <th class="w25p">Elo</th>
               </tr>
             </thead>
             <tbody>
@@ -60,7 +60,7 @@
             % for r in rs:
             <tr>
               <td>${i}</td>
-              <td class="nostretch" style="max-width:150px;"><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 class="no-stretch"><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>${int(round(r.elo))}</td>
             </tr>
             <% i = i+1 %>
@@ -77,14 +77,14 @@
 
 ##### ACTIVE PLAYERS #####
 <div class="row">
-  <div class="small-1 large-4 columns">
+  <div class="small-12 large-4 columns">
     <h5>Most Active Players <a href="${request.route_url('top_players_by_time', page=1)}" title="See more player activity"><i class="fa fa-plus-circle"></i></a></h5>
       <table class="table table-hover table-condensed">
         <thead>
           <tr>
-            <th style="width:40px;">#</th>
-            <th style="width:150px;">Nick</th>
-            <th class="play-time" style="width:90px;">Play Time</th>
+            <th>#</th>
+            <th>Nick</th>
+            <th>Play Time</th>
           </tr>
         </thead>
         <tbody>
@@ -97,7 +97,7 @@
             % else:
             <td class="nostretch" style="max-width:150px;">${nick|n}</td>
             % endif
-            <td class="play-time">${alivetime}</td>
+            <td>${alivetime}</td>
           </tr>
           <% i = i+1 %>
         % endfor
@@ -107,14 +107,14 @@
 
 
 ##### ACTIVE SERVERS #####
-  <div class="small-1 large-4 columns">
+  <div class="small-12 large-4 columns">
     <h5>Most Active Servers <a href="${request.route_url('top_servers_by_players', page=1)}" title="See more server activity"><i class="fa fa-plus-circle"></i></a></h5>
     <table class="table table-hover table-condensed">
       <thead>
         <tr>
-          <th style="width:40px;">#</th>
-          <th style="width:180px;">Server</th>
-          <th style="width:60px;">Games</th>
+          <th>#</th>
+          <th>Server</th>
+          <th>Games</th>
         </tr>
       </thead>
       <tbody>
@@ -123,9 +123,9 @@
         <tr>
           <td>${i}</td>
           % if server_id != '-':
-          <td class="nostretch" style="max-width:180px;"><a href="${request.route_url('server_info', id=server_id)}" title="Go to the server info page for ${name}">${name}</a></td>
+          <td><a href="${request.route_url('server_info', id=server_id)}" title="Go to the server info page for ${name}">${name}</a></td>
           % else:
-          <td class="nostretch" style="max-width:180px;">${name}</td>
+          <td>${name}</td>
           % endif
           <td>${count}</td>
         </tr>
@@ -137,14 +137,14 @@
 
 
 ##### ACTIVE MAPS #####
-  <div class="small-1 large-4 columns">
+  <div class="small-12 large-4 columns">
     <h5>Most Active Maps <a href="${request.route_url('top_maps_by_times_played', page=1)}" title="See more map activity"><i class="fa fa-plus-circle"></i></a></h5>
     <table class="table table-hover table-condensed">
       <thead>
         <tr>
-          <th style="width:40px;">#</th>
-          <th style="width:180px;">Map</th>
-          <th style="width:60px;">Games</th>
+          <th>#</th>
+          <th>Map</th>
+          <th>Games</th>
         </tr>
       </thead>
       <tbody>
@@ -153,9 +153,9 @@
         <tr>
           <td>${i}</td>
           % if map_id != '-':
-          <td class="nostretch" style="max-width:180px;"><a href="${request.route_url('map_info', id=map_id)}" title="Go to the map info page for ${name}">${name}</a></td>
+          <td><a href="${request.route_url('map_info', id=map_id)}" title="Go to the map info page for ${name}">${name}</a></td>
           % else:
-          <td class="nostretch" style="max-width:180px;">${name}</td>
+          <td>${name}</td>
           % endif
           <td>${count}</td>
         </tr>
@@ -166,14 +166,14 @@
   </div>
 </div>
 <row class="span12">
-    <p class="note">*Most active stats are from the past 7 days</p>
+    <p>*Most active stats are from the past 7 days</p>
 </div>
 
 
 ##### RECENT GAMES #####
 % if len(recent_games) > 0:
 <div class="row">
-  <div class="small-1 large-12 columns">
+  <div class="small-12 columns">
     <h3>Recent Games</h3>
     <table class="table table-hover table-condensed">
       <thead>
@@ -189,7 +189,7 @@
       <tbody>
       % 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><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="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>