Browse Source

Improve div for cumulative datas, thanks Alyve!

Norore 4 months ago
parent
commit
751cc56266
  1. 23
      app/javascript/css/application.scss
  2. 8
      app/views/statistics/index.html.erb

23
app/javascript/css/application.scss

@ -187,3 +187,26 @@ table.scoring img {
max-width: 140px;
}
}
/** Chart CSS */
.cumulative-datas {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
&-content {
position: absolute;
height: 2rem;
}
}
.cumulative-data {
height: 2rem;
line-height: 2rem;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: .1rem;
padding-left: .3rem;
}

8
app/views/statistics/index.html.erb

@ -64,14 +64,16 @@
<!-- DIV solution -->
<em>DIV solution</em>
<div class="row">
<% grades.data.sort_by(&:first).each do |grade, number| %>
<div class="cumulative-datas">
<% left = 0
grades.data.sort_by(&:first).each do |grade, number| %>
<% unless %w(T V).include?(grade)
percent = (number.to_f / total.to_f) * 100.0
color = colors[grade] %>
<div style="width: <%= percent.round %>%; height: 2rem; line-height: 2rem; display: inline-block; background-color: <%= color %>; white-space: nowrap; text-overflow: ellipsis; margin-right: 2px">
<div class="cumulative-data" style="left: <%= left %>; width: <%= percent.round %>%; background-color: <%= color %>;">
<%= "#{grade}: #{percent.round}% (#{number})" %>
</div>
<% left += percent.round %>
<% end
end %>
</div>

Loading…
Cancel
Save