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 %> -