Adds styles and updates html markup to stats

app/assets/stylesheets/participation.scss

@@ -1996,7 +1996,7 @@
       border-right: 1px solid $border;
     }
 
-    .menu {
+    .menu:not(.vertical) {
       padding: 0;
 
       li a {

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);
-      padding: 0;
-
     ul {
-        font-size: rem-calc(15);
+      margin-left: $line-height / 2;
-        list-style-type: none;
+      margin-top: 0;
-        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 {
+  .stats-group {
-    clear: both;
+    margin-bottom: $line-height;
-    margin-top: rem-calc(30);
+    margin-top: $line-height;
-    margin-bottom: rem-calc(30);
-    overflow: hidden;
-  }
-
-  h3 {
-    font-size: rem-calc(20);
-    margin-bottom: rem-calc(12);
   }
 
   .participants {
-    $background-width: 52px;
+    display: inline-block;
-
+    margin-right: $line-height * 2;
-    float: left;
+    padding-left: $line-height * 2.5;
-    margin-left: $background-width;
-    margin-right: rem-calc(22);
     position: relative;
 
     &::before {
-      // TODO: change image and move it to a non-custom folder
+      content: image-url('stats_man.png');
-      content: image-url("custom/polls/stats_man.png");
+      left: 0;
-      left: -$background-width;
       position: absolute;
     }
 
@@ -61,48 +40,31 @@
     }
 
     .info {
-      color: $dark-gray;
+      color: $text-medium;
       font-style: italic;
     }
+  }
 
-    &.gender {
+  .gender {
 
-      &.male {
+    &.male::before {
-        &::before {
+      content: image-url('stats_man.png');
-          content: image-url("custom/polls/stats_man.png");
+    }
+
+    &.female::before {
+      content: image-url('stats_woman.png');
     }
   }
 
-      &.female {
+  .progress {
-        &::before {
-          content: image-url("custom/polls/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 {
     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);
   }
 }

app/views/budgets/stats/show.html.erb

@@ -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="small-4"><%= t("budgets.stats.age").upcase %></th>
-              <th scope="col" class="border-left"><%= t("budgets.stats.total").upcase %></th>
+              <th scope="col"><%= t("budgets.stats.total").upcase %></th>
             </tr>
           </thead>
           <tbody>
@@ -144,8 +144,13 @@
               <tr>
                 <td><%= group[:range] %></td>
                 <td>
+                  <strong>
                     <%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %>
-                  <meter min="0" max="100" value="<%= group[:percentage] %>"></meter>
+                  </strong>
+                  <div class="progress" tabindex="0">
+                    <span class="progress-meter" style="width: <%= group[:percentage] %>%">
+                    </span>
+                  </div>
                 </td>
               </tr>
             <% end %>

app/views/polls/_poll_subnav.html.erb

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

app/views/polls/stats.html.erb

@@ -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">
+      <div class="sticky-container" data-sticky-container>
-        <li>
+        <div class="sticky" data-sticky
-          <%= link_to t("stats.title"), "#participation_statistics" %>
+                            data-sticky-on="large"
-          <ul>
+                            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>
+        </div>
-      </ul>
+      </div>
     </div>
 
     <div class="small-12 medium-9 column" data-equalizer-watch>
-      <section id="participation_statistics">
+      <div id="participation_statistics">
-        <h2><%= t("stats.title") %></h2>
+        <h3 class="section-title"><%= t("stats.title") %></h3>
 
-        <section id="total_participants">
+        <div id="total_participants" class="stats-group" >
-          <h3><%= t("stats.total_participants") %></h3>
+          <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">
+        <div id="participants_by_gender" class="stats-group">
-          <h3><%= t("stats.by_gender") %></h3>
+          <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">
+        <div id="participants_by_age" class="stats-group">
-          <h3><%= t("stats.by_age") %></h3>
+          <h4><%= t("stats.by_age") %></h4>
 
           <table>
             <thead>
-              <th><%= t("stats.age") %></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>
+                    <strong>
                       <%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %>
-                    <meter min="0" max="100" value="<%= group[:percentage] %>"></meter>
+                    </strong>
+                    <div class="progress" tabindex="0">
+                      <span class="progress-meter" style="width: <%= group[:percentage] %>%">
+                      </span>
+                    </div>
                   </td>
                 </tr>
               <% end %>
             </tbody>
           </table>
-        </section>
+        </div>
-      </section>
+      </div>
 
       <table>
         <thead>