Improvements on budget results view & table

app/assets/stylesheets/layout.scss

@@ -226,6 +226,11 @@ a {
     a {
       color: $text-medium;
       padding: 0;
+
+      &.active {
+        font-weight: bold;
+        color: $brand;
+      }
     }
 
     h2 {
@@ -236,11 +241,6 @@ a {
       border-bottom: 2px solid $brand;
       color: $brand;
     }
-
-    &.bold {
-      font-weight: bold;
-      color: $brand;
-    }
   }
 
   &.no-margin-top {

app/controllers/budgets/results_controller.rb

@@ -7,24 +7,20 @@ module Budgets
 
     def show
       authorize! :read_results, @budget
-      @investments = load_result.investments
+      @investments = Budget::Result.new(@budget, @heading).investments
     end
 
     private
 
-      def load_result
-        Budget::Result.new(@budget, @heading)
-      end
-
       def load_budget
         @budget = Budget.find_by(id: params[:budget_id])
       end
 
       def load_heading
-        if params[:heading_id].present?
-          @heading = @budget.headings.find(params[:heading_id])
+        @heading = if params[:heading_id].present?
+                     @budget.headings.find(params[:heading_id])
                    else
-          @heading = @budget.headings.first
+                     @budget.headings.first
                    end
       end
 

app/views/budgets/results/_results_table.html.erb

@@ -1,4 +1,4 @@
-<div class="small-12 medium-9 column <%= results_type == :compatible ? 'success' : 'js-discarded' %>"
+<div class="small-12 medium-9 large-10 column <%= results_type == :compatible ? 'success' : 'js-discarded' %>"
      style="<%= results_type != :compatible ? 'display: none' : '' %>"
      id="<%= results_type %>-container">
 
@@ -20,8 +20,8 @@
         </th>
         <% if results_type == :compatible %>
           <th scope="col" class="text-right">
+            <small><%= t("budgets.results.amount_available") %></small><br>
             <%= format_price(heading_price) %><br>
-            <small><%= t("budgets.results.amount_available") %></small>
           </th>
         <% end %>
       </tr>

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

@@ -10,37 +10,49 @@
   <%= render "shared/canonical", href: budget_results_url(@budget) %>
 <% end %>
 
-<div class="expanded budget no-margin-top">
+<div class="budgets-stats">
+  <div class="expanded no-margin-top padding header">
     <div class="row">
-    <div class="small-12 column padding text-center">
+      <div class="small-12 column text-center">
         <%= back_link_to budget_path(@budget) %>
-
-      <h2 class="title">
-        <%= @budget.name %><br>
-        <%= t("budgets.results.heading") %>
-      </h2>
+        <h1 class="title"><%= t("budgets.results.heading") %><br><%= @budget.name %></h1>
+      </div>
     </div>
   </div>
 </div>
 
 <div class="row margin-top">
-  <div class="small-12 medium-3 column">
-    <ul class="menu vertical no-margin-top no-padding-top">
-      <li>
-        <strong>
-          <%= t("budgets.results.geozone_selection_title") %>
-        </strong>
+  <div class="small-12 column">
+    <ul class="tabs">
+      <li class="tabs-title is-active">
+        <span class="show-for-sr"><%= t("shared.you_are_in") %></span>
+        <%= link_to t("budgets.results.link"), budget_results_path(@budget), class: "is-active"  %>
       </li>
+      <li class="tabs-title">
+        <%# link_to t("budgets.stats.link"), budget_stats_path(@budget)%>
+      </li>
+    </ul>
+  </div>
+</div>
 
-      <% @budget.headings.each do |heading| %>
-        <% active_class = heading.id.to_s == params[:heading_id] ? 'bold' : '' %>
-        <li class="<%= active_class %>">
+<div class="row">
+  <div class="small-12 medium-3 large-2 column">
+    <div class="row">
+      <ul class="menu vertical no-margin-top no-padding-top">
+        <h3>
+          <%= t("budgets.results.heading_selection_title") %>
+        </h3>
+
+        <% @budget.headings.order('id ASC').each do |heading| %>
+          <li>
             <%= link_to heading.name,
-                      budget_results_path(@budget, heading_id: heading.id) %>
+                        budget_results_path(@budget, heading_id: heading.to_param),
+                        class: heading.to_param == @heading.to_param ? 'active' : '' %>
           </li>
         <% end %>
       </ul>
     </div>
+  </div>
 
   <span class="float-right"><%= link_to t("budgets.results.show_all_link"), "#", class: "js-toggle-link button hollow margin-bottom", data: {'toggle-selector' => '.js-discarded', 'toggle-text' => t("budgets.results.hide_discarded_link")} %></span>
 

config/locales/en/budgets.yml

@@ -125,9 +125,10 @@ en:
       unselected: See investments not selected for balloting phase
       see_results: See results
     results:
+      link: Results
       page_title: "%{budget} - Results"
       heading: "Participatory budget results"
-      geozone_selection_title: "By district"
+      heading_selection_title: "By district"
       spending_proposal: Proposal title
       ballot_lines_count: Times selected
       hide_discarded_link: Hide discarded

config/locales/es/budgets.yml

@@ -125,9 +125,10 @@ es:
       unselected: Ver las propuestas no seleccionadas para la votación final
       see_results: Ver resultados
     results:
+      link: Resultados
       page_title: "%{budget} - Resultados"
       heading: "Resultados presupuestos participativos"
-      geozone_selection_title: "Ámbito de actuación"
+      heading_selection_title: "Ámbito de actuación"
       spending_proposal: Título
       ballot_lines_count: Votos
       hide_discarded_link: Ocultar descartadas
@@ -137,4 +138,3 @@ es:
       accepted: "Propuesta de inversión aceptada: "
       discarded: "Propuesta de inversión descartada: "
       incompatibles: Incompatibles
-

spec/features/budgets/results_spec.rb

@@ -14,9 +14,13 @@ feature 'Results' do
   let!(:results) { Budget::Result.new(budget, heading).calculate_winners }
 
   scenario "Diplays winner investments" do
+    create(:budget_heading, group: group)
+
     visit budget_path(budget)
     click_link "See results"
 
+    expect(page).to have_selector('a.active', text: budget.headings.first.name)
+
     within("#budget-investments-compatible") do
       expect(page).to have_content investment1.title
       expect(page).to have_content investment2.title