consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix huge header in participatory budgets

Browse Source 
The budget header was supposed to be huge, but only in the participatory
budgets index or show actions. It was still huge, with plenty of empty
space, when there was no budget, or in the "submit my ballot" and
"select a heading" pages.
This commit is contained in:
Javi Martín
2021-08-06 23:52:35 +02:00
parent 297956b579
commit 3cd2529791
9 changed files with 118 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/stylesheets/budgets/ballot/show.scss Normal file
View File

@@ -0,0 +1,8 @@
.budget-ballot-show {
> header {
@extend %budget-header;
@include grid-column-gutter;
padding-bottom: $line-height;
}
}

7
app/assets/stylesheets/budgets/groups/show.scss Normal file
View File

@@ -0,0 +1,7 @@
.budget-group-show {
> header {
@extend %budget-header;
@include grid-column-gutter;
}
}

8
app/assets/stylesheets/budgets/index.scss Normal file
View File

@@ -0,0 +1,8 @@
.budgets-index {
> header {
@extend %budget-header;
@include grid-column-gutter;
margin-bottom: $line-height;
}
}

2
app/assets/stylesheets/mixins/budgets.scss
View File

@@ -7,7 +7,7 @@
h1 { h1 {
font-size: rem-calc(60); font-size: rem-calc(60);
padding: $line-height * 2 0 $line-height; padding: $line-height 0;
} }
h1, h1,

4
app/assets/stylesheets/participation.scss
View File

@@ -1108,6 +1108,10 @@
background-size: cover; background-size: cover;
} }
h1 {
padding-top: $line-height * 2;
}
.budget-title { .budget-title {
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;

26
app/views/budgets/ballot/_ballot.html.erb
View File

@@ -1,20 +1,18 @@
<div class="budget-header"> <header>
<div class="row"> <%= back_link_to session[:ballot_referer] %>
<%= back_link_to session[:ballot_referer] %>
<h1 class="text-center"><%= t("budgets.ballots.show.title") %></h1> <h1 class="text-center"><%= t("budgets.ballots.show.title") %></h1>
<div class="small-12 medium-8 column small-centered text-center"> <div class="small-12 medium-8 column small-centered text-center">
<h2> <h2>
<%= sanitize(t("budgets.ballots.show.voted", count: @ballot.investments.count)) %> <%= sanitize(t("budgets.ballots.show.voted", count: @ballot.investments.count)) %>
</h2> </h2>
<p class="confirmed"> <p class="confirmed">
<%= t("budgets.ballots.show.voted_info") %> <%= t("budgets.ballots.show.voted_info") %>
<p> <p>
<p><%= t("budgets.ballots.show.voted_info_2") %></p> <p><%= t("budgets.ballots.show.voted_info_2") %></p>
</div>
</div> </div>
</div> </header>
<div class="row ballot"> <div class="row ballot">
<% ballot_groups = @ballot.groups.sort_by_name %> <% ballot_groups = @ballot.groups.sort_by_name %>

4
app/views/budgets/ballot/show.html.erb
View File

@@ -1,3 +1,3 @@
<div id="ballot"> <main id="ballot" class="budget-ballot-show">
<%= render "budgets/ballot/ballot" %> <%= render "budgets/ballot/ballot" %>
</div> </main>

118
app/views/budgets/groups/show.html.erb
View File

@@ -2,72 +2,70 @@
<%= render "shared/canonical", href: budget_group_url(filter: @current_filter) %> <%= render "shared/canonical", href: budget_group_url(filter: @current_filter) %>
<% end %> <% end %>
<div class="budget-header"> <main class="budget-group-show">
<div class="row"> <header>
<div class="small-12 medium-9 column"> <%= back_link_to budget_path(@budget) %>
<%= back_link_to budget_path(@budget) %> <h1><%= t("budgets.groups.show.title") %></h1>
<h2><%= t("budgets.groups.show.title") %></h2> </header>
</div>
</div>
</div>
<% if @current_filter == "unfeasible" %> <% if @current_filter == "unfeasible" %>
<div class="row margin-top"> <div class="row margin-top">
<div class="small-12 column"> <div class="small-12 column">
<h3><%= t("budgets.groups.show.unfeasible_title") %></h3> <h3><%= t("budgets.groups.show.unfeasible_title") %></h3>
</div>
</div> </div>
</div> <% elsif @current_filter == "unselected" %>
<% elsif @current_filter == "unselected" %> <div class="row margin-top">
<div class="row margin-top"> <div class="small-12 column">
<div class="small-12 column"> <h3><%= t("budgets.groups.show.unselected_title") %></h3>
<h3><%= t("budgets.groups.show.unselected_title") %></h3> </div>
</div> </div>
</div> <% end %>
<% end %>
<div class="row margin"> <div class="row margin">
<div id="headings" class="small-12 medium-7 column select-district"> <div id="headings" class="small-12 medium-7 column select-district">
<div class="row"> <div class="row">
<% @group.headings.sort_by_name.each_slice(7) do |slice| %> <% @group.headings.sort_by_name.each_slice(7) do |slice| %>
<div class="small-6 medium-4 column end"> <div class="small-6 medium-4 column end">
<% slice.each do |heading| %> <% slice.each do |heading| %>
<span id="<%= dom_id(heading) %>" <span id="<%= dom_id(heading) %>"
class="<%= css_for_ballot_heading(heading) %>"> class="<%= css_for_ballot_heading(heading) %>">
<%= link_to heading.name, <%= link_to heading.name,
budget_investments_path(heading_id: heading.id, budget_investments_path(heading_id: heading.id,
filter: @current_filter) %><br> filter: @current_filter) %><br>
</span> </span>
<% end %> <% end %>
</div>
<% end %>
</div>
</div>
<div class="medium-5 column show-for-medium text-center">
<%= image_tag(image_path_for("map.jpg")) %>
</div>
</div>
<% if @budget.balloting_or_later? %>
<% unless @current_filter == "unfeasible" %>
<div class="row">
<div class="small-12 column">
<small>
<%= link_to t("budgets.groups.show.unfeasible"),
budget_group_path(@budget, @group, filter: "unfeasible") %>
</small>
</div> </div>
<% end %>
</div>
</div>
<div class="medium-5 column show-for-medium text-center">
<%= image_tag(image_path_for("map.jpg")) %>
</div>
</div>
<% if @budget.balloting_or_later? %>
<% unless @current_filter == "unfeasible" %>
<div class="row">
<div class="small-12 column">
<small>
<%= link_to t("budgets.groups.show.unfeasible"),
budget_group_path(@budget, @group, filter: "unfeasible") %>
</small>
</div> </div>
</div> <% end %>
<% end %>
<% unless @current_filter == "unselected" %> <% unless @current_filter == "unselected" %>
<div class="row"> <div class="row">
<div class="small-12 column"> <div class="small-12 column">
<small> <small>
<%= link_to t("budgets.groups.show.unselected"), <%= link_to t("budgets.groups.show.unselected"),
budget_group_path(@budget, @group, filter: "unselected") %> budget_group_path(@budget, @group, filter: "unselected") %>
</small> </small>
</div>
</div> </div>
</div> <% end %>
<% end %> <% end %>
<% end %> </main>

38
app/views/budgets/index.html.erb
View File

@@ -6,28 +6,26 @@
<%= render "shared/canonical", href: budgets_url %> <%= render "shared/canonical", href: budgets_url %>
<% end %> <% end %>
<% if @budget.present? %> <main class="budgets-index">
<%= render Budgets::BudgetComponent.new(@budget) %> <% if @budget.present? %>
<%= render Budgets::BudgetComponent.new(@budget) %>
<% if @finished_budgets.present? %>
<%= render "finished", budgets: @finished_budgets %>
<% end %>
<% else %>
<header>
<h1><%= t("budgets.index.title") %></h1>
</header>
<% if @finished_budgets.present? %>
<%= render "finished", budgets: @finished_budgets %>
<% end %>
<% else %>
<div class="budget-header margin-bottom">
<div class="row"> <div class="row">
<div class="small-12 medium-9 column"> <div class="small-12 column">
<h1><%= t("budgets.index.title") %></h1> <div class="callout primary">
<%= t("budgets.index.empty_budgets") %>
</div>
</div> </div>
</div> </div>
</div> <% end %>
<div class="row"> <%= render Budgets::FooterComponent.new %>
<div class="small-12 column"> </main>
<div class="callout primary">
<%= t("budgets.index.empty_budgets") %>
</div>
</div>
</div>
<% end %>
<%= render Budgets::FooterComponent.new %>