From 3bc9af648b50096694726907700b4b055576d1e5 Mon Sep 17 00:00:00 2001
From: Benjamin Dauvergne <bdauvergne@entrouvert.com>
Date: Sat, 18 Jun 2016 09:34:44 +0200
Subject: [PATCH] bijoe: improve style of data tables

---
 bijoe/templates/bijoe/cube.html | 33 +++++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/bijoe/templates/bijoe/cube.html b/bijoe/templates/bijoe/cube.html
index a2a6d69..1886751 100644
--- a/bijoe/templates/bijoe/cube.html
+++ b/bijoe/templates/bijoe/cube.html
@@ -15,8 +15,29 @@ input[type=date] {
 select {
   width: 100%;
 }
-table {
+
+table.bijoe-table {
+  display: flex;
+  flex-flow: column;
   padding-left: 2em;
+  width: 80%;
+  height: 70vh;
+}
+
+table.bijoe-table thead {
+  flex: 0 0 auto;
+  display: table;
+  table-layout: fixed;
+}
+table.bijoe-table tr {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+}
+table.bijoe-table tbody {
+  flex: 1 1 auto;
+  display: block;
+  overflow-y: auto; 
 }
 input[type=submit] {
   float: right;
@@ -24,13 +45,9 @@ input[type=submit] {
   position: relative;
 }
 .filter { display: inline-block; }
-td {
-  width: 10em;
-}
 th {
   text-overflow: ellipsis;
   text-align: left;
-  width: 30px;
 }
 </style>
 {% endblock %}
@@ -89,13 +106,13 @@ th {
     {% endfor %}
   </form>
   {% if data %}
-    <table>
+    <table class="bijoe-table">
       <thead>
         {% for dimension in drilldown %}
-          <th>{{ dimension.label.capitalize }}</th>
+          <th><span>{{ dimension.label.capitalize }}</span></th>
         {% endfor %}
         {% for measure in measures %}
-          <th>{{ measure.label.capitalize }}</th>
+          <th><span>{{ measure.label.capitalize }}</span></th>
         {% endfor %}
       </thead>
       <tbody>