From 374a76cb789447c179e764893b2bec045e2a032e Mon Sep 17 00:00:00 2001
From: Victor Costa <vfcosta@gmail.com>
Date: Fri, 12 Jun 2015 12:08:17 -0300
Subject: [PATCH] Improve dashboard layout

---
 lib/gamification_plugin/dashboard_helper.rb |  6 +++++-
 public/style.css                            | 36 ++++++++++++++++++++++++++++++------
 views/gamification/dashboard.html.erb       | 14 ++++++++++----
 3 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/lib/gamification_plugin/dashboard_helper.rb b/lib/gamification_plugin/dashboard_helper.rb
index fc0485c..ddfc5b9 100644
--- a/lib/gamification_plugin/dashboard_helper.rb
+++ b/lib/gamification_plugin/dashboard_helper.rb
@@ -3,8 +3,12 @@ module GamificationPlugin::DashboardHelper
   def level_chart(target)
 
     content_tag(:div, :class => "level pie-chart", 'data-percent' => @target.gamification_plugin_level_percent) do
-      content_tag :span, @target.level
+      content_tag :span, @target.level, :class => 'level-value'
     end
   end
 
+  def score_point_class(point)
+    point.num_points > 0 ? 'positive' : 'negative'
+  end
+
 end
diff --git a/public/style.css b/public/style.css
index 3cb39db..9bb2d27 100644
--- a/public/style.css
+++ b/public/style.css
@@ -63,20 +63,44 @@
   font-size: 10px;
 }
 
-.gamification .pie-chart {
+.gamification-dashboard .pie-chart {
   position: relative;
   text-align: center;
 }
-.gamification .pie-chart canvas {
+.gamification-dashboard .pie-chart canvas {
   position: absolute;
   left: 0;
 }
-
-.gamification .points .level {
+.gamification-dashboard .pie-chart .level-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: rgb(64, 64, 65);
+}
+.gamification-dashboard .points, .gamification-dashboard .badges {
+  margin: 10px 10px 25px 10px;
+}
+.gamification-dashboard .points .level {
   display: inline-block;
-  margin: 0 30px;
   vertical-align: top;
 }
-.gamification .points .scores {
+.gamification-dashboard .points .scores {
+  display: inline-block;
+  margin-left: 40px;
+}
+.gamification-dashboard .points .level .total {
+  text-align: center;
+  color: rgb(139, 139, 139);
+}
+.gamification-dashboard .scores .negative {
+  color: red;
+}
+.gamification-dashboard .scores .positive {
+  color: green;
+}
+.gamification-dashboard .scores .value {
+  font-weight: bold;
+  width: 30px;
   display: inline-block;
+  text-align: right;
+  margin-right: 4px;
 }
diff --git a/views/gamification/dashboard.html.erb b/views/gamification/dashboard.html.erb
index 49a655f..6496065 100644
--- a/views/gamification/dashboard.html.erb
+++ b/views/gamification/dashboard.html.erb
@@ -1,10 +1,11 @@
 <%= javascript_include_tag '/plugins/gamification/slick.min.js' %>
+<%= javascript_include_tag 'jquery.timeago.js' %>
 <%= stylesheet_link_tag '/plugins/gamification/slick.css' %>
 <%= stylesheet_link_tag '/plugins/gamification/slick-theme.css' %>
 
 <% extend GamificationPlugin::DashboardHelper %>
 
-<div class="gamification">
+<div class="gamification gamification-dashboard">
   <h1><%= _('Gamification Dashboard for %s' % @target.identifier) %></h1>
 
   <div class="points">
@@ -12,22 +13,25 @@
       <h3> <%= _('Level') %></h3>
       <%= level_chart(@target) %>
       <div class="score total">
-        <span class="label"><%= _('Total: ') %></span>
+        <span class="label"><%= _('Score: ') %></span>
         <span class="value"><%= @target.points %></span>
       </div>
     </div>
 
+    <% unless @target.score_points.empty? %>
     <div class="scores">
       <h3><%= _('Last Score Points') %></h3>
       <% @target.score_points.order('created_at desc').limit(5).each do |point| %>
         <div class="score <%= point.score.category %>">
-          <span class="label"><%= _('%s: ' % point.num_points ) %></span>
-          <span class="value"><%= point.created_at %></span>
+          <span class="value <%= score_point_class(point) %>"><%= point.num_points %></span>
+          <span class="date timeago" title="<%= point.created_at %>"><%= point.created_at %></span>
         </div>
       <% end %>
     </div>
+    <% end %>
   </div>
 
+  <% unless environment.gamification_plugin_badges.empty? %>
   <div class="badges">
     <h3><%= _('Badges') %></h3>
     <ul class="badge-list">
@@ -42,6 +46,7 @@
       <% end %>
     </ul>
   </div>
+  <% end %>
 </div>
 
 <script>
@@ -52,4 +57,5 @@ $('.gamification .badge-list').slick({
   slidesToShow: 3,
   slidesToScroll: 1,
 });
+$(".gamification-dashboard .timeago").timeago();
 </script>
--
libgit2 0.21.2