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

Improve styles for budgets voting phase

Browse Source
This commit is contained in:
Alberto
2020-05-16 06:07:41 +02:00
committed by Javi Martín
parent f79edf6ba4
commit 048ca61207
21 changed files with 212 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/stylesheets/_consul_settings.scss
View File

@@ -17,7 +17,8 @@ $line-height: rem-calc(24);
$tiny-font-size: rem-calc(12);
$brand: #004a83;
$dark: darken($brand, 10%);
$brand-secondary: darken($brand, 10%);
$dark: $brand-secondary;
$text: #222;
$text-medium: #515151;

27
app/assets/stylesheets/budgets/ballot/investment.scss
View File

@@ -1,25 +1,38 @@
.ballot-list li {
background: #f9f9f9;
$side-padding: $line-height / 2;
$close-icon-size: rem-calc(20);
$close-icon-margin: rem-calc(6);
background: #f1f1f1;
border-radius: rem-calc(12);
line-height: $line-height;
margin-bottom: $line-height / 4;
padding: $line-height $line-height / 2;
padding: $line-height $side-padding;
position: relative;
a {
color: $text;
}
span {
.ballot-list-title {
display: block;
font-style: italic;
padding-right: calc(#{$close-icon-size} + #{$close-icon-margin} - #{$side-padding});
}
.ballot-list-price {
color: $budget;
display: block;
font-weight: bold;
margin-top: $line-height / 2;
text-align: right;
}
.remove-budget-investment {
@include has-fa-icon(times, solid);
font-size: rem-calc(20);
font-size: $close-icon-size;
position: absolute;
right: rem-calc(6);
top: rem-calc(6);
right: $close-icon-margin;
top: $close-icon-margin;
&::before {
margin-right: 0;

10
app/assets/stylesheets/budgets/investments/ballot.scss Normal file
View File

@@ -0,0 +1,10 @@
.ballot {
.button-remove-support {
@include has-fa-icon(times, solid);
background: #e7eaec;
color: $brand-secondary;
font-weight: bold;
margin-top: $line-height;
}
}

17
app/assets/stylesheets/budgets/investments/sidebar.scss Normal file
View File

@@ -0,0 +1,17 @@
.my-ballot {
border-top: 1px solid $border;
h2 + * {
@include has-fa-icon(vote-yea, solid);
&::before {
float: left;
font-size: rem-calc(50);
margin-right: rem-calc(10);
}
+ * {
clear: both;
}
}
}

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

@@ -812,6 +812,8 @@
.button-support {
background: $budget;
color: #fff;
font-size: $base-font-size;
font-weight: bold;
&:hover {
background: $budget-hover;
@@ -1168,12 +1170,24 @@
&.budget-heading {
min-height: $line-height * 10;
.check-ballot {
@include has-fa-icon(chevron-right, solid, after);
float: right;
min-width: rem-calc(240);
&::after {
margin-left: $line-height / 4;
margin-right: 0;
}
}
}
h2 {
margin-bottom: 0;
}
h1,
h2,
h3,
.back,
@@ -1218,18 +1232,43 @@
.progress {
background: #212033;
border-radius: rem-calc(12);
clear: both;
margin-bottom: 0;
overflow: hidden;
}
.progress-meter {
background: #fdcb10;
border-radius: 0;
border-radius: rem-calc(12);
border-bottom-right-radius: 0;
border-top-right-radius: 0;
transition: width 2s;
}
.spent-amount-text {
.total-amount,
.amount-available {
font-weight: bold;
margin-bottom: 0;
text-transform: uppercase;
}
.total-amount {
font-size: $tiny-font-size;
@include breakpoint(medium) {
text-align: right;
}
span {
font-size: $base-font-size;
}
}
.amount-available {
display: block;
font-size: $small-font-size;
margin-top: $line-height / 8;
position: relative;
text-align: right;
white-space: nowrap;
@@ -1242,22 +1281,11 @@
line-height: 0;
position: absolute;
right: -0.5em;
top: -$line-height / 8;
}
}
.total-amount {
color: #fff;
font-size: rem-calc(18);
font-weight: bold;
float: right;
}
.amount-available {
display: block;
span {
font-size: rem-calc(24);
font-weight: bold;
}
}
}
@@ -1350,11 +1378,6 @@
background-color: $budget;
transition: height 0.3s;
h2 {
margin-bottom: $line-height / 2;
transition: font-size 0.3s;
}
&.is-fixed {
height: auto;
left: 0;
@@ -1370,6 +1393,14 @@
}
}
}
h2 {
transition: font-size 0.3s;
@include breakpoint(small only) {
margin: $line-height 0;
}
}
}
.budgets-stats {

2
app/components/budgets/ballot/investment_component.html.erb
View File

@@ -1,6 +1,6 @@
<li id="<%= list_item_id %>">
<%= investment_title %>
<span><%= investment.formatted_price %></span>
<%= investment_price %>
<% if budget.balloting? %>
<%= link_to delete_path,

4
app/components/budgets/ballot/investment_component.rb
View File

@@ -19,6 +19,10 @@ class Budgets::Ballot::InvestmentComponent < ApplicationComponent
link_to investment.title, budget_investment_path(budget, investment)
end
def investment_price
tag.span investment.formatted_price, class: "ballot-list-price"
end
def delete_path
budget_ballot_line_path(budget, id: investment.id)
end

2
app/components/budgets/ballot/investment_for_sidebar_component.rb
View File

@@ -14,7 +14,7 @@ class Budgets::Ballot::InvestmentForSidebarComponent < Budgets::Ballot::Investme
end
def investment_title
investment.title
tag.span investment.title, class: "ballot-list-title"
end
def delete_path

9
app/models/budget/ballot.rb
View File

@@ -63,10 +63,11 @@ class Budget
def voting_style
@voting_style ||= voting_style_class.new(self)
end
delegate :amount_available, :amount_available_info, :amount_spent, :amount_spent_info, :amount_limit,
:amount_limit_info, :change_vote_info, :enough_resources?, :formatted_amount_available,
:formatted_amount_limit, :formatted_amount_spent, :not_enough_resources_error,
:percentage_spent, :reason_for_not_being_ballotable, :voted_info,
delegate :amount_available, :amount_available_info, :amount_progress, :amount_spent,
:amount_spent_info, :amount_limit, :amount_limit_info, :change_vote_info,
:enough_resources?, :formatted_amount_available, :formatted_amount_limit,
:formatted_amount_spent, :not_enough_resources_error, :percentage_spent,
:reason_for_not_being_ballotable, :voted_info,
to: :voting_style
private

20
app/models/budget/voting_styles/base.rb
View File

@@ -10,13 +10,25 @@ class Budget::VotingStyles::Base
end
def change_vote_info(link:)
I18n.t("budgets.investments.index.sidebar.change_vote_info.#{name}", link: link)
I18n.t(
"budgets.investments.index.sidebar.change_vote_info.#{name}",
link: link,
phase_end_date: I18n.l(budget.current_phase.ends_at.to_date, format: :long)
)
end
def amount_progress(heading)
I18n.t(
"budgets.ballots.show.amount_progress",
amount_spent: amount_spent_info(heading),
amount_limit: amount_limit_info(heading)
)
end
def voted_info(heading)
I18n.t("budgets.investments.index.sidebar.voted_info.#{name}",
count: investments(heading).count,
amount_spent: ballot.budget.formatted_amount(investments_price(heading)))
amount_spent: budget.formatted_amount(investments_price(heading)))
end
def amount_available_info(heading)
@@ -56,6 +68,10 @@ class Budget::VotingStyles::Base
private
def budget
ballot.budget
end
def investments(heading)
ballot.investments.by_heading(heading.id)
end

10
app/views/budgets/ballot/_progress_bar.html.erb
View File

@@ -1,6 +1,6 @@
<span class="total-amount">
<%= sanitize(ballot.amount_limit_info(heading)) %>
</span>
<p id="total_amount" class="total-amount">
<%= sanitize(ballot.amount_progress(heading)) %>
</p>
<div class="progress" role="progressbar" tabindex="0"
aria-valuenow="<%= ballot.percentage_spent(heading) %>" aria-valuemin="0" aria-valuemax="100">
@@ -9,6 +9,6 @@
</div>
</div>
<p id="amount_spent" class="spent-amount-text" style="width: <%= ballot.percentage_spent(heading) %>%">
<%= render "budgets/ballot/progress_bar/#{ballot.budget.voting_style}", ballot: ballot, heading: heading %>
<p id="amount_available" class="amount-available" style="width: <%= ballot.percentage_spent(heading) %>%">
<%= sanitize(ballot.amount_available_info(heading)) %>
</p>

3
app/views/budgets/ballot/progress_bar/_approval.html.erb
View File

@@ -1,3 +0,0 @@
<%= sanitize(t("budgets.progress_bar.votes",
count: ballot.amount_spent(heading),
limit: ballot.amount_limit(heading))) %>

5
app/views/budgets/ballot/progress_bar/_knapsack.html.erb
View File

@@ -1,5 +0,0 @@
<small><%= t("budgets.progress_bar.assigned") %></small><%= ballot.formatted_amount_spent(heading) %>
<span id="amount_available" class="amount-available">
<small><%= t("budgets.progress_bar.available") %></small>
<span><%= ballot.formatted_amount_available(heading) %></span>
</span>

6
app/views/budgets/investments/_ballot.html.erb
View File

@@ -2,7 +2,7 @@
<div class="js-participation supports ballot">
<% if ballot.has_investment?(investment) %>
<div class="remove supported inline-block">
<div class="remove supported">
<span class="icon-check-circle"
title="<%= t("budgets.investments.investment.already_added") %>">
</span>
@@ -14,7 +14,7 @@
budget_ballot_line_path(id: investment.id,
budget_id: investment.budget_id,
investments_ids: investment_ids),
class: "delete small expanded",
class: "button button-remove-support expanded",
method: :delete,
remote: true %>
<% end %>
@@ -31,7 +31,7 @@
budget_ballot_lines_path(investment_id: investment.id,
budget_id: investment.budget_id,
investments_ids: investment_ids),
class: "button button-support small expanded",
class: "button button-support expanded",
title: t("budgets.investments.investment.support_title"),
method: :post,
remote: true %>

4
app/views/budgets/investments/_header.html.erb
View File

@@ -9,7 +9,7 @@
<% if can? :show, @ballot %>
<%= link_to t("budgets.investments.header.check_ballot"),
budget_ballot_path(@budget),
class: "button float-right" %>
class: "check-ballot button" %>
<% end %>
</div>
</div>
@@ -26,7 +26,7 @@
<h2>
<%= t("budgets.investments.index.by_heading", heading: @heading.name) %>
</h2>
<div id="progress_bar" class="no-margin-top">
<div id="progress_bar">
<%= render "budgets/ballot/progress_bar", ballot: @ballot, heading: @heading %>
</div>
</div>

37
app/views/budgets/investments/_sidebar.html.erb
View File

@@ -13,26 +13,7 @@
<% end %>
<% if @heading && can?(:show, @ballot) %>
<p class="callout">
<%= sanitize(@ballot.change_vote_info(
link: link_to(t("budgets.investments.index.sidebar.change_vote_link"),
budget_ballot_path(@budget)))) %>
</p>
<% end %>
<% if @heading && !@heading.content_blocks.where(locale: I18n.locale).empty? %>
<%= render "budgets/investments/content_blocks" %>
<% end %>
<% if @map_location&.available? %>
<%= render "budgets/investments/map" %>
<% end %>
<%= render "shared/tag_cloud", taggable: "Budget::Investment" %>
<%= render "budgets/investments/categories" %>
<% if @heading && can?(:show, @ballot) %>
<div class="sidebar-divider"></div>
<div class="my-ballot">
<h2 class="sidebar-title">
<%= t("budgets.investments.index.sidebar.my_ballot") %>
</h2>
@@ -57,6 +38,12 @@
<p><strong><%= t("budgets.investments.index.sidebar.zero") %></strong></p>
<% end %>
<p>
<%= sanitize(@ballot.change_vote_info(
link: link_to(t("budgets.investments.index.sidebar.change_vote_link"),
budget_ballot_path(@budget)))) %>
</p>
<ul class="ballot-list">
<% if @heading %>
<%= render Budgets::Ballot::InvestmentForSidebarComponent.with_collection(
@@ -69,4 +56,14 @@
<%= link_to t("budgets.investments.header.check_ballot"),
budget_ballot_path(@budget),
class: "button hollow expanded" %>
</div>
<% end %>
<% if @heading && !@heading.content_blocks.where(locale: I18n.locale).empty? %>
<%= render "budgets/investments/content_blocks" %>
<% end %>
<% if @map_location&.available? %>
<%= render "budgets/investments/map" %>
<% end %>
<%= render "shared/tag_cloud", taggable: "Budget::Investment" %>
<%= render "budgets/investments/categories" %>

2
app/views/budgets/investments/index.html.erb
View File

@@ -94,7 +94,7 @@
<div class="small-12 medium-3 column">
<aside class="margin-bottom">
<div id="sidebar">
<div id="sidebar" class="budget-investments-sidebar">
<%= render "/budgets/investments/sidebar" %>
</div>
</aside>

20
config/locales/en/budgets.yml
View File

@@ -3,8 +3,9 @@ en:
ballots:
show:
title: Your ballot
amount_progress: "%{amount_spent} / %{amount_limit}"
amount_available:
knapsack: "You still have <span>%{count}</span> to invest."
knapsack: "Still available to you <span>%{count}</span>"
approval:
zero: "You can still cast <span>%{count}</span> votes."
one: "You can still cast <span>%{count}</span> vote."
@@ -16,7 +17,7 @@ en:
one: "Votes cast: <span>%{count}</span>"
other: "Votes cast: <span>%{count}</span>"
amount_limit:
knapsack: "%{count}"
knapsack: "Total budget <span>%{count}</span>"
approval:
one: "You can vote <span>1</span> project"
other: "You can vote up to <span>%{count}</span> projects"
@@ -107,12 +108,12 @@ en:
one: "<strong>You voted one proposal</strong>"
other: "<strong>You voted %{count} proposals</strong>"
change_vote_info:
knapsack: "You can %{link} at any time until the close of this phase. No need to spend all the money available."
approval: "You can %{link} at any time until the close of this phase."
knapsack: "You can %{link} at any time until %{phase_end_date}. No need to spend all the money available."
approval: "You can %{link} at any time until %{phase_end_date}."
change_vote_link: "change your vote"
different_heading_assigned: "You have active votes in another heading: %{heading_link}"
change_ballot: "If your change your mind you can remove your votes in %{check_ballot} and start again."
check_ballot_link: "check and confirm my ballot"
check_ballot_link: "submit my ballot"
zero: You have not voted any investment project in this group.
verified_only: "To create a new budget investment %{verify}."
create: "Create a budget investment"
@@ -169,14 +170,7 @@ en:
different_heading_assigned: "You have active votes in another heading: %{heading_link}"
change_ballot: "If your change your mind you can remove your votes in %{check_ballot} and start again."
check_ballot_link: "submit my ballot"
price: "This heading has a budget of"
progress_bar:
assigned: "You have assigned: "
available: "Available budget: "
votes:
zero: "You have selected <strong>0</strong> projects out of <strong>%{limit}</strong>"
one: "You have selected <strong>1</strong> project out of <strong>%{limit}</strong>"
other: "You have selected <strong>%{count}</strong> projects out of <strong>%{limit}</strong>"
price: "Total budget"
show:
see_results: See results
results:

20
config/locales/es/budgets.yml
View File

@@ -3,20 +3,21 @@ es:
ballots:
show:
title: Mis votos
amount_progress: "%{amount_spent} / %{amount_limit}"
amount_available:
knapsack: "Te quedan <span>%{count}</span> para invertir"
knapsack: "Todavía disponible <span>%{count}</span>"
approval:
zero: "Te quedan <span>%{count}</span> votos disponibles"
one: "Te queda <span>%{count}</span> voto disponible"
other: "Te quedan <span>%{count}</span> votos disponibles"
amount_spent:
knapsack: "Coste total <span>%{count}</span>"
knapsack: "Has asignado <span>%{count}</span>"
approval:
zero: "Votos: <span>%{count}</span>"
one: "Votos: <span>%{count}</span>"
other: "Votos: <span>%{count}</span>"
amount_limit:
knapsack: "%{count}"
knapsack: "Presupuesto total <span>%{count}</span>"
approval:
one: "Puedes votar <span>1</span> proyecto"
other: "Puedes votar hasta <span>%{count}</span> proyectos"
@@ -107,8 +108,8 @@ es:
one: "<strong>Has votado un proyecto</strong>"
other: "<strong>Has votado %{count} proyectos</strong>"
change_vote_info:
knapsack: "Puedes %{link} en cualquier momento hasta el cierre de esta fase. No hace falta que gastes todo el dinero disponible."
approval: "Puedes %{link} en cualquier momento hasta el cierre de esta fase."
knapsack: "Puedes %{link} en cualquier momento hasta el %{phase_end_date}. No hace falta que gastes todo el dinero disponible."
approval: "Puedes %{link} en cualquier momento hasta el %{phase_end_date}."
change_vote_link: "cambiar tus votos"
different_heading_assigned: "Ya apoyaste proyectos de otra sección del presupuesto: %{heading_link}"
change_ballot: "Si cambias de opinión puedes borrar tus votos en %{check_ballot} y volver a empezar."
@@ -169,14 +170,7 @@ es:
different_heading_assigned: "Ya apoyaste proyectos de otra sección del presupuesto: %{heading_link}"
change_ballot: "Si cambias de opinión puedes borrar tus votos en %{check_ballot} y volver a empezar."
check_ballot_link: "revisar y confirmar mis votos"
price: "Esta partida tiene un presupuesto de"
progress_bar:
assigned: "Has asignado: "
available: "Presupuesto disponible: "
votes:
zero: "Has seleccionado <strong>0</strong> proyectos de <strong>%{limit}</strong>"
one: "Has seleccionado <strong>1</strong> proyecto de <strong>%{limit}</strong>"
other: "Has seleccionado <strong>%{count}</strong> proyectos de <strong>%{limit}</strong>"
price: "Presupuesto total"
show:
see_results: Ver resultados
results:

28
spec/system/budgets/ballots_spec.rb
View File

@@ -125,7 +125,7 @@ describe "Ballots" do
visit budget_investments_path(budget, heading_id: new_york)
add_to_ballot("Bring back King Kong")
expect(page).to have_css("#amount_spent", text: "€10,000")
expect(page).to have_css("#total_amount", text: "€10,000")
expect(page).to have_css("#amount_available", text: "€990,000")
within("#sidebar") do
@@ -136,7 +136,7 @@ describe "Ballots" do
add_to_ballot("Paint cabs black")
expect(page).to have_css("#amount_spent", text: "€30,000")
expect(page).to have_css("#total_amount", text: "€30,000")
expect(page).to have_css("#amount_available", text: "€970,000")
within("#sidebar") do
@@ -152,7 +152,7 @@ describe "Ballots" do
visit budget_investments_path(budget, heading_id: new_york)
expect(page).to have_content investment.title
expect(page).to have_css("#amount_spent", text: "€10,000")
expect(page).to have_css("#total_amount", text: "€10,000")
expect(page).to have_css("#amount_available", text: "€990,000")
within("#sidebar") do
@@ -165,7 +165,7 @@ describe "Ballots" do
find(".remove a").click
end
expect(page).to have_css("#amount_spent", text: "€0")
expect(page).to have_css("#total_amount", text: "€0")
expect(page).to have_css("#amount_available", text: "€1,000,000")
within("#sidebar") do
@@ -217,7 +217,7 @@ describe "Ballots" do
add_to_ballot("Cheap")
expect(page).to have_css("#amount_spent", text: "€10,000")
expect(page).to have_css("#total_amount", text: "€10,000")
expect(page).to have_css("#amount_available", text: "€9,990,000")
within("#sidebar") do
@@ -227,12 +227,12 @@ describe "Ballots" do
visit budget_investments_path(budget, heading_id: district_heading1)
expect(page).to have_css("#amount_spent", text: "€0")
expect(page).to have_css("#total_amount", text: "€0")
expect(page).to have_css("#amount_available", text: "€1,000,000")
add_to_ballot("Average")
expect(page).to have_css("#amount_spent", text: "€20,000")
expect(page).to have_css("#total_amount", text: "€20,000")
expect(page).to have_css("#amount_available", text: "€980,000")
within("#sidebar") do
@@ -245,7 +245,7 @@ describe "Ballots" do
visit budget_investments_path(budget, heading_id: city_heading)
expect(page).to have_css("#amount_spent", text: "€10,000")
expect(page).to have_css("#total_amount", text: "€10,000")
expect(page).to have_css("#amount_available", text: "€9,990,000")
within("#sidebar") do
@@ -270,7 +270,7 @@ describe "Ballots" do
add_to_ballot("Park expansion")
within("#progress_bar") do
expect(page).to have_css("#amount_spent", text: "€10,000")
expect(page).to have_css("#total_amount", text: "€10,000")
end
end
end
@@ -323,7 +323,7 @@ describe "Ballots" do
end
end
context "Showing the ballot" do
context "Showing the ballot", :js do
scenario "Displaying the correct group, heading, count & amount" do
group1 = create(:budget_group, budget: budget)
group2 = create(:budget_group, budget: budget)
@@ -350,13 +350,13 @@ describe "Ballots" do
within("#budget_group_#{group1.id}") do
expect(page).to have_content "#{group1.name} - #{heading1.name}"
expect(page).to have_content "Amount spent €20"
expect(page).to have_link "You still have €80 to invest.", href: budget_group_path(budget, group1)
expect(page).to have_link "Still available to you €80", href: budget_group_path(budget, group1)
end
within("#budget_group_#{group2.id}") do
expect(page).to have_content "#{group2.name} - #{heading2.name}"
expect(page).to have_content "Amount spent €15"
expect(page).to have_content "You still have €35 to invest"
expect(page).to have_content "Still available to you €35"
end
end
@@ -395,7 +395,7 @@ describe "Ballots" do
login_as(user)
visit budget_investments_path(budget, heading_id: new_york.id)
expect(page).to have_css("#amount_spent", text: "€30,000")
expect(page).to have_css("#total_amount", text: "€30,000")
expect(page).to have_css("#amount_available", text: "€970,000")
within("#sidebar") do
@@ -410,7 +410,7 @@ describe "Ballots" do
click_link "Remove vote"
end
expect(page).to have_css("#amount_spent", text: "€20,000")
expect(page).to have_css("#total_amount", text: "€20,000")
expect(page).to have_css("#amount_available", text: "€980,000")
within("#sidebar") do

2
spec/system/budgets/votes_spec.rb
View File

@@ -211,7 +211,7 @@ describe "Votes" do
add_to_ballot(investment1.title)
expect(page).to have_content("Remove vote")
expect(page).to have_content("You have selected 1 project out of 2")
expect(page).to have_content("YOU CAN STILL CAST 1 VOTE")
within(".budget-investment", text: investment2.title) do
find("div.ballot").hover