Add styles to make the headers vertical.

diff --git a/xonstat/static/css/app.css b/xonstat/static/css/app.css
index 17c6a1108778c065c29461ce71099d9cee3d05cb..16df5166cdbffc6ea8237ce16feb26c978cf0d8c 100644 (file)
--- a/xonstat/static/css/app.css
+++ b/xonstat/static/css/app.css
@@ -310,3 +310,16 @@ ul.accordion {
 .tabs-content {
   margin-bottom: 0;
 }
+
+/* Tables with vertical headers */
+.rotated {
+  font-size: 10px;
+  font-weight: normal;
+  overflow: hidden;
+  white-space: nowrap;
+  writing-mode: vertical-lr;
+}
+
+td.bg {
+  background-color: #001021;
+}

diff --git a/xonstat/templates/frag_matrix.mako b/xonstat/templates/frag_matrix.mako
index ee321b6d7ee640b5024e4301f0f817faeacefa98..7c1c5ceebc49496d423264fd3db7f306d89d6db2 100644 (file)
--- a/xonstat/templates/frag_matrix.mako
+++ b/xonstat/templates/frag_matrix.mako
@@ -2,17 +2,17 @@
 
 ## Displays a frag matrix table, in scoreboardpos order from top to bottom and left to right
 
-<table class="table-hover table-condensed">
+<table>
   <thead>
     <th></th>
     % for pgstat in pgstats:
-    <th>${pgstat.nick_html_colors()|n}</th>
+    <th><span class="rotated">${pgstat.nick_html_colors()|n}</span></th>
     % endfor
   </thead>
 
   % for fragger in pgstats:
   <tr>
-    <td>${fragger.nick_html_colors()|n}</td>
+    <td class="bg">${fragger.nick_html_colors()|n}</td>
     % for victim in pgstats:
     <%
       pgfm = matrix_by_pgstat_id.get(fragger.player_game_stat_id)