Use a <meter> tag to display age percentages
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
Reference in New Issue
Block a user