Adds styles and updates html markup to stats
This commit is contained in:
decabeza
BIN
app/assets/images/stats_man.png
Normal file
BIN
app/assets/images/stats_man.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
app/assets/images/stats_woman.png
Normal file
BIN
app/assets/images/stats_woman.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
@@ -1996,7 +1996,7 @@
|
||||
border-right: 1px solid $border;
|
||||
}
|
||||
|
||||
.menu {
|
||||
.menu:not(.vertical) {
|
||||
padding: 0;
|
||||
|
||||
li a {
|
||||
|
||||
@@ -1,55 +1,34 @@
|
||||
.polls-results-stats {
|
||||
.participation-stats {
|
||||
|
||||
.sidebar {
|
||||
border-right: 1px solid $border;
|
||||
|
||||
> ul {
|
||||
display: block;
|
||||
font-size: rem-calc(20);
|
||||
ul {
|
||||
margin-left: $line-height / 2;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
|
||||
ul {
|
||||
font-size: rem-calc(15);
|
||||
list-style-type: none;
|
||||
margin-left: 0.8rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
li a {
|
||||
color: $link;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
.section-title {
|
||||
font-size: rem-calc(24);
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
|
||||
section section {
|
||||
clear: both;
|
||||
margin-top: rem-calc(30);
|
||||
margin-bottom: rem-calc(30);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: rem-calc(20);
|
||||
margin-bottom: rem-calc(12);
|
||||
.stats-group {
|
||||
margin-bottom: $line-height;
|
||||
margin-top: $line-height;
|
||||
}
|
||||
|
||||
.participants {
|
||||
$background-width: 52px;
|
||||
|
||||
float: left;
|
||||
margin-left: $background-width;
|
||||
margin-right: rem-calc(22);
|
||||
display: inline-block;
|
||||
margin-right: $line-height * 2;
|
||||
padding-left: $line-height * 2.5;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
// TODO: change image and move it to a non-custom folder
|
||||
content: image-url("custom/polls/stats_man.png");
|
||||
left: -$background-width;
|
||||
content: image-url('stats_man.png');
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@@ -61,48 +40,31 @@
|
||||
}
|
||||
|
||||
.info {
|
||||
color: $dark-gray;
|
||||
color: $text-medium;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
&.gender {
|
||||
.gender {
|
||||
|
||||
&.male {
|
||||
&::before {
|
||||
content: image-url("custom/polls/stats_man.png");
|
||||
}
|
||||
}
|
||||
&.male::before {
|
||||
content: image-url('stats_man.png');
|
||||
}
|
||||
|
||||
&.female {
|
||||
&::before {
|
||||
content: image-url("custom/polls/stats_woman.png");
|
||||
}
|
||||
}
|
||||
&.female::before {
|
||||
content: image-url('stats_woman.png');
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
.progress {
|
||||
background: #ebf0f4;
|
||||
border-radius: 0.3rem;
|
||||
border-radius: rem-calc(20);
|
||||
height: $line-height / 2;
|
||||
}
|
||||
|
||||
.progress-meter {
|
||||
background: #52a4ee;
|
||||
border-bottom-left-radius: rem-calc(20);
|
||||
border-top-left-radius: rem-calc(20);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<% end %>
|
||||
|
||||
<% cache [@stats] do %>
|
||||
<div class="budgets-stats">
|
||||
<div class="participation-stats budgets-stats">
|
||||
<div class="expanded no-margin-top padding header">
|
||||
<div class="row">
|
||||
<div class="small-12 column">
|
||||
@@ -135,8 +135,8 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="table-width border-right"><%= t("budgets.stats.age").upcase %></th>
|
||||
<th scope="col" class="border-left"><%= t("budgets.stats.total").upcase %></th>
|
||||
<th scope="col" class="small-4"><%= t("budgets.stats.age").upcase %></th>
|
||||
<th scope="col"><%= t("budgets.stats.total").upcase %></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -144,8 +144,13 @@
|
||||
<tr>
|
||||
<td><%= group[:range] %></td>
|
||||
<td>
|
||||
<%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %>
|
||||
<meter min="0" max="100" value="<%= group[:percentage] %>"></meter>
|
||||
<strong>
|
||||
<%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %>
|
||||
</strong>
|
||||
<div class="progress" tabindex="0">
|
||||
<span class="progress-meter" style="width: <%= group[:percentage] %>%">
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<% if @poll.stats_enabled? %>
|
||||
<% if stats_menu? %>
|
||||
<li class="is-active">
|
||||
<%= t("polls.show.stats_menu") %>
|
||||
<h2><%= t("polls.show.stats_menu") %></h2>
|
||||
</li>
|
||||
<% else %>
|
||||
<li><%= link_to t("polls.show.stats_menu"), stats_poll_path(id: @poll.slug || @poll.id) %></li>
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
<% provide :title do %><%= @poll.name %><% end %>
|
||||
|
||||
<div class="polls-results-stats">
|
||||
<div class="participation-stats polls-results-stats">
|
||||
<%= render "poll_header" %>
|
||||
|
||||
<%= render "poll_subnav" %>
|
||||
|
||||
<div class="row margin" data-equalizer data-equalize-on="medium">
|
||||
<div class="small-12 medium-3 column sidebar" data-equalizer-watch>
|
||||
<ul class="menu">
|
||||
<li>
|
||||
<%= link_to t("stats.title"), "#participation_statistics" %>
|
||||
<ul>
|
||||
<div class="sticky-container" data-sticky-container>
|
||||
<div class="sticky" data-sticky
|
||||
data-sticky-on="large"
|
||||
data-anchor="participation_statistics">
|
||||
<p><strong><%= link_to t("stats.title"), "#participation_statistics" %></strong></p>
|
||||
<ul class="menu vertical">
|
||||
<li>
|
||||
<%= link_to t("stats.total_participants"), "#total_participants" %>
|
||||
</li>
|
||||
@@ -21,25 +23,25 @@
|
||||
<%= link_to t("stats.by_age"), "#participants_by_age" %>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="small-12 medium-9 column" data-equalizer-watch>
|
||||
<section id="participation_statistics">
|
||||
<h2><%= t("stats.title") %></h2>
|
||||
<div id="participation_statistics">
|
||||
<h3 class="section-title"><%= t("stats.title") %></h3>
|
||||
|
||||
<section id="total_participants">
|
||||
<h3><%= t("stats.total_participants") %></h3>
|
||||
<div id="total_participants" class="stats-group" >
|
||||
<h4><%= t("stats.total_participants") %></h4>
|
||||
|
||||
<p class="participants">
|
||||
<span class="number"><%= @stats[:total_participants] %></span>
|
||||
<span class="info"><%= t("polls.show.stats.total_votes") %><br></span>
|
||||
<span class="info"><%= t("polls.show.stats.total_votes") %></span>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section id="participants_by_gender">
|
||||
<h3><%= t("stats.by_gender") %></h3>
|
||||
<div id="participants_by_gender" class="stats-group">
|
||||
<h4><%= t("stats.by_gender") %></h4>
|
||||
|
||||
<p class="gender male participants">
|
||||
<span class="number"><%= @stats[:total_male_participants] %></span>
|
||||
@@ -56,15 +58,17 @@
|
||||
percentage: number_to_stats_percentage(@stats[:female_percentage])) %>
|
||||
</span>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section id="participants_by_age">
|
||||
<h3><%= t("stats.by_age") %></h3>
|
||||
<div id="participants_by_age" class="stats-group">
|
||||
<h4><%= t("stats.by_age") %></h4>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<th><%= t("stats.age") %></th>
|
||||
<th><%= t("stats.total") %></th>
|
||||
<tr>
|
||||
<th class="small-4"><%= t("stats.age") %></th>
|
||||
<th><%= t("stats.total") %></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
@@ -72,15 +76,20 @@
|
||||
<tr>
|
||||
<td><%= group[:range] %></td>
|
||||
<td>
|
||||
<%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %>
|
||||
<meter min="0" max="100" value="<%= group[:percentage] %>"></meter>
|
||||
<strong>
|
||||
<%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %>
|
||||
</strong>
|
||||
<div class="progress" tabindex="0">
|
||||
<span class="progress-meter" style="width: <%= group[:percentage] %>%">
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
|
||||
Reference in New Issue
Block a user