From b91b766e96b75ac79e05f20a814f1d3982e24a1b Mon Sep 17 00:00:00 2001 From: decabeza Date: Fri, 28 Dec 2018 18:00:26 +0100 Subject: [PATCH] Adds styles and updates html markup to stats --- app/assets/images/stats_man.png | Bin 0 -> 1768 bytes app/assets/images/stats_woman.png | Bin 0 -> 1721 bytes app/assets/stylesheets/participation.scss | 2 +- app/assets/stylesheets/stats.scss | 100 +++++++--------------- app/views/budgets/stats/show.html.erb | 15 ++-- app/views/polls/_poll_subnav.html.erb | 2 +- app/views/polls/stats.html.erb | 57 ++++++------ 7 files changed, 76 insertions(+), 100 deletions(-) create mode 100644 app/assets/images/stats_man.png create mode 100644 app/assets/images/stats_woman.png diff --git a/app/assets/images/stats_man.png b/app/assets/images/stats_man.png new file mode 100644 index 0000000000000000000000000000000000000000..9fb030dbcb58c58c5e3591d1ed1ec628e0f2accb GIT binary patch literal 1768 zcmaJ=c~BEq9A2(+tH?2^P}YDWLdZ#g1i}#(OsGK`kY?yG5|V|aB-u6D5J1ID3kIb{ zM`1*TDHcVr2%Z&CBvJvj<)~UgkVD&As6cHghg#ci5U_ugzS-UP-fzC|`<=TlE_SoM z%~~4(0PJ~ONPzF&_?u$&4*o@^DRO*UgGC9kcq9$eic~NVAwg1Mkf#u(!va_&$=-1r z4gml&Z&`v66Y{sP#E60oh-ncYRqbrmZse(lqqDnvz`C=90qzHznr3eZ}M$T6a^yZ7i zGNsYDX`aRBvv^81CQ^!F9>gZ#IwYA)!eY{)2zo>`6a_KpRBBWJlgaSs;7<^ZN~b_U z)I~0Yh&2jWi7j#^Z@E#+a*YF_Kyl9ytdeEIl4up80Ou2D$(E0Wv#j0%SF(I8k;`() zcravRd;it$MH42jXp1~6 zN`wX6{T1sAxHb-jAi;$|IK&Y^w(rL|oIiJNbp%9&h(w|wX@7ooh07+VJja^{3bv0X z_xu?21yS!70Zsn7vg^i$M;+H^)1D?CwcO(}lbN0y96U92P5Wii*~H>>Ux;}Hm>V{8 zIc4vCD)BL8#aa64Gd=6PyHtBxqLQ3+{1J3jztu#{>k!-Bc}mXKD9?(|bv}I-qb1jy z5B$M6;`LfRQpYK=Llt8g^*c@S$_cF-)^82A$g_|1a7B5y9DKmGPB(qK`Mud}6P!VW8(45IelHLq^;?=p6KmK9o~F)EJU(Xx0V1=qJkcG3E^d{X}VSxLHl) z&}X6R^!pprw$R#&y(XZ%hiTE6*`)_%b!!?rdgxhQc*K_ssK>D-|*++q!4&a^t7Gp4;!DdRm(9WvBcE5bM}l+Vy)C%P{t0rl_Y& zX)|K-BszsuVyEa7YPcWi-!o+Ht1L%~U1zlxmz;U+ox5y{Sin05z!fk{0qk@p&xb9E zD|D4ylUi%vnuL418Qg5DJj}CxgnQcZm2f(uuljbOZ_&u)v(TFsTl$gitujHl2_ELz>JAt8uc|SxE%qsmX{}CatJCEQd}@!nGuGa9zQ4ib z(X)cNF!zmzh*rS#&p!NK-603!fQ_b^=mO+Uo6PY6*H=LC&C#Zn2C}K)*h<4*0KH+E z!hZ7i)L(;4uuS9jTTAlXM8-GWNA(xWyjv}ZbdNg&RwUY_sJEV}(`@%GwY{~^Dr}c2 z=_mJtQ%z^G_q3hg8eVi&IAdMyK55oEJ$pC1AU^!?@wl&&HT62Xjt>jX+bvFFO+i+M z=%LLAS5Kb#B&TgEZ(Dc3Oa~lO!~SmAW?Nv3&>uaJvthieC0DIDamV9L-I!OxOznW~ V3bDU-e3%O0ix(9O)p1fj{s$-Eq!9oB literal 0 HcmV?d00001 diff --git a/app/assets/images/stats_woman.png b/app/assets/images/stats_woman.png new file mode 100644 index 0000000000000000000000000000000000000000..e61ff0ea64c29fc6f1f5dee4da759d051953b200 GIT binary patch literal 1721 zcmaJ?X;2eq7+x?zP*7yhh%#{#5W$d(gj^CK5Rj-r8jeyAU`ZB8A=zcKnBY}pQiUoq zVpUKPtb$w8HwWrkuA&suEh1_Aq{bZ2+J?|bKcp7(i=oh^ut zTH`Wj$s7OxTojRV6|wpfPqL!}@kU;7GKs|l4^O~jkW}0VVK5-mASp1Y&_QXi3WhW} zS=Zno0GQ>gjZMH4lAb?4DFbz3+95ONW2Cpdw zIc!j4S`^nJdeFuQr6Ae3lujspn}QCVrqvrJ%S056ZGuoXm&LKAH07vN{=chEH|=e} zRq#8#|4D3!%|T(d3N|3wn3`x@s+TPkDhb122uHA31j(GLVstu!BZhPY1;fH7ss{Qh zA+=U-Gx|-SluC(0Z@?kF8dk`qbb^Pa)oLVSo?OP0MTo=YfjllZTp$()@a?(N3q zB(ZAq0u|{XN-C(JuOKJd;zGGgbD`PIB&Ye!{u9d~)f6OhQuD!|} zb-b2kcBj{1-|Xd~)!SF`Mw&|*zqU~{M;-AAA>H(WhQHPP_}|_1FeC*Q4mc1pltMd&7eco~mZ#xB`*T!~n(P zp*0abylH-1o!`TBo~K{E4`+K>GgkV=r6Te}>+cs?S&BGDr(odNkk8YV$*D`%-@&`c zPpoI_&CO5Al-5Jkm_ZLpYn8T5!GBY<%t8sKRS6Dt3D@29o|~6z@T}2yKdHX^I^@u? zp@tBI{PO;Zov-f`~M(>zkQH@(3`9UJ4zr2=} z`;1ETj-&g3G*p$KD$|LnPT<$J&%`InM z5rhJ)r3bEuFlfMqOK)zVQc~Z^`JxY5dd~J$t11*bGWL-81xOvu&gfiLbM{s8?d6Gn zC8zc;Ia66iN;|jE?YwV?&f7VHeD82=N+YmI6}Mk7^y>9Uaqx(A-rvvqlEgs2uzplS evtQJW*f{`?N?JI*ABeBoekO|WD7hsxIqx5Uz=PNT literal 0 HcmV?d00001 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" %>
    -
      -
    • - <%= link_to t("stats.title"), "#participation_statistics" %> -
        +
        +
        +

        <%= link_to t("stats.title"), "#participation_statistics" %>

        +
        • <%= link_to t("stats.total_participants"), "#total_participants" %>
          • @@ -21,25 +23,25 @@ <%= link_to t("stats.by_age"), "#participants_by_age" %>
        - -
      +
    +
    -
    -

    <%= 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])})" %> + +
    + + +
    - - +
    +