From c0afb94cfab4dae45a298bb1f3e5c77d8b973328 Mon Sep 17 00:00:00 2001
From: Alberto Garcia Cabeza <alberto@decabeza.es>
Date: Mon, 8 May 2017 14:33:07 +0200
Subject: [PATCH] improves ballot page when shows several groups

---
 app/assets/stylesheets/participation.scss | 16 +++++++------
 app/views/budgets/ballot/_ballot.html.erb | 29 ++++++++++++-----------
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index ad413925b..4cb3fbb34 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -1064,13 +1064,16 @@
     }
   }
 
-  h3.subtitle {
-    border-bottom: 3px solid $budget;
+  .ballot-content {
+    border: 2px solid #F9F9F9;
+    border-radius: rem-calc(6);
+    padding: $line-height/2;
+  }
 
-    span {
-      font-size: $base-font-size;
-      font-weight: normal;
-    }
+  .subtitle {
+    border-left: 2px solid $budget;
+    margin: $line-height/2 0;
+    padding-left: $line-height/2;
   }
 
   .amount-spent {
@@ -1101,7 +1104,6 @@ ul.ballot-list {
     }
 
     span {
-      color: #9f9f9f;
       display: block;
       font-style: italic;
     }
diff --git a/app/views/budgets/ballot/_ballot.html.erb b/app/views/budgets/ballot/_ballot.html.erb
index aa37828b2..72a0d1c6e 100644
--- a/app/views/budgets/ballot/_ballot.html.erb
+++ b/app/views/budgets/ballot/_ballot.html.erb
@@ -19,13 +19,19 @@
 </div>
 
 <div class="row ballot">
-  <div class="margin-top">
-    <% @ballot.groups.order(name: :asc).each do |group| %>
-      <div id="<%= dom_id(group) %>"
-          class="small-12 medium-6 column">
-        <h3 class="subtitle">
-          <%= group.name %> - <%= @ballot.heading_for_group(group).name %>
-        </h3>
+  <% @ballot.groups.order(name: :asc).each do |group| %>
+    <div id="<%= dom_id(group) %>"
+        class="small-12 medium-6 column end">
+      <div class="margin-top ballot-content">
+        <div class="subtitle">
+          <h3>
+            <%= group.name %> - <%= @ballot.heading_for_group(group).name %>
+          </h3>
+          <strong>
+            <%= t("budgets.ballots.show.remaining",
+                  amount: @ballot.formatted_amount_available(@ballot.heading_for_group(group))).html_safe %>
+          </strong>
+        </div>
         <% if @ballot.has_lines_in_group?(group) %>
           <h4 class="amount-spent text-right">
             <%= t("budgets.ballots.show.amount_spent") %>
@@ -43,12 +49,7 @@
           <%= render partial: 'budgets/ballot/investment',
                      collection: @ballot.investments.by_group(group.id) %>
         </ul>
-
-        <h4>
-          <%= t("budgets.ballots.show.remaining",
-                amount: @ballot.formatted_amount_available(@ballot.heading_for_group(group))).html_safe %>
-        </h4>
       </div>
-    <% end %>
-  </div>
+    </div>
+  <% end %>
 </div>