From f683bce9918a0b56490651b5ff6f1bc822a07c8b Mon Sep 17 00:00:00 2001
From: Victor Costa <vfcosta@gmail.com>
Date: Thu, 13 Aug 2015 15:07:55 -0300
Subject: [PATCH] Improve ranking

---
 public/style.css                      | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 views/gamification/_ranking.html.erb  | 22 ++++++++++++++--------
 views/gamification/dashboard.html.erb |  4 ++--
 3 files changed, 81 insertions(+), 13 deletions(-)

diff --git a/public/style.css b/public/style.css
index c6fd477..8b036c9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -6,7 +6,7 @@
 #user .gamification-plugin.user-info-template:hover {
   background-color: rgb(228, 228, 228);
 }
-.gamification-plugin.user-info-template .icon {
+.gamification-plugin.user-info-template .icon, .gamification-icon {
   background-size: 14px;
   background-repeat: no-repeat;
   width: 17px;
@@ -17,13 +17,13 @@
 .gamification-plugin.user-info-template .icon:hover {
   background-color: transparent;
 }
-.gamification-plugin.user-info-template .level .icon {
+.gamification-plugin.user-info-template .level .icon, .gamification-icon.level {
   background-image: url(/plugins/gamification/images/level-icon.png);
 }
 .gamification-plugin.user-info-template .badges .icon  {
   background-image: url(/plugins/gamification/images/badge-icon.png);
 }
-.gamification-plugin.user-info-template .points .icon  {
+.gamification-plugin.user-info-template .points .icon, .gamification-icon.points {
   background-image: url(/plugins/gamification/images/points-icon.png);
 }
 
@@ -109,3 +109,65 @@
 .gamification-dashboard .scores .date {
   color: gray;
 }
+
+.gamification-rankings .ranking-item .target .image img {
+  width: 20px;
+  height: 20px;
+}
+
+.gamification-rankings ul.ranking {
+  list-style-type: none;
+  padding: 0;
+}
+
+.gamification-rankings .ranking-item .target .label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 120px;
+  display: inline-block;
+  color: rgb(68, 68, 68);
+}
+
+.gamification-rankings .ranking.all-time,
+.gamification-rankings .ranking.month {
+  display: inline-block;
+  width: 45%;
+  margin: 5px 0;
+}
+
+.gamification-rankings .ranking.all-time {
+  margin-left: 4%;
+}
+
+.gamification-rankings .ranking.month {
+  margin-right: 4%;
+}
+
+.gamification-rankings .ranking.week .ranking-item .target .label {
+  width: 300px;
+}
+
+.gamification-rankings .ranking-item .target a {
+  text-decoration: none;
+}
+
+.gamification-rankings .target-position {
+  text-align: right;
+  color: rgb(160, 160, 160);
+}
+
+.gamification-rankings .ranking-item .score,
+.gamification-rankings .ranking-item .level {
+  float: right;
+}
+
+.gamification-rankings h4 {
+  text-align: center;
+}
+
+.gamification-rankings .ranking-item .position {
+  font-weight: bold;
+  font-size: 16px;
+  color: rgb(97, 97, 97);
+}
diff --git a/views/gamification/_ranking.html.erb b/views/gamification/_ranking.html.erb
index 2b0a385..10fc0fa 100644
--- a/views/gamification/_ranking.html.erb
+++ b/views/gamification/_ranking.html.erb
@@ -1,19 +1,25 @@
 <ul class="ranking">
-  <% if target_ranking.present? %>
-    <span><%= _('Your position: ') %></span>
-    <span><%= target_ranking.gamification_position %></span>
-  <% else %>
-    <%= _('Not scored yet') %>
-  <% end %>
+  <div class="target-position">
+    <% if target_ranking.present? %>
+      <span><%= _('Your position: ') %></span>
+      <span><%= target_ranking.gamification_position %></span>
+    <% else %>
+      <%= _('Not scored yet') %>
+    <% end %>
+ </div>
   <% ranking.each_with_index do |person, i| %>
     <li class="ranking-item">
       <span class="position">
         <%= i+1 %>
       </span>
-      <span class="name">
-        <%= person.name %>
+      <span class="target">
+        <%= link_to person.url do %>
+          <span class="image"><%= profile_image(person, :icon) %></span>
+          <span class="label"><%= person.name %></span>
+        <% end %>
       </span>
       <span class="score">
+        <span class="gamification-icon points">&nbsp;</span>
         <%= person.gamification_points %>
       </span>
     </li>
diff --git a/views/gamification/dashboard.html.erb b/views/gamification/dashboard.html.erb
index 235821e..3eaa857 100644
--- a/views/gamification/dashboard.html.erb
+++ b/views/gamification/dashboard.html.erb
@@ -51,11 +51,11 @@
 </div>
 
 <% if @target.kind_of?(Profile) %>
-<div class="rankings">
+<div class="gamification-rankings">
   <h3><%= _('Ranking') %></h3>
   <div class="ranking week">
     <h4><%= _('Week') %></h4>
-    <%= ranking(@target, Time.zone.now.at_beginning_of_week) %>
+    <%= ranking(@target, Time.zone.now.at_beginning_of_week, 5) %>
   </div>
   <div class="ranking month">
     <h4><%= _('Month') %></h4>
--
libgit2 0.21.2