Merge pull request #2537 from consul/budgets-ui

Fixes budgets ui for all phases

app/assets/stylesheets/layout.scss

@@ -508,6 +508,7 @@ header {
       margin: 0;
       margin-top: rem-calc(-24);
       padding: 0;
+      z-index: 9;
     }
 
     .is-submenu-item {
@@ -1020,6 +1021,10 @@ form {
     background-color: $info-bg;
     border-color: $info-border;
     color: $color-info;
+
+    a {
+      color: $link !important;
+    }
   }
 
   &.warning {

app/assets/stylesheets/participation.scss

@@ -218,7 +218,7 @@
   left: 0;
   line-height: $line-height;
   min-height: 100%;
-  padding: $line-height $line-height / 2;
+  padding: $line-height / 2;
   position: absolute;
   text-align: center;
   top: 0;
@@ -1120,9 +1120,17 @@
       text-decoration: underline;
     }
 
+    .callout {
+
+      &.primary a {
+        color: $link;
+      }
+    }
+
     .button {
       background: #fff;
       color: $budget;
+      text-decoration: none;
     }
 
     .info {
@@ -1432,12 +1440,9 @@
     background-color: $budget;
     transition: height 0.3s;
 
-    h1 {
-      transition: font-size 0.3s;
-    }
-
     h2 {
-      margin-bottom: 0;
+      margin-bottom: $line-height / 2;
+      transition: font-size 0.3s;
     }
 
     &.is-fixed {
@@ -1448,7 +1453,7 @@
       top: 0;
       width: 100%;
 
-      h1 {
+      h2 {
         font-size: rem-calc(24);
         transition: font-size 0.3s;
       }
@@ -1513,6 +1518,23 @@
   }
 }
 
+.budgets-stats {
+
+  .header {
+    background: $highlight;
+  }
+
+  .big-number-stat {
+    font-size: rem-calc(60);
+    font-weight: bold;
+    line-height: rem-calc(60);
+
+    &.budget {
+      color: $budget;
+    }
+  }
+}
+
 // 07. Proposals successful
 // -------------------------
 

app/views/admin/budgets/_form.html.erb

@@ -64,7 +64,10 @@
       <% end %>
 
       <% if @budget.persisted? %>
-        <%= link_to t("admin.budgets.edit.delete"), admin_budget_path(@budget), method: :delete, class: "button hollow alert float-right" %>
+        <%= link_to t("admin.budgets.edit.delete"),
+            admin_budget_path(@budget),
+            method: :delete,
+            class: "button hollow alert float-right margin-left" %>
       <% end %>
     </div>
 

app/views/budgets/index.html.erb

@@ -17,7 +17,7 @@
       </div>
       <div class="small-12 medium-3 column info padding" data-equalizer-watch>
         <p>
-          <strong><%= t('budgets.show.phase') %></strong>
+          <strong><%= t("budgets.show.phase") %></strong>
         </p>
         <h2><%= t("budgets.phase.#{current_budget.phase}") %></h2>
 

app/views/budgets/investments/_header.html.erb

@@ -66,7 +66,9 @@
       <div class="small-12 column">
         <%= back_link_to budget_path(@budget) %>
 
-        <h1><%= t('budgets.investments.index.title') %></h1>
+        <h2 class="margin-top">
+          <%= t("budgets.investments.index.title") %>
+        </h2>
       </div>
     </div>
   </div>

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

@@ -2,9 +2,7 @@
      style="<%= results_type != :compatible ? 'display: none' : '' %>"
      id="<%= results_type %>-container">
 
-  <h4 class="inline-block">
-    <%= title %>
-  </h4>
+  <h4><%= title %></h4>
 
   <table id="budget-investments-<%= results_type %>" class="table-for-mobile">
     <thead>

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

@@ -13,9 +13,12 @@
 <div class="budgets-stats">
   <div class="expanded no-margin-top padding header">
     <div class="row">
-      <div class="small-12 column text-center">
+      <div class="small-12 column">
         <%= back_link_to budgets_path %>
-        <h1 class="title"><%= t("budgets.results.heading") %><br><%= @budget.name %></h1>
+        <h2 class="margin-top">
+          <%= t("budgets.results.heading") %><br>
+          <span><%= @budget.name %></span>
+        </h2>
       </div>
     </div>
   </div>
@@ -53,9 +56,12 @@
     </ul>
   </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>
-
   <div class="small-12 medium-9 large-10 column">
+    <%= link_to t("budgets.results.show_all_link"), "#",
+                class: "js-toggle-link button hollow margin-bottom float-right-medium",
+                data: {'toggle-selector' => '.js-discarded',
+                       'toggle-text' => t("budgets.results.hide_discarded_link")} %>
+
     <%= render 'results_table', results_type: :compatible,
                                 title: @heading.name,
                                 heading_price: @heading.price,