Use a <meter> tag to display age percentages

This commit is contained in:
Javi Martín
2018-12-20 18:31:48 +01:00
parent 0037ce5546
commit 7ce57f649f
3 changed files with 27 additions and 7 deletions

View File

@@ -80,4 +80,29 @@
}
}
}
meter {
background: none;
background-color: #ebf0f4;
border-radius: 0.3rem;
display: block;
width: 100%;
}
meter::-moz-meter-bar {
background: #52a4ee;
border-bottom-left-radius: 0.3rem;
border-top-left-radius: 0.3rem;
}
meter::-webkit-meter-optimum-value {
background: #52a4ee;
border-bottom-left-radius: 0.3rem;
border-top-left-radius: 0.3rem;
}
meter::-webkit-meter-bar {
background: #ebf0f4;
border-radius: 0.3rem;
}
}

View File

@@ -145,9 +145,7 @@
<td><%= group[:range] %></td>
<td>
<%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %>
<div class="progress" role="progressbar" tabindex="0" aria-valuenow="20" aria-valuemin="0" aria-valuetext="<%= group[:percentage] %>" aria-valuemax="100">
<span class="progress-meter" style="width: <%= number_to_stats_percentage(group[:percentage]*5, locale: :en) %>;"></span>
</div>
<meter min="0" max="100" value="<%= group[:percentage] %>"></meter>
</td>
</tr>
<% end %>

View File

@@ -73,10 +73,7 @@
<td><%= group[:range] %></td>
<td>
<%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %>
<div class="progress" role="progressbar" tabindex="0" aria-valuemin="0" aria-valuetext="<%= group[:percentage] %>" aria-valuemax="100">
<span class="progress-meter" style="width: <%= number_to_stats_percentage(group[:percentage], locale: :en) %>;"></span>
</div>
<meter min="0" max="100" value="<%= group[:percentage] %>"></meter>
</td>
</tr>
<% end %>