Commit f683bce9918a0b56490651b5ff6f1bc822a07c8b

Authored by Victor Costa
1 parent a64414cc

Improve ranking

public/style.css
... ... @@ -6,7 +6,7 @@
6 6 #user .gamification-plugin.user-info-template:hover {
7 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 10 background-size: 14px;
11 11 background-repeat: no-repeat;
12 12 width: 17px;
... ... @@ -17,13 +17,13 @@
17 17 .gamification-plugin.user-info-template .icon:hover {
18 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 21 background-image: url(/plugins/gamification/images/level-icon.png);
22 22 }
23 23 .gamification-plugin.user-info-template .badges .icon {
24 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 27 background-image: url(/plugins/gamification/images/points-icon.png);
28 28 }
29 29  
... ... @@ -109,3 +109,65 @@
109 109 .gamification-dashboard .scores .date {
110 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 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 10 <% ranking.each_with_index do |person, i| %>
9 11 <li class="ranking-item">
10 12 <span class="position">
11 13 <%= i+1 %>
12 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 20 </span>
16 21 <span class="score">
  22 + <span class="gamification-icon points">&nbsp;</span>
17 23 <%= person.gamification_points %>
18 24 </span>
19 25 </li>
... ...
views/gamification/dashboard.html.erb
... ... @@ -51,11 +51,11 @@
51 51 </div>
52 52  
53 53 <% if @target.kind_of?(Profile) %>
54   -<div class="rankings">
  54 +<div class="gamification-rankings">
55 55 <h3><%= _('Ranking') %></h3>
56 56 <div class="ranking week">
57 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 59 </div>
60 60 <div class="ranking month">
61 61 <h4><%= _('Month') %></h4>
... ...