diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 7367b9c736cf..e54571867889 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -202,6 +202,30 @@ } } +.supported { + + .button { + + &.button-remove-support { + background: #e7eaec; + color: $brand; + font-weight: bold; + margin-top: $line-height; + padding-left: rem-calc(30); + position: relative; + + &::before { + content: "\f00d"; + font-family: "Font Awesome 5 Free"; + font-size: $base-font-size; + left: 30px; + position: absolute; + top: 14px; + } + } + } +} + .supports-container { border-top: 1px solid $border; @@ -1020,6 +1044,8 @@ .button-support { background: $budget; color: #fff; + font-size: $base-font-size; + font-weight: bold; &:hover { background: $budget-hover; @@ -1451,12 +1477,26 @@ &.budget-heading { min-height: $line-height * 10; + + .button { + min-width: rem-calc(240); + position: relative; + + &::after { + content: "\f054"; + font-family: "Font Awesome 5 Free"; + font-weight: bold; + position: absolute; + right: 24px; + } + } } h2 { margin-bottom: 0; } + h1, h2, h3, .back, @@ -1805,13 +1845,20 @@ .progress { background: #212033; + border-radius: rem-calc(12); clear: both; margin-bottom: 0; } + .progress-bar-indicator { + 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; } @@ -1836,11 +1883,17 @@ color: #fff; font-size: rem-calc(18); font-weight: bold; - float: right; + text-transform: uppercase; + + @include breakpoint(medium) { + float: right; + } } .amount-available { display: block; + text-align: right; + text-transform: uppercase; span { font-size: rem-calc(24); @@ -1896,12 +1949,19 @@ } } +.my-ballot { + float: left; + font-size: rem-calc(40); + margin-right: 12px; +} + .ballot-list { list-style: none; margin-left: 0; li { - background: #f9f9f9; + background: #f1f1f1; + border-radius: rem-calc(12); line-height: $line-height; margin-bottom: $line-height / 4; padding: $line-height $line-height / 2; @@ -1911,27 +1971,32 @@ color: $text; } - span { + .ballot-list-title { display: block; - font-style: italic; + max-width: 90%; + } + + .ballot-list-price { + color: $budget; + display: block; + font-weight: bold; + margin-top: $line-height; + text-align: right; } .remove-investment-project { display: block; height: 0; - .icon-x { - color: #9f9f9f; - font-size: rem-calc(24); + .fa-times { + color: $text; + font-size: rem-calc(20); + font-weight: bold; line-height: $line-height / 2; position: absolute; - right: 6px; + right: 12px; text-decoration: none; - top: 6px; - - @include breakpoint(medium) { - font-size: $base-font-size; - } + top: 12px; } } @@ -1946,13 +2011,21 @@ text-decoration: none; } - .remove-investment-project .icon-x { + .remove-investment-project .fa-times { color: #fff; } } } } +.progress-bar-nav { + + h2 { + margin-bottom: $line-height * 2; + margin-top: $line-height; + } +} + .progress-bar-nav { position: relative; z-index: 3; @@ -1963,6 +2036,7 @@ h2 { margin-bottom: $line-height / 2; + margin-top: 0; transition: font-size 0.3s; } diff --git a/app/views/budgets/ballot/_ballot.html.erb b/app/views/budgets/ballot/_ballot.html.erb index e8e79300f104..e577c6995292 100644 --- a/app/views/budgets/ballot/_ballot.html.erb +++ b/app/views/budgets/ballot/_ballot.html.erb @@ -1,4 +1,4 @@ -
+
<%= back_link_to @ballot_referer %> diff --git a/app/views/budgets/ballot/_investment.html.erb b/app/views/budgets/ballot/_investment.html.erb index 42fc8b44f87a..efff71c604bb 100644 --- a/app/views/budgets/ballot/_investment.html.erb +++ b/app/views/budgets/ballot/_investment.html.erb @@ -8,7 +8,7 @@ class: "remove-investment-project", method: :delete, remote: true do %> - + <% end %> <% end %> diff --git a/app/views/budgets/ballot/_investment_for_sidebar.html.erb b/app/views/budgets/ballot/_investment_for_sidebar.html.erb index a0c268a354c2..2307874e4bb0 100644 --- a/app/views/budgets/ballot/_investment_for_sidebar.html.erb +++ b/app/views/budgets/ballot/_investment_for_sidebar.html.erb @@ -1,6 +1,6 @@
  • - <%= investment.title %> - <%= investment.formatted_price %> + <%= investment.title %> + <%= investment.formatted_price %> <% if @budget.balloting? %> <%= link_to budget_ballot_line_path(id: investment.id, @@ -10,7 +10,7 @@ method: :delete, remote: true do %> <%= t("budgets.ballots.show.remove") %> - + "> <% end %> <% end %>
  • diff --git a/app/views/budgets/ballot/_progress_bar.html.erb b/app/views/budgets/ballot/_progress_bar.html.erb index 8a41ef59b59c..21b044424cd1 100644 --- a/app/views/budgets/ballot/_progress_bar.html.erb +++ b/app/views/budgets/ballot/_progress_bar.html.erb @@ -1,14 +1,21 @@ - <%= sanitize(ballot.amount_limit_info(heading)) %> + <% if budget.approval_voting? %> + <%= sanitize(ballot.amount_limit_info(heading)) %> + <% else %> + <%= t("budgets.progress_bar.assigned") %> + <%= @ballot.formatted_amount_spent(@heading) %> / + <%= t("budgets.investments.header.price") %> <%= @budget.formatted_heading_price(@heading) %> + <% end %> -
    -

    +

    <%= render "budgets/ballot/progress_bar/#{ballot.budget.voting_style}", ballot: ballot, heading: heading %>

    diff --git a/app/views/budgets/ballot/progress_bar/_knapsack.html.erb b/app/views/budgets/ballot/progress_bar/_knapsack.html.erb index b46d6d6def21..1fe58c56ea71 100644 --- a/app/views/budgets/ballot/progress_bar/_knapsack.html.erb +++ b/app/views/budgets/ballot/progress_bar/_knapsack.html.erb @@ -1,5 +1,4 @@ -<%= t("budgets.progress_bar.assigned") %><%= ballot.formatted_amount_spent(heading) %> - + <%= t("budgets.progress_bar.available") %> <%= ballot.formatted_amount_available(heading) %> diff --git a/app/views/budgets/investments/_ballot.html.erb b/app/views/budgets/investments/_ballot.html.erb index fb712b4235a7..7a4ea50d459b 100644 --- a/app/views/budgets/investments/_ballot.html.erb +++ b/app/views/budgets/investments/_ballot.html.erb @@ -2,7 +2,7 @@
    <% if ballot.has_investment?(investment) %> -
    +
    "> @@ -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 %> diff --git a/app/views/budgets/investments/_sidebar.html.erb b/app/views/budgets/investments/_sidebar.html.erb index f33abf8b733a..09196d0b262f 100644 --- a/app/views/budgets/investments/_sidebar.html.erb +++ b/app/views/budgets/investments/_sidebar.html.erb @@ -36,6 +36,10 @@ +
    +
    + +
    <% if @ballot.investments.by_heading(@heading.id).count > 0 %>

    @@ -57,6 +61,12 @@

    <%= t("budgets.investments.index.sidebar.zero") %>

    <% end %> +

    + <%= sanitize(t("budgets.investments.index.sidebar.voted_info", + link: link_to(t("budgets.investments.index.sidebar.voted_info_link"), budget_ballot_path(@budget)), + phase_end_date: l(@budget.current_phase.ends_at.to_date, format: :long))) %> +

    +
      <% if @heading %> <% @ballot.investments.by_heading(@heading.id).each do |investment| %> diff --git a/config/locales/en/budgets.yml b/config/locales/en/budgets.yml index 19b5f47a9a98..d3038220bb56 100644 --- a/config/locales/en/budgets.yml +++ b/config/locales/en/budgets.yml @@ -121,9 +121,11 @@ en: 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." change_vote_link: "change your vote" + voted_info: "%{link} at any time until the %{phase_end_date}. No need to spend all the money available." + voted_info_link: "Change your votes" 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" @@ -183,18 +185,18 @@ en: zero: No supports give_support: Support header: - check_ballot: Check and confirm my ballot + check_ballot: "Submit my ballot" 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" - price: "This heading has a budget of" + check_ballot_link: "submit my ballot" + price: "Total budget" progress_bar: - assigned: "You have assigned: " - available: "Available budget: " votes: zero: "You have selected 0 projects out of %{limit}" one: "You have selected 1 project out of %{limit}" other: "You have selected %{count} projects out of %{limit}" + assigned: "Used" + available: "Still available to you" show: phase: Actual phase see_results: See results diff --git a/config/locales/es/budgets.yml b/config/locales/es/budgets.yml index 0c292e8296e6..a99c910f6ca9 100644 --- a/config/locales/es/budgets.yml +++ b/config/locales/es/budgets.yml @@ -121,6 +121,8 @@ es: 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." change_vote_link: "cambiar tus votos" + voted_info: "%{link} en cualquier momento hasta el %{phase_end_date}. No hace falta que gastes todo el dinero disponible." + voted_info_link: "Cambia 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." check_ballot_link: "revisar y confirmar mis votos" @@ -187,14 +189,14 @@ 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" + price: "Presupuesto total" progress_bar: - assigned: "Has asignado: " - available: "Presupuesto disponible: " votes: zero: "Has seleccionado 0 proyectos de %{limit}" one: "Has seleccionado 1 proyecto de %{limit}" other: "Has seleccionado %{count} proyectos de %{limit}" + assigned: "Usado" + available: "Todavía disponible" show: phase: Fase actual see_results: Ver resultados diff --git a/spec/system/budgets/ballots_spec.rb b/spec/system/budgets/ballots_spec.rb index a8a638eb381d..a47347298f95 100644 --- a/spec/system/budgets/ballots_spec.rb +++ b/spec/system/budgets/ballots_spec.rb @@ -136,24 +136,24 @@ add_to_ballot("Bring back King Kong") - expect(page).to have_css("#amount-spent", text: "€10,000") - expect(page).to have_css("#amount-available", text: "€990,000") + expect(page).to have_css("#amount_spent", text: "€10,000") + expect(page).to have_css("#amount_available", text: "€990,000") within("#sidebar") do expect(page).to have_content "Bring back King Kong" expect(page).to have_content "€10,000" - expect(page).to have_link("Check and confirm my ballot") + expect(page).to have_link("Submit my ballot") end add_to_ballot("Paint cabs black") - expect(page).to have_css("#amount-spent", text: "€30,000") - expect(page).to have_css("#amount-available", text: "€970,000") + expect(page).to have_css("#amount_spent", text: "€30,000") + expect(page).to have_css("#amount_available", text: "€970,000") within("#sidebar") do expect(page).to have_content "Paint cabs black" expect(page).to have_content "€20,000" - expect(page).to have_link("Check and confirm my ballot") + expect(page).to have_link("Submit my ballot") end end @@ -165,26 +165,26 @@ click_link "New York €1,000,000" expect(page).to have_content investment.title - expect(page).to have_css("#amount-spent", text: "€10,000") - expect(page).to have_css("#amount-available", text: "€990,000") + expect(page).to have_css("#amount_spent", text: "€10,000") + expect(page).to have_css("#amount_available", text: "€990,000") within("#sidebar") do expect(page).to have_content investment.title expect(page).to have_content "€10,000" - expect(page).to have_link("Check and confirm my ballot") + expect(page).to have_link("Submit my ballot") end within("#budget_investment_#{investment.id}") do find(".remove a").click end - expect(page).to have_css("#amount-spent", text: "€0") - expect(page).to have_css("#amount-available", text: "€1,000,000") + expect(page).to have_css("#amount_spent", text: "€0") + expect(page).to have_css("#amount_available", text: "€1,000,000") within("#sidebar") do expect(page).not_to have_content investment.title expect(page).not_to have_content "€10,000" - expect(page).to have_link("Check and confirm my ballot") + expect(page).to have_link("Submit my ballot") end end @@ -234,8 +234,8 @@ add_to_ballot("Cheap") - expect(page).to have_css("#amount-spent", text: "€10,000") - expect(page).to have_css("#amount-available", text: "€9,990,000") + expect(page).to have_css("#amount_spent", text: "€10,000") + expect(page).to have_css("#amount_available", text: "€9,990,000") within("#sidebar") do expect(page).to have_content "Cheap" @@ -246,13 +246,13 @@ click_link "See all investments" click_link "District 1 €1,000,000" - expect(page).to have_css("#amount-spent", text: "€0") - expect(page).to have_css("#amount-spent", text: "€1,000,000") + expect(page).to have_css("#amount_spent", 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("#amount-available", text: "€980,000") + expect(page).to have_css("#amount_spent", text: "€20,000") + expect(page).to have_css("#amount_available", text: "€980,000") within("#sidebar") do expect(page).to have_content "Average" @@ -266,8 +266,8 @@ click_link "See all investments" click_link "All city €10,000,000" - expect(page).to have_css("#amount-spent", text: "€10,000") - expect(page).to have_css("#amount-available", text: "€9,990,000") + expect(page).to have_css("#amount_spent", text: "€10,000") + expect(page).to have_css("#amount_available", text: "€9,990,000") within("#sidebar") do expect(page).to have_content "Cheap" @@ -293,7 +293,7 @@ add_to_ballot("Park expansion") within("#progress_bar") do - expect(page).to have_css("#amount-spent", text: "€10,000") + expect(page).to have_css("#amount_spent", text: "€10,000") end end end @@ -406,7 +406,7 @@ expect(page).to have_content("You have voted one investment") within("#budget_investment_#{investment.id}") do - find(".icon-x").click + find(".fas.fa-times").click end expect(page).to have_current_path(budget_ballot_path(budget)) @@ -421,8 +421,8 @@ 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("#amount-available", text: "€970,000") + expect(page).to have_css("#amount_spent", text: "€30,000") + expect(page).to have_css("#amount_available", text: "€970,000") within("#sidebar") do expect(page).to have_content investment1.title @@ -433,11 +433,11 @@ end within("#sidebar #budget_investment_#{investment1.id}_sidebar") do - find(".icon-x").click + find(".fas.fa-times").click end - expect(page).to have_css("#amount-spent", text: "€20,000") - expect(page).to have_css("#amount-available", text: "€980,000") + expect(page).to have_css("#amount_spent", text: "€20,000") + expect(page).to have_css("#amount_available", text: "€980,000") within("#sidebar") do expect(page).not_to have_content investment1.title @@ -456,13 +456,13 @@ add_to_ballot("Sully monument") within(".budget-heading") do - click_link "Check and confirm my ballot" + click_link "Submit my ballot" end expect(page).to have_content("You have voted one investment") within(".ballot-list li", text: "Sully monument") do - find(".icon-x").click + find(".fas.fa-times").click end expect(page).to have_content("You have voted 0 investments") @@ -640,7 +640,7 @@ end within("#budget_investment_#{bi1.id}_sidebar") do - find(".icon-x").click + find(".fas.fa-times").click end expect(page).not_to have_css "#budget_investment_#{bi1.id}_sidebar" diff --git a/spec/system/budgets/investments_spec.rb b/spec/system/budgets/investments_spec.rb index b87e568e6967..7e6d4ae74b28 100644 --- a/spec/system/budgets/investments_spec.rb +++ b/spec/system/budgets/investments_spec.rb @@ -1046,12 +1046,12 @@ def investments_order visit budget_investments_path(budget, heading_id: heading.id) - expect(page).not_to have_link("Check and confirm my ballot") + expect(page).not_to have_link("Submit my ballot") expect(page).not_to have_css("#progress_bar") within("#sidebar") do expect(page).not_to have_content("My ballot") - expect(page).not_to have_link("Check and confirm my ballot") + expect(page).not_to have_link("Submit my ballot") end end @@ -1687,12 +1687,12 @@ def investments_order visit budget_investments_path(budget, heading_id: heading.id) - expect(page).to have_link("Check and confirm my ballot") + expect(page).to have_link("Submit my ballot") expect(page).to have_css("#progress_bar") within("#sidebar") do expect(page).to have_content("My ballot") - expect(page).to have_link("Check and confirm my ballot") + expect(page).to have_link("Submit my ballot") end end