Download as
Browse Code »

Commit 374a76cb789447c179e764893b2bec045e2a032e

Authored by Victor Costa
1 parent 1f217152
Exists in master and in 1 other branch merit_delayed

Improve dashboard layout

Showing 3 changed files with 45 additions and 11 deletions   Show diff stats
lib/gamification_plugin/dashboard_helper.rb
  Diff comments   View file @374a76c
@@ -3,8 +3,12 @@ module GamificationPlugin::DashboardHelper @@ -3,8 +3,12 @@ module GamificationPlugin::DashboardHelper
3 def level_chart(target) 3 def level_chart(target)
4 4
5 content_tag(:div, :class => "level pie-chart", 'data-percent' => @target.gamification_plugin_level_percent) do 5 content_tag(:div, :class => "level pie-chart", 'data-percent' => @target.gamification_plugin_level_percent) do
6 - content_tag :span, @target.level 6 + content_tag :span, @target.level, :class => 'level-value'
7 end 7 end
8 end 8 end
9 9
  10 + def score_point_class(point)
  11 + point.num_points > 0 ? 'positive' : 'negative'
  12 + end
  13 +
10 end 14 end
public/style.css
  Diff comments   View file @374a76c
@@ -63,20 +63,44 @@ @@ -63,20 +63,44 @@
63 font-size: 10px; 63 font-size: 10px;
64 } 64 }
65 65
66 -.gamification .pie-chart { 66 +.gamification-dashboard .pie-chart {
67 position: relative; 67 position: relative;
68 text-align: center; 68 text-align: center;
69 } 69 }
70 -.gamification .pie-chart canvas { 70 +.gamification-dashboard .pie-chart canvas {
71 position: absolute; 71 position: absolute;
72 left: 0; 72 left: 0;
73 } 73 }
74 -  
75 -.gamification .points .level { 74 +.gamification-dashboard .pie-chart .level-value {
  75 + font-size: 20px;
  76 + font-weight: bold;
  77 + color: rgb(64, 64, 65);
  78 +}
  79 +.gamification-dashboard .points, .gamification-dashboard .badges {
  80 + margin: 10px 10px 25px 10px;
  81 +}
  82 +.gamification-dashboard .points .level {
76 display: inline-block; 83 display: inline-block;
77 - margin: 0 30px;  
78 vertical-align: top; 84 vertical-align: top;
79 } 85 }
80 -.gamification .points .scores { 86 +.gamification-dashboard .points .scores {
  87 + display: inline-block;
  88 + margin-left: 40px;
  89 +}
  90 +.gamification-dashboard .points .level .total {
  91 + text-align: center;
  92 + color: rgb(139, 139, 139);
  93 +}
  94 +.gamification-dashboard .scores .negative {
  95 + color: red;
  96 +}
  97 +.gamification-dashboard .scores .positive {
  98 + color: green;
  99 +}
  100 +.gamification-dashboard .scores .value {
  101 + font-weight: bold;
  102 + width: 30px;
81 display: inline-block; 103 display: inline-block;
  104 + text-align: right;
  105 + margin-right: 4px;
82 } 106 }
views/gamification/dashboard.html.erb
  Diff comments   View file @374a76c
1 <%= javascript_include_tag '/plugins/gamification/slick.min.js' %> 1 <%= javascript_include_tag '/plugins/gamification/slick.min.js' %>
  2 +<%= javascript_include_tag 'jquery.timeago.js' %>
2 <%= stylesheet_link_tag '/plugins/gamification/slick.css' %> 3 <%= stylesheet_link_tag '/plugins/gamification/slick.css' %>
3 <%= stylesheet_link_tag '/plugins/gamification/slick-theme.css' %> 4 <%= stylesheet_link_tag '/plugins/gamification/slick-theme.css' %>
4 5
5 <% extend GamificationPlugin::DashboardHelper %> 6 <% extend GamificationPlugin::DashboardHelper %>
6 7
7 -<div class="gamification"> 8 +<div class="gamification gamification-dashboard">
8 <h1><%= _('Gamification Dashboard for %s' % @target.identifier) %></h1> 9 <h1><%= _('Gamification Dashboard for %s' % @target.identifier) %></h1>
9 10
10 <div class="points"> 11 <div class="points">
@@ -12,22 +13,25 @@ @@ -12,22 +13,25 @@
12 <h3> <%= _('Level') %></h3> 13 <h3> <%= _('Level') %></h3>
13 <%= level_chart(@target) %> 14 <%= level_chart(@target) %>
14 <div class="score total"> 15 <div class="score total">
15 - <span class="label"><%= _('Total: ') %></span> 16 + <span class="label"><%= _('Score: ') %></span>
16 <span class="value"><%= @target.points %></span> 17 <span class="value"><%= @target.points %></span>
17 </div> 18 </div>
18 </div> 19 </div>
19 20
  21 + <% unless @target.score_points.empty? %>
20 <div class="scores"> 22 <div class="scores">
21 <h3><%= _('Last Score Points') %></h3> 23 <h3><%= _('Last Score Points') %></h3>
22 <% @target.score_points.order('created_at desc').limit(5).each do |point| %> 24 <% @target.score_points.order('created_at desc').limit(5).each do |point| %>
23 <div class="score <%= point.score.category %>"> 25 <div class="score <%= point.score.category %>">
24 - <span class="label"><%= _('%s: ' % point.num_points ) %></span>  
25 - <span class="value"><%= point.created_at %></span> 26 + <span class="value <%= score_point_class(point) %>"><%= point.num_points %></span>
  27 + <span class="date timeago" title="<%= point.created_at %>"><%= point.created_at %></span>
26 </div> 28 </div>
27 <% end %> 29 <% end %>
28 </div> 30 </div>
  31 + <% end %>
29 </div> 32 </div>
30 33
  34 + <% unless environment.gamification_plugin_badges.empty? %>
31 <div class="badges"> 35 <div class="badges">
32 <h3><%= _('Badges') %></h3> 36 <h3><%= _('Badges') %></h3>
33 <ul class="badge-list"> 37 <ul class="badge-list">
@@ -42,6 +46,7 @@ @@ -42,6 +46,7 @@
42 <% end %> 46 <% end %>
43 </ul> 47 </ul>
44 </div> 48 </div>
  49 + <% end %>
45 </div> 50 </div>
46 51
47 <script> 52 <script>
@@ -52,4 +57,5 @@ $(&#39;.gamification .badge-list&#39;).slick({ @@ -52,4 +57,5 @@ $(&#39;.gamification .badge-list&#39;).slick({
52 slidesToShow: 3, 57 slidesToShow: 3,
53 slidesToScroll: 1, 58 slidesToScroll: 1,
54 }); 59 });
  60 +$(".gamification-dashboard .timeago").timeago();
55 </script> 61 </script>