Captions for data table color codes

4 files changed, 69 insertions, 14 deletions

diff --git a/http/res/ranking.css b/http/res/ranking.css
index 316aa49..6a6b1c7 100644
--- a/http/res/ranking.css
+++ b/http/res/ranking.css
@@ -1,6 +1,6 @@
-.table > tbody > tr.gold > td { background-color: #FFEF96 }
-.table > tbody > tr.silver > td { background-color: #E5E5E5 }
-.table > tbody > tr.bronze > td { background-color: #CAA077 }
+.table-hover > tbody > tr.gold > td { background-color: #FFEF96 }
+.table-hover > tbody > tr.silver > td { background-color: #E5E5E5 }
+.table-hover > tbody > tr.bronze > td { background-color: #CAA077 }
 .table-hover > tbody > tr.gold:hover > td { background-color: #FFE34C }
 .table-hover > tbody > tr.silver:hover > td { background-color: #CDCDCD }
 .table-hover > tbody > tr.bronze:hover > td { background-color: #B88048 }
diff --git a/http/res/ranking.js b/http/res/ranking.js
index 1e34732..1cf09ab 100644
--- a/http/res/ranking.js
+++ b/http/res/ranking.js
@@ -98,14 +98,14 @@ var ranking = {
             ranking.filterRows(params);
             ranking.savedParams = params;
         }
-        $('table.table, .filters .panel-body').css('opacity', 1);
+        $('table.data-table, .filters .panel-body').css('opacity', 1);
         ranking.filtersDisabled = false;
         var pagesize = 40;
         var page = params.get('page') || [0];
         var count = $('table.table-paginate').paginate(pagesize, parseInt(page[0]));
-        $('table.table tbody tr[data-paginate-visible=1]').eq(0).addClass('gold');
-        $('table.table tbody tr[data-paginate-visible=1]').eq(1).addClass('silver');
-        $('table.table tbody tr[data-paginate-visible=1]').eq(2).addClass('bronze');
+        $('table.data-table tbody tr[data-paginate-visible=1]').eq(0).addClass('gold');
+        $('table.data-table tbody tr[data-paginate-visible=1]').eq(1).addClass('silver');
+        $('table.data-table tbody tr[data-paginate-visible=1]').eq(2).addClass('bronze');
         ranking.buildPaginator('#top-paginator', count, pagesize, page[0] || 1);
         ranking.buildPaginator('#bottom-paginator', count, pagesize, page[0] || 1);
     },
@@ -113,7 +113,7 @@ var ranking = {
     filtersDisabled: false,
 
     filterRows : function(params) {
-        $('table.table tbody tr').show().removeClass('gold silver bronze').each(function() {
+        $('table.data-table tbody tr').show().removeClass('gold silver bronze').each(function() {
             var row = $(this);
             var hidden = false;
             params.forEach(function(value, param) {
@@ -149,7 +149,7 @@ var ranking = {
     },
 
     changePage: function() {
-        $('table.table').css('opacity', 0.1);
+        $('table.data-table').css('opacity', 0.1);
         var btn = $(this);
         var page = parseInt(btn.attr('data-page'));
         var params = ranking.parseHash(location.hash);
@@ -166,7 +166,7 @@ var ranking = {
             params.set('page', [page]);
             location.hash = ranking.constructHash(params);
         } else {
-            $('table.table').css('opacity', 1);
+            $('table.data-table').css('opacity', 1);
         }
     },
 
@@ -181,7 +181,7 @@ var ranking = {
         $('button[data-filter]').click(function(ev) {
             if (!ranking.filtersDisabled) {
                 ranking.filtersDisabled = true;
-                $('table.table, .filters .panel-body').css('opacity', 0.1);
+                $('table.data-table, .filters .panel-body').css('opacity', 0.1);
                 var button = $(this);
                 var params = ranking.parseHash(location.hash);
                 var param = params.get(button.attr('data-filter'));
@@ -208,7 +208,7 @@ var ranking = {
         $('button[data-clear]').click(function() {
             if (!ranking.filtersDisabled) {
                 ranking.filtersDisabled = true;
-                $('table.table, .filters .panel-body').css('opacity', 0.1);
+                $('table.data-table, .filters .panel-body').css('opacity', 0.1);
                 var button = $(this);
                 var params = ranking.parseHash(location.hash);
                 params.delete(button.attr('data-clear'));
diff --git a/ranking.py b/ranking.py
index da9becd..e417350 100644
--- a/ranking.py
+++ b/ranking.py
@@ -28,7 +28,7 @@ for row in ranking:
                     row[category + '-change-class'] = 'default'
 
 table = bs4(file('templates/ranking.html'), 'lxml')
-table_body = table.select('tbody')[0]
+table_body = table.select('table.data-table tbody')[0]
 table_row = table_body.select('tr')[0].extract()
 
 table.select('.page-header h2 small')[0].string = subtitle
diff --git a/templates/ranking.html b/templates/ranking.html
index 5bcb2ca..d612256 100644
--- a/templates/ranking.html
+++ b/templates/ranking.html
@@ -76,10 +76,65 @@
           </div>
         </div>
       </div>
+      <div class="panel panel-default">
+        <div class="panel-heading" role="button" data-toggle="collapse" data-target="#captions" aria-expanded="false" aria-controls="captions">
+          Legenda
+        </div>
+        <div class="collapse panel-body" id="captions">
+          <div class="row">
+            <div class="col-md-6">
+              Oznaczenia wierszy tabeli (kolor tła):
+              <table class="table history table-hover">
+                <tbody>
+                  <tr class="gold">
+                    <td>Pierwsze miejsce (w ramach wybranych kryteriów)</td>
+                  </tr>
+                  <tr class="silver">
+                    <td>Drugie miejsce (w ramach wybranych kryteriów)</td>
+                  </tr>
+                  <tr class="bronze">
+                    <td>Trzecie miejsce (w ramach wybranych kryteriów)</td>
+                  </tr>
+                  <tr class="info">
+                    <td>Pierwsze miejsce w którejś z kategorii (okręg, płeć, wiek)</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="col-md-6">
+              Oznaczenia zmiany miejsca w rankingu:
+              <table class="table history">
+                <tbody>
+                  <tr>
+                    <td>
+                      <span class="change label label-success">+1</span> awans
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <span class="change label label-default">=</span> bez zmian
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <span class="change label label-danger">-1</span> spadek
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <span class="change label label-info">N</span> nienotowany w poprzednim rankingu
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
       <div id="top-paginator" class="text-center"></div>
       <br />
       <div class="table-responsive">
-        <table class="table table-striped table-hover table-condened table-paginate">
+        <table class="data-table table table-striped table-hover table-paginate">
           <thead>
             <tr class="text-center">
               <th colspan="2">Miejsce</th>