diff --git a/app/assets/images/stats_man.png b/app/assets/images/stats_man.png new file mode 100644 index 000000000..9fb030dbc Binary files /dev/null and b/app/assets/images/stats_man.png differ diff --git a/app/assets/images/stats_woman.png b/app/assets/images/stats_woman.png new file mode 100644 index 000000000..e61ff0ea6 Binary files /dev/null and b/app/assets/images/stats_woman.png differ diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 11fe4b482..ad447f909 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1996,7 +1996,7 @@ border-right: 1px solid $border; } - .menu { + .menu:not(.vertical) { padding: 0; li a { diff --git a/app/assets/stylesheets/stats.scss b/app/assets/stylesheets/stats.scss index ea1177e6a..f6d8845c5 100644 --- a/app/assets/stylesheets/stats.scss +++ b/app/assets/stylesheets/stats.scss @@ -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); } } diff --git a/app/views/budgets/stats/show.html.erb b/app/views/budgets/stats/show.html.erb index b7dffce48..dad8ee5e9 100644 --- a/app/views/budgets/stats/show.html.erb +++ b/app/views/budgets/stats/show.html.erb @@ -9,7 +9,7 @@ <% end %> <% cache [@stats] do %> -
+
@@ -135,8 +135,8 @@ - - + + @@ -144,8 +144,13 @@ <% end %> diff --git a/app/views/polls/_poll_subnav.html.erb b/app/views/polls/_poll_subnav.html.erb index 1fec98bdb..e50d64e0a 100644 --- a/app/views/polls/_poll_subnav.html.erb +++ b/app/views/polls/_poll_subnav.html.erb @@ -15,7 +15,7 @@ <% if @poll.stats_enabled? %> <% if stats_menu? %>
  • - <%= t("polls.show.stats_menu") %> +

    <%= t("polls.show.stats_menu") %>

  • <% else %>
  • <%= link_to t("polls.show.stats_menu"), stats_poll_path(id: @poll.slug || @poll.id) %>
  • diff --git a/app/views/polls/stats.html.erb b/app/views/polls/stats.html.erb index ab90f94dd..54ad19a59 100644 --- a/app/views/polls/stats.html.erb +++ b/app/views/polls/stats.html.erb @@ -1,16 +1,18 @@ <% provide :title do %><%= @poll.name %><% end %> -
    +
    <%= render "poll_header" %> <%= render "poll_subnav" %>
    +
    -
    -

    <%= t("stats.title") %>

    +
    +

    <%= t("stats.title") %>

    -
    -

    <%= t("stats.total_participants") %>

    +
    +

    <%= t("stats.total_participants") %>

    <%= @stats[:total_participants] %> - <%= t("polls.show.stats.total_votes") %>
    + <%= t("polls.show.stats.total_votes") %>

    -
    +
    -
    -

    <%= t("stats.by_gender") %>

    +
    +

    <%= t("stats.by_gender") %>

    <%= @stats[:total_male_participants] %> @@ -56,15 +58,17 @@ percentage: number_to_stats_percentage(@stats[:female_percentage])) %>

    -
    +
    -
    -

    <%= t("stats.by_age") %>

    +
    +

    <%= t("stats.by_age") %>

    <%= t("budgets.stats.age").upcase %><%= t("budgets.stats.total").upcase %><%= t("budgets.stats.age").upcase %><%= t("budgets.stats.total").upcase %>
    <%= group[:range] %> - <%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %> - + + <%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %> + +
    + + +
    - - + + + + @@ -72,15 +76,20 @@ <% end %>
    <%= t("stats.age") %><%= t("stats.total") %>
    <%= t("stats.age") %><%= t("stats.total") %>
    <%= group[:range] %> - <%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %> - + + <%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %> + +
    + + +
    - - +
    +