Commit f683bce9918a0b56490651b5ff6f1bc822a07c8b

Authored by Victor Costa
1 parent a64414cc

Improve ranking

public/style.css
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 #user .gamification-plugin.user-info-template:hover { 6 #user .gamification-plugin.user-info-template:hover {
7 background-color: rgb(228, 228, 228); 7 background-color: rgb(228, 228, 228);
8 } 8 }
9 -.gamification-plugin.user-info-template .icon { 9 +.gamification-plugin.user-info-template .icon, .gamification-icon {
10 background-size: 14px; 10 background-size: 14px;
11 background-repeat: no-repeat; 11 background-repeat: no-repeat;
12 width: 17px; 12 width: 17px;
@@ -17,13 +17,13 @@ @@ -17,13 +17,13 @@
17 .gamification-plugin.user-info-template .icon:hover { 17 .gamification-plugin.user-info-template .icon:hover {
18 background-color: transparent; 18 background-color: transparent;
19 } 19 }
20 -.gamification-plugin.user-info-template .level .icon { 20 +.gamification-plugin.user-info-template .level .icon, .gamification-icon.level {
21 background-image: url(/plugins/gamification/images/level-icon.png); 21 background-image: url(/plugins/gamification/images/level-icon.png);
22 } 22 }
23 .gamification-plugin.user-info-template .badges .icon { 23 .gamification-plugin.user-info-template .badges .icon {
24 background-image: url(/plugins/gamification/images/badge-icon.png); 24 background-image: url(/plugins/gamification/images/badge-icon.png);
25 } 25 }
26 -.gamification-plugin.user-info-template .points .icon { 26 +.gamification-plugin.user-info-template .points .icon, .gamification-icon.points {
27 background-image: url(/plugins/gamification/images/points-icon.png); 27 background-image: url(/plugins/gamification/images/points-icon.png);
28 } 28 }
29 29
@@ -109,3 +109,65 @@ @@ -109,3 +109,65 @@
109 .gamification-dashboard .scores .date { 109 .gamification-dashboard .scores .date {
110 color: gray; 110 color: gray;
111 } 111 }
  112 +
  113 +.gamification-rankings .ranking-item .target .image img {
  114 + width: 20px;
  115 + height: 20px;
  116 +}
  117 +
  118 +.gamification-rankings ul.ranking {
  119 + list-style-type: none;
  120 + padding: 0;
  121 +}
  122 +
  123 +.gamification-rankings .ranking-item .target .label {
  124 + text-overflow: ellipsis;
  125 + white-space: nowrap;
  126 + overflow: hidden;
  127 + width: 120px;
  128 + display: inline-block;
  129 + color: rgb(68, 68, 68);
  130 +}
  131 +
  132 +.gamification-rankings .ranking.all-time,
  133 +.gamification-rankings .ranking.month {
  134 + display: inline-block;
  135 + width: 45%;
  136 + margin: 5px 0;
  137 +}
  138 +
  139 +.gamification-rankings .ranking.all-time {
  140 + margin-left: 4%;
  141 +}
  142 +
  143 +.gamification-rankings .ranking.month {
  144 + margin-right: 4%;
  145 +}
  146 +
  147 +.gamification-rankings .ranking.week .ranking-item .target .label {
  148 + width: 300px;
  149 +}
  150 +
  151 +.gamification-rankings .ranking-item .target a {
  152 + text-decoration: none;
  153 +}
  154 +
  155 +.gamification-rankings .target-position {
  156 + text-align: right;
  157 + color: rgb(160, 160, 160);
  158 +}
  159 +
  160 +.gamification-rankings .ranking-item .score,
  161 +.gamification-rankings .ranking-item .level {
  162 + float: right;
  163 +}
  164 +
  165 +.gamification-rankings h4 {
  166 + text-align: center;
  167 +}
  168 +
  169 +.gamification-rankings .ranking-item .position {
  170 + font-weight: bold;
  171 + font-size: 16px;
  172 + color: rgb(97, 97, 97);
  173 +}
views/gamification/_ranking.html.erb
1 <ul class="ranking"> 1 <ul class="ranking">
2 - <% if target_ranking.present? %>  
3 - <span><%= _('Your position: ') %></span>  
4 - <span><%= target_ranking.gamification_position %></span>  
5 - <% else %>  
6 - <%= _('Not scored yet') %>  
7 - <% end %> 2 + <div class="target-position">
  3 + <% if target_ranking.present? %>
  4 + <span><%= _('Your position: ') %></span>
  5 + <span><%= target_ranking.gamification_position %></span>
  6 + <% else %>
  7 + <%= _('Not scored yet') %>
  8 + <% end %>
  9 + </div>
8 <% ranking.each_with_index do |person, i| %> 10 <% ranking.each_with_index do |person, i| %>
9 <li class="ranking-item"> 11 <li class="ranking-item">
10 <span class="position"> 12 <span class="position">
11 <%= i+1 %> 13 <%= i+1 %>
12 </span> 14 </span>
13 - <span class="name">  
14 - <%= person.name %> 15 + <span class="target">
  16 + <%= link_to person.url do %>
  17 + <span class="image"><%= profile_image(person, :icon) %></span>
  18 + <span class="label"><%= person.name %></span>
  19 + <% end %>
15 </span> 20 </span>
16 <span class="score"> 21 <span class="score">
  22 + <span class="gamification-icon points">&nbsp;</span>
17 <%= person.gamification_points %> 23 <%= person.gamification_points %>
18 </span> 24 </span>
19 </li> 25 </li>
views/gamification/dashboard.html.erb
@@ -51,11 +51,11 @@ @@ -51,11 +51,11 @@
51 </div> 51 </div>
52 52
53 <% if @target.kind_of?(Profile) %> 53 <% if @target.kind_of?(Profile) %>
54 -<div class="rankings"> 54 +<div class="gamification-rankings">
55 <h3><%= _('Ranking') %></h3> 55 <h3><%= _('Ranking') %></h3>
56 <div class="ranking week"> 56 <div class="ranking week">
57 <h4><%= _('Week') %></h4> 57 <h4><%= _('Week') %></h4>
58 - <%= ranking(@target, Time.zone.now.at_beginning_of_week) %> 58 + <%= ranking(@target, Time.zone.now.at_beginning_of_week, 5) %>
59 </div> 59 </div>
60 <div class="ranking month"> 60 <div class="ranking month">
61 <h4><%= _('Month') %></h4> 61 <h4><%= _('Month') %></h4>