adds styles to budgets homepage

This commit is contained in:
decabeza
2018-01-17 20:08:02 +01:00
committed by Bertocq
parent 7cbb1dd3a7
commit 9cfd60afc2
2 changed files with 148 additions and 95 deletions

View File

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

View File

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