From 685043a658f7c5f344c2cc9db01a9048a30d7e07 Mon Sep 17 00:00:00 2001
From: Ant Zucaro <azucaro@gmail.com>
Date: Thu, 5 Oct 2017 21:10:30 -0400
Subject: [PATCH] Add styles to make the headers vertical.

---
 xonstat/static/css/app.css         | 13 +++++++++++++
 xonstat/templates/frag_matrix.mako |  6 +++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/xonstat/static/css/app.css b/xonstat/static/css/app.css
index 17c6a11..16df516 100644
--- 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 ee321b6..7c1c5ce 100644
--- 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)
-- 
2.39.2