From 0080de3d8e1a9dbf555ad3340336dc7a063d50d4 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Fri, 10 Nov 2017 10:32:51 +0100
Subject: [PATCH] better display for badges and time

---
 static/css/ranking.css |  8 +++++---
 static/js/contrib.js   | 14 +++++++++++---
 templates/contrib.html |  2 +-
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/static/css/ranking.css b/static/css/ranking.css
index f744290..a5a617a 100644
--- a/static/css/ranking.css
+++ b/static/css/ranking.css
@@ -84,14 +84,16 @@
 
 .table > tbody > tr > td.centerCellPicOrgLogo {
     padding: 5px;
-    text-align: right;
-    min-width: 45px;
+    text-align: left;
+}
+
+.table > tbody > tr > td.verticalAlign {
+    vertical-align: middle;
 }
 
 .table > tbody > tr > td.centerCellPicOrgRank {
     padding: 0px;
     text-align: left;
-    min-width: 45px;
 }
 
 .progress {
diff --git a/static/js/contrib.js b/static/js/contrib.js
index b1b183f..13013ce 100644
--- a/static/js/contrib.js
+++ b/static/js/contrib.js
@@ -66,9 +66,13 @@ var optionDatatable_light = {
 var optionDatatable_top = jQuery.extend({}, optionDatatable_light)
 var optionDatatable_last = jQuery.extend({}, optionDatatable_light)
 optionDatatable_last.columnDefs = [
-    { className: "centerCellPicOrgRank", "targets": [ 2 ] },
+    { className: "small", "targets": [ 0 ] },
+    { className: "verticalAlign", "targets": [ 1 ] },
+    { className: "centerCellPicOrgRank verticalAlign", "targets": [ 2 ] },
     { className: "centerCellPicOrgLogo", "targets": [ 3 ] },
-    { className: "centerCellPicOrgLogo", "targets": [ 4 ] },
+    { className: "centerCellPicOrgLogo verticalAlign", "targets": [ 4 ] },
+    { className: "centerCellPicOrgLogo verticalAlign", "targets": [ 5 ] },
+    { className: "verticalAlign", "targets": [ 6 ] },
     { 'orderData':[6], 'targets': [0] },
     {
         'targets': [6],
@@ -169,6 +173,8 @@ function createImg(source, size) {
 function createHonorImg(array, size) {
     size = 32;
     var div = document.createElement('div');
+    div.style.boxShadow = '0px 0px 5px #00000099';
+    div.style.backgroundColor = '#e1e1e1';
     for (badgeNum of array) {
         var obj = document.createElement('img');
         obj.height = size;
@@ -178,6 +184,8 @@ function createHonorImg(array, size) {
         obj.src = url_baseHonorLogo+badgeNum+'.svg';
         div.appendChild(obj);
     }
+    div.style.width = 32*array.length+'px';
+    div.style.borderRadius = '15px';
     return div.outerHTML;
 }
 
@@ -555,7 +563,7 @@ $(document).ready(function() {
     });
     if(currOrg != "") // currOrg selected
         //FIXME: timeout used to wait that all datatables are draw.
-        setTimeout( function() { updateProgressHeader(currOrg); }, 400);
+        setTimeout( function() { updateProgressHeader(currOrg); }, 500);
 
     source_lastContrib = new EventSource(url_eventStreamLastContributor);
     source_lastContrib.onmessage = function(event) {
diff --git a/templates/contrib.html b/templates/contrib.html
index d8c96bd..333f427 100644
--- a/templates/contrib.html
+++ b/templates/contrib.html
@@ -263,7 +263,7 @@
                                             <table id="lastTable" class="table table-hover table-striped">
                                                 <thead>
                                                     <tr>
-                                                        <th>date/time</th>
+                                                        <th>Date</th>
                                                         <th>Points</th>
                                                         <th>Cur. rank</th>
                                                         <th>Org. rank</th>