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 3 def level_chart(target)
4 4  
5 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 7 end
8 8 end
9 9  
  10 + def score_point_class(point)
  11 + point.num_points > 0 ? 'positive' : 'negative'
  12 + end
  13 +
10 14 end
... ...
public/style.css
  Diff comments   View file @374a76c
... ... @@ -63,20 +63,44 @@
63 63 font-size: 10px;
64 64 }
65 65  
66   -.gamification .pie-chart {
  66 +.gamification-dashboard .pie-chart {
67 67 position: relative;
68 68 text-align: center;
69 69 }
70   -.gamification .pie-chart canvas {
  70 +.gamification-dashboard .pie-chart canvas {
71 71 position: absolute;
72 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 83 display: inline-block;
77   - margin: 0 30px;
78 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 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 1 <%= javascript_include_tag '/plugins/gamification/slick.min.js' %>
  2 +<%= javascript_include_tag 'jquery.timeago.js' %>
2 3 <%= stylesheet_link_tag '/plugins/gamification/slick.css' %>
3 4 <%= stylesheet_link_tag '/plugins/gamification/slick-theme.css' %>
4 5  
5 6 <% extend GamificationPlugin::DashboardHelper %>
6 7  
7   -<div class="gamification">
  8 +<div class="gamification gamification-dashboard">
8 9 <h1><%= _('Gamification Dashboard for %s' % @target.identifier) %></h1>
9 10  
10 11 <div class="points">
... ... @@ -12,22 +13,25 @@
12 13 <h3> <%= _('Level') %></h3>
13 14 <%= level_chart(@target) %>
14 15 <div class="score total">
15   - <span class="label"><%= _('Total: ') %></span>
  16 + <span class="label"><%= _('Score: ') %></span>
16 17 <span class="value"><%= @target.points %></span>
17 18 </div>
18 19 </div>
19 20  
  21 + <% unless @target.score_points.empty? %>
20 22 <div class="scores">
21 23 <h3><%= _('Last Score Points') %></h3>
22 24 <% @target.score_points.order('created_at desc').limit(5).each do |point| %>
23 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 28 </div>
27 29 <% end %>
28 30 </div>
  31 + <% end %>
29 32 </div>
30 33  
  34 + <% unless environment.gamification_plugin_badges.empty? %>
31 35 <div class="badges">
32 36 <h3><%= _('Badges') %></h3>
33 37 <ul class="badge-list">
... ... @@ -42,6 +46,7 @@
42 46 <% end %>
43 47 </ul>
44 48 </div>
  49 + <% end %>
45 50 </div>
46 51  
47 52 <script>
... ... @@ -52,4 +57,5 @@ $(&#39;.gamification .badge-list&#39;).slick({
52 57 slidesToShow: 3,
53 58 slidesToScroll: 1,
54 59 });
  60 +$(".gamification-dashboard .timeago").timeago();
55 61 </script>
... ...