Few additional ui adjustement + filtering categ feature on button click

static/css/ranking.css

@@ -3,6 +3,15 @@
     height: auto;
 }
 
+.centerInBtn {
+    float: left;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+    margin-right: 10px;
+    font-size: x-large;
+}
+
 .popover-content {
     padding: 3px
 }

static/js/contrib.js

@@ -7,7 +7,6 @@ var datatableFame;
 var maxRank = 16;
 var popOverOption = {
     trigger: "hover",
-    title: "Ranking icons",
     html: true,
     placement: 'bottom',
     content: generateRankingSheet()
@@ -113,7 +112,7 @@ function generateRankingSheet(rank) {
     th.innerHTML = "Rank";
     tr.appendChild(th);
     var th = document.createElement('th');
-    th.innerHTML = "Requirement";
+    th.innerHTML = "Requirement (CP)";
     tr.appendChild(th);
     thead.appendChild(tr);
     //body
@@ -125,7 +124,7 @@ function generateRankingSheet(rank) {
         td.style.padding = "2px";
         tr.appendChild(td);
         var td = document.createElement('td');
-        td.innerHTML = Math.pow(rankMultiplier, i)+" pnts";
+        td.innerHTML = Math.pow(rankMultiplier, i);
         td.style.padding = "2px";
         tr.style.textAlign = "center";
         if (i == rank) { // current org rank
@@ -156,10 +155,10 @@ function addToTableFromJson(datatable, url) {
     });
 }
 
-
 function updateProgressHeader(org) {
     // get Org rank
     $.getJSON( url_getOrgRank+'?org='+org, function( data ) {
+        console.log(data);
         datatableTop.draw();
         var rank = Math.floor(data.rank);
         $('#btnCurrRank').show();
@@ -189,6 +188,10 @@ function updateProgressHeader(org) {
     });
 }
 
+function showOnlyOrg() {
+    datatableCateg.search( $('#orgText').text() ).draw();
+}
+
 $(document).ready(function() {
     if(currOrg != "") // currOrg selected
         updateProgressHeader(org)

templates/contrib.html

@@ -64,10 +64,8 @@
                     <div class='textTopHeader' style="padding-top: 9px;">
                         <input type="text" id="orgName" data-provide="typeahead" size="20" style="margin-bottom: 5px;">
                     </div>
-                    <div class='leftSepa textTopHeader' style="min-width: 100px;">
-                        <strong id="orgText"></strong>
-                    </div>
-                    <button id="btnCurrRank" class='btn btn-default popOverBtn' data-container='body' data-toggle='popover' style="display: none;">
+                    <button id="btnCurrRank" class='btn btn-default popOverBtn' data-container='body' data-toggle='popover' style="display: none; margin-left: 20px;" onclick="showOnlyOrg()">
+                        <strong id="orgText" class="centerInBtn"></strong>
                         <div id="orgRankDiv" class='textTopHeader' style="padding-top: 0px; position: relative; width: 40px; height: 40px;"></div>
                         <div class='' style="float: left; padding: 10px;">
                             <div class="progress" style=''>