From 9cfd60afc24920b3f8b9e459606c1e6560fee092 Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Wed, 17 Jan 2018 20:08:02 +0100
Subject: [PATCH] adds styles to budgets homepage

---
 app/assets/stylesheets/participation.scss |  82 ++++++++---
 app/views/budgets/index.html.erb          | 161 ++++++++++++----------
 2 files changed, 148 insertions(+), 95 deletions(-)

diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 606de72f3..a8a593dab 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -5,7 +5,7 @@
 // 03. Show participation
 // 04. List participation
 // 05. Featured
-// 06. Budget
+// 06. Budgets
 // 07. Proposals successful
 // 08. Polls
 // 09. Polls results and stats
@@ -1096,31 +1096,39 @@
   }
 }
 
-// 06. Budget
-// ----------
+// 06. Budgets
+// -----------
 
-.expanded.budget {
-  background: $budget;
+.expanded {
 
-  h1,
-  h2,
-  p,
-  .back,
-  .icon-angle-left {
-    color: #fff;
-  }
+  &.budget {
+    background: $budget;
 
-  .button {
-    background: #fff;
-    color: $budget;
-  }
+    h1,
+    h2,
+    p,
+    a,
+    .back,
+    .icon-angle-left {
+      color: #fff;
+    }
 
-  .info {
-    background: #6a2a72;
+    a {
+      text-decoration: underline;
+    }
 
-    p {
-      margin-bottom: 0;
-      text-transform: uppercase;
+    .button {
+      background: #fff;
+      color: $budget;
+    }
+
+    .info {
+      background: #6a2a72;
+
+      p {
+        margin-bottom: 0;
+        text-transform: uppercase;
+      }
     }
   }
 }
@@ -1182,7 +1190,7 @@
 
   a {
     text-decoration: underline;
- }
+  }
 
   .button {
     background: #fff;
@@ -1212,6 +1220,36 @@
   }
 }
 
+.groups-and-headings {
+
+  .heading {
+    border: 1px solid $border;
+    border-radius: rem-calc(3);
+    display: inline-block;
+    margin-bottom: $line-height / 2;
+
+    &:hover {
+      background: $highlight;
+      text-decoration: none;
+    }
+
+    a {
+      display: block;
+      padding: $line-height / 2;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    span {
+      color: $text;
+      display: block;
+      font-size: $small-font-size;
+    }
+  }
+}
+
 .progress-votes {
   position: relative;
 
diff --git a/app/views/budgets/index.html.erb b/app/views/budgets/index.html.erb
index 366e33e2c..793ded774 100644
--- a/app/views/budgets/index.html.erb
+++ b/app/views/budgets/index.html.erb
@@ -57,92 +57,107 @@
   </div>
 </div>
 
-<div id="budget_info" class="row margin-top">
-  <div class="small-12 medium-9 column">
+<div id="budget_info">
+  <div class="row margin-top">
+    <div class="small-12 column">
 
-    <div id="groups_and_headings">
-      <% @budget.groups.each do |group| %>
-        <h2><%= group.name %></h2>
-        <div class="row">
-          <% group.headings.each do |heading| %>
-            <div class="small-12 medium-6 column">
-              <%= link_to heading.name,
-                          budget_investments_path(@budget.id, heading_id: heading.id) %>
-              <%= @budget.formatted_heading_price(heading) %>
-            </div>
-          <% end %>
-        </div>
-      <% end %>
-    </div>
-
-    <div id="map">
-      <h3><%= t("budgets.index.map") %></h3>
-      <!--
-        Pending to include here the map from
-        https://github.com/consul/consul/issues/2300
-      -->
-    </div>
-
-    <div>
-      <%= link_to t("budgets.index.investment_proyects"),
-                  budget_investments_path(@budget.id) %><br>
-      <%= link_to t("budgets.index.unfeasible_investment_proyects"),
-                  budget_investments_path(budget_id: @budget.id, filter: 'unfeasible') %><br>
-      <%= link_to t("budgets.index.not_selected_investment_proyects"),
-                  budget_investments_path(budget_id: @budget.id, filter: 'unselected') %>
-    </div>
-
-    <div id="all_phases">
-      <h2><%= t("budgets.index.all_phases") %></h2>
-      <!--
-        Pending to include here the list of phases from
-        https://github.com/consul/consul/issues/2289
-      -->
-    </div>
-
-
-    <div class="tabs-content" data-tabs-content="other_budgets" role="tablist">
-      <div class="row margin-top">
-        <div class="small-12 column">
-          <ul class="tabs" data-tabs id="budget_tabs">
-            <li class="tabs-title is-active">
-              <%= link_to "#other_budgets" do %>
-                <h3>
-                  <%= t("budgets.index.finished_budgets") %>
-                </h3>
-              <% end %>
-            </li>
+      <div id="groups_and_headings" class="groups-and-headings">
+        <% @budget.groups.each do |group| %>
+          <h2><%= group.name %></h2>
+          <ul class="no-bullet">
+            <% group.headings.each do |heading| %>
+              <li class="heading small-12 medium-4 large-2">
+                <%= link_to budget_investments_path(@budget.id, heading_id: heading.id) do %>
+                  <%= heading.name %>
+                  <span><%= @budget.formatted_heading_price(heading) %></span>
+                <% end %>
+              </li>
+            <% end %>
           </ul>
-        </div>
+        <% end %>
       </div>
 
-      <div class="tabs-panel is-active" id="other_budgets">
+      <div id="map">
+        <h3><%= t("budgets.index.map") %></h3>
+        <!--
+          Pending to include here the map from
+          https://github.com/consul/consul/issues/2300
+        -->
+      </div>
+
+      <p>
+        <%= link_to budget_investments_path(@budget.id) do %>
+          <small><%= t("budgets.index.investment_proyects") %></small>
+        <% end %><br>
+        <%= link_to budget_investments_path(budget_id: @budget.id, filter: 'unfeasible') do %>
+          <small><%= t("budgets.index.unfeasible_investment_proyects") %></small>
+        <% end %><br>
+        <%= link_to budget_investments_path(budget_id: @budget.id, filter: 'unselected') do %>
+          <small><%= t("budgets.index.not_selected_investment_proyects") %></small>
+        <% end %>
+      </p>
+
+      <div id="all_phases">
+        <h2><%= t("budgets.index.all_phases") %></h2>
+        <!--
+          Pending to include here the list of phases from
+          https://github.com/consul/consul/issues/2289
+        -->
+      </div>
+    </div>
+  </div>
+
+  <div class="row margin-top">
+    <div class="small-12 medium-9 column">
+      <ul class="no-bullet submenu">
+        <li class="inline-block">
+          <%= link_to "#other_budgets", class: "active" do %>
+            <h2>
+              <%= t("budgets.index.finished_budgets") %>
+            </h2>
+          <% end %>
+        </li>
+      </ul>
+
+      <div class="budget-investments-list">
         <% @budgets.each do |budget| %>
           <% if budget_published?(budget) %>
-            <div class="row">
-              <div class="small-9 column">
-                <%= budget.name %>
-                <%= budget.description %>
-              </div>
-              <div class="small-3 column">
-                <%= link_to t("budgets.index.see_results"), budget_results_path(budget.id) %>
+            <div class="budget-investment clear">
+              <div class="panel">
+                <div class="row" data-equalizer data-equalizer-on="medium">
+                  <div class="small-9 column" data-equalizer-watch>
+                    <h3><%= budget.name %></h3>
+                    <%= budget.description %>
+                  </div>
+                  <div class="small-3 column table" data-equalizer-watch>
+                    <div class="table-cell align-middle">
+                      <%= link_to t("budgets.index.see_results"),
+                                  budget_results_path(budget.id),
+                                  class: "button expanded" %>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           <% end %>
         <% end %>
       </div>
     </div>
+  </div>
 
-    <div id="section_help" class="margin" data-magellan-target="section_help">
-      <p class="lead">
-        <strong><%= t("budgets.index.section_footer.title") %></strong>
-      </p>
-      <p><%= t("budgets.index.section_footer.description") %></p>
-      <p><%= t("budgets.index.section_footer.help_text_1") %></p>
-      <p><%= t("budgets.index.section_footer.help_text_2") %></p>
-      <p><%= t("budgets.index.section_footer.help_text_3",
-                org: link_to(setting['org_name'], new_user_registration_path)).html_safe %></p>
-      <p><%= t("budgets.index.section_footer.help_text_4") %></p>
+  <div class="row">
+    <div class="small-12 column">
+      <div id="section_help" class="margin" data-magellan-target="section_help">
+        <p class="lead">
+          <strong><%= t("budgets.index.section_footer.title") %></strong>
+        </p>
+        <p><%= t("budgets.index.section_footer.description") %></p>
+        <p><%= t("budgets.index.section_footer.help_text_1") %></p>
+        <p><%= t("budgets.index.section_footer.help_text_2") %></p>
+        <p><%= t("budgets.index.section_footer.help_text_3",
+                  org: link_to(setting['org_name'], new_user_registration_path)).html_safe %></p>
+        <p><%= t("budgets.index.section_footer.help_text_4") %></p>
+      </div>
     </div>
   </div>
 </div>