diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss index 82cd6c304..6796c9ba7 100644 --- a/app/assets/stylesheets/budgets/phases.scss +++ b/app/assets/stylesheets/budgets/phases.scss @@ -1,56 +1,187 @@ .budget-phases { - border-left: 3px solid $budget; - margin-left: $line-height / 2; - padding: $line-height $line-height / 2; + background: $light; + border-top: 2px solid $border; + padding-bottom: $line-height * 2; - h3, - span, - p { - padding: 0 $line-height / 4; + > * { + @include grid-column-gutter; + @include grid-row; } - h3 { - margin-bottom: 0; + h2 { + font-size: $base-font-size; + text-align: center; } - span { - color: $text-medium; + .phases-list { + counter-reset: phases; + display: flex; + flex-wrap: wrap; + + .phase-name::before { + content: counter(phases); + counter-increment: phases; + display: block; + font-size: rem-calc(36); + font-weight: bold; + margin-bottom: $line-height / 2; + } + } + + .phase-title { + @include tabs-title; + margin: $line-height / 6; + margin-left: 0; + position: relative; + text-align: center; + + @supports(clip-path: polygon(0 0, 50% 50%, 0% 100%)) { + $triangle-width: 1em; + $item-margin: rem-calc(3); + + margin-left: calc(-1 * (#{$triangle-width} - #{$item-margin})); + margin-right: 0; + transform: translateX(calc(#{$triangle-width} - #{$item-margin})); + + &, + a { + clip-path: polygon(calc(100% - #{$triangle-width}) 0, 100% 50%, calc(100% - #{$triangle-width}) 100%, 0 100%, #{$triangle-width} 50%, 0 0); + } + + &:first-child { + &, + a { + clip-path: polygon(calc(100% - #{$triangle-width}) 0, 100% 50%, calc(100% - #{$triangle-width}) 100%, 0 100%, 0 0); + } + + a { + border-bottom-left-radius: rem-calc(6); + border-top-left-radius: rem-calc(6); + } + } + + &:last-child { + &, + a { + clip-path: polygon(100% 0, 100% 100%, 0 100%, #{$triangle-width} 50%, 0 0); + } + + a { + border-bottom-right-radius: rem-calc(6); + border-top-right-radius: rem-calc(6); + } + } + } + + a { + background: $white; + color: $black; + height: 100%; + padding: $line-height $line-height * 1.5; + + &:hover { + background: #e6e6e6; + color: $black; + } + + &:focus { + outline: none; + } + + &[aria-selected="true"], + &.is-active { + background: $dark; + color: $white; + font-weight: normal; + } + + &[aria-selected="true"]::after, + &.is-active::after { + content: none; + } + } + + &.current-phase-tab a { + background: $brand; + color: $white; + padding-top: $line-height / 2; + + &:hover { + background: $dark; + } + } + } + + .current-phase-timeline { display: block; font-size: $small-font-size; + font-weight: bold; margin-bottom: $line-height / 2; + text-transform: uppercase; } - .phase { - position: relative; + .tabs, + .tabs-content { + background: none; + border: 0; + } - &:not(:first-child) { - margin-top: $line-height * 1.5; + .tabs-panel { + padding: 0; + + h3 { + font-size: rem-calc(36); } + } - &::before { - background-color: #fff; - border: 4px solid $budget; - border-radius: 100%; - content: ""; - height: 16px; - left: -22px; - position: absolute; - top: 6px; - width: 16px; - z-index: 99; - } + .tabs-controls { + display: flex; - &.is-active { - - h3 { - background: $budget; - color: #fff; - display: inline-block; - } + .budget-prev-phase, + .budget-next-phase, + .budget-prev-phase-disabled, + .budget-next-phase-disabled { + background: $brand; + border-radius: rem-calc(3); + color: $white; + display: flex; + font-size: rem-calc(36); + height: 1em * 4 / 3; + width: 1em * 4 / 3; &::before { - background-color: $budget; + margin: auto; } + + span { + @include element-invisible; + } + } + + > :first-child { + margin-right: 0.2em; + } + + .budget-prev-phase-disabled, + .budget-next-phase-disabled { + background: none; + color: #acb6b6; + } + + .budget-prev-phase, + .budget-prev-phase-disabled { + @include has-fa-icon(angle-left, solid); + } + + .budget-next-phase, + .budget-next-phase-disabled { + @include has-fa-icon(angle-right, solid); + } + } + + .budget-phase { + @include breakpoint(medium) { + width: 50%; } } } diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 7e60e6ada..8a88e3a86 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1226,6 +1226,10 @@ } } +.current-phase { + color: $brand; +} + .groups-and-headings { .heading { diff --git a/app/components/budgets/phases_component.html.erb b/app/components/budgets/phases_component.html.erb index 61ea75091..d678181cf 100644 --- a/app/components/budgets/phases_component.html.erb +++ b/app/components/budgets/phases_component.html.erb @@ -1,13 +1,53 @@ - +
+
+

<%= t("budgets.index.all_phases") %>

+
+ + + +
+ <% phases.each do |phase| %> +
"> +
+ <% if phase == phases.first %> + + <% else %> + " + data-turbolinks="false" + class="budget-prev-phase"> + <%= t("budgets.index.prev_phase") %> + + <% end %> + + <% if phase == phases.last %> + + <% else %> + " + data-turbolinks="false" + class="budget-next-phase"> + <%= t("budgets.index.next_phase") %> + + <% end %> +
+ +
+

<%= phase.name %>

+

<%= start_date(phase) %> - <%= end_date(phase) %>

+ <%= auto_link_already_sanitized_html(wysiwyg(phase.description)) %> +
+
+ <% end %> +
+
diff --git a/app/components/budgets/phases_component.rb b/app/components/budgets/phases_component.rb index 6ecb12fc8..18f1d82d3 100644 --- a/app/components/budgets/phases_component.rb +++ b/app/components/budgets/phases_component.rb @@ -5,4 +5,30 @@ class Budgets::PhasesComponent < ApplicationComponent def initialize(budget) @budget = budget end + + private + + def phases + budget.published_phases + end + + def start_date(phase) + l(phase.starts_at.to_date, format: :long) if phase.starts_at.present? + end + + def end_date(phase) + l(phase.ends_at.to_date - 1.day, format: :long) if phase.ends_at.present? + end + + def phase_dom_id(phase) + phases.index(phase) + 1 + end + + def prev_phase_dom_id(phase) + phase_dom_id(phases[phases.index(phase) - 1]) + end + + def next_phase_dom_id(phase) + phase_dom_id(phases[phases.index(phase) + 1]) + end end diff --git a/app/views/budgets/_finished.html.erb b/app/views/budgets/_finished.html.erb index 60b715917..f0d4c621c 100644 --- a/app/views/budgets/_finished.html.erb +++ b/app/views/budgets/_finished.html.erb @@ -2,7 +2,7 @@

<%= t("budgets.index.finished_budgets") %>

-
+
<% budgets.each do |budget| %>
diff --git a/app/views/budgets/index.html.erb b/app/views/budgets/index.html.erb index a1a8729ae..8c460bbf8 100644 --- a/app/views/budgets/index.html.erb +++ b/app/views/budgets/index.html.erb @@ -56,6 +56,8 @@
+ <%= render Budgets::PhasesComponent.new(current_budget) %> +
@@ -111,11 +113,6 @@ <% end %> <% end %> - -
-

<%= t("budgets.index.all_phases") %>

- <%= render Budgets::PhasesComponent.new(current_budget) %> -
diff --git a/config/locales/en/budgets.yml b/config/locales/en/budgets.yml index 758ab8c84..62b52a841 100644 --- a/config/locales/en/budgets.yml +++ b/config/locales/en/budgets.yml @@ -64,8 +64,10 @@ en: icon_alt: Participatory budgets icon title: Participatory budgets help: Help with participatory budgets - all_phases: See all phases - all_phases: Budget investment's phases + all_phases: Participatory budgets phases + next_phase: Next phase + prev_phase: Previous phase + current_phase: Current phase map: Budget investments' proposals located geographically investment_proyects: List of all investment projects unfeasible_investment_proyects: List of all unfeasible investment projects diff --git a/config/locales/es/budgets.yml b/config/locales/es/budgets.yml index 86b563134..aa85536fb 100644 --- a/config/locales/es/budgets.yml +++ b/config/locales/es/budgets.yml @@ -64,8 +64,10 @@ es: icon_alt: Icono de Presupuestos participativos title: Presupuestos participativos help: Ayuda sobre presupuestos participativos - all_phases: Ver todas las fases all_phases: Fases de los presupuestos participativos + next_phase: Fase siguiente + prev_phase: Fase anterior + current_phase: Fase actual map: Proyectos localizables geográficamente investment_proyects: Ver lista completa de proyectos de gasto unfeasible_investment_proyects: Ver lista de proyectos de gasto inviables diff --git a/spec/system/budgets/budgets_spec.rb b/spec/system/budgets/budgets_spec.rb index 7e9c31723..6f3225cb9 100644 --- a/spec/system/budgets/budgets_spec.rb +++ b/spec/system/budgets/budgets_spec.rb @@ -41,12 +41,13 @@ describe "Budgets" do within("#budget_heading") do expect(page).to have_content(budget.name) expect(page).to have_content(budget.description) - expect(page).to have_content("Actual phase") - expect(page).to have_content("Information") expect(page).to have_link("Help with participatory budgets") expect(page).to have_link("See all phases") end + expect(page).to have_content("Actual phase") + expect(page).to have_content("Information") + budget.update!(phase: "publishing_prices") visit budgets_path @@ -215,56 +216,50 @@ describe "Budgets" do summary: "This is the summary for accepting phase") phases.reviewing.update!(starts_at: "11-01-2018", ends_at: "20-01-2018", enabled: false, - description: "Description of reviewing phase", - summary: "This is the summary for reviewing phase") + description: "Description of reviewing phase") phases.selecting.update!(starts_at: "21-01-2018", ends_at: "01-02-2018", enabled: true, description: "Description of selecting phase", summary: "This is the summary for selecting phase") phases.valuating.update!(starts_at: "10-02-2018", ends_at: "20-02-2018", enabled: false, - description: "Description of valuating phase", - summary: "This is the summary for valuating phase") + description: "Description of valuating phase") phases.publishing_prices.update!(starts_at: "21-02-2018", ends_at: "01-03-2018", enabled: false, - description: "Description of publishing prices phase", - summary: "This is the summary for publishing_prices phase") + description: "Description of publishing prices phase") phases.balloting.update!(starts_at: "02-03-2018", ends_at: "10-03-2018", enabled: true, - description: "Description of balloting phase", - summary: "This is the summary for balloting phase") + description: "Description of balloting phase") phases.reviewing_ballots.update!(starts_at: "11-03-2018", ends_at: "20-03-2018", enabled: false, - description: "Description of reviewing ballots phase", - summary: "This is the summary for reviewing_ballots phase") + description: "Description of reviewing ballots phase") phases.finished.update!(starts_at: "21-03-2018", ends_at: "30-03-2018", enabled: true, - description: "Description of finished phase", - summary: "This is the summary for finished phase") + description: "Description of finished phase") visit budgets_path - expect(page).not_to have_content "This is the summary for reviewing phase" + expect(page).not_to have_content "Description of reviewing phase" expect(page).not_to have_content "January 11, 2018 - January 20, 2018" - expect(page).not_to have_content "This is the summary for valuating phase" + expect(page).not_to have_content "Description of valuating phase" expect(page).not_to have_content "February 10, 2018 - February 20, 2018" - expect(page).not_to have_content "This is the summary for publishing_prices phase" + expect(page).not_to have_content "Description of publishing_prices phase" expect(page).not_to have_content "February 21, 2018 - March 01, 2018" - expect(page).not_to have_content "This is the summary for reviewing_ballots phase" + expect(page).not_to have_content "Description of reviewing_ballots phase" expect(page).not_to have_content "March 11, 2018 - March 20, 2018" - expect(page).to have_content "This is the summary for informing phase" + expect(page).to have_content "Description of informing phase" expect(page).to have_content "December 30, 2017 - December 31, 2017" - expect(page).to have_content "This is the summary for accepting phase" + expect(page).to have_content "Description of accepting phase" expect(page).to have_content "January 01, 2018 - January 20, 2018" - expect(page).to have_content "This is the summary for selecting phase" + expect(page).to have_content "Description of selecting phase" expect(page).to have_content "January 21, 2018 - March 01, 2018" - expect(page).to have_content "This is the summary for balloting phase" + expect(page).to have_content "Description of balloting phase" expect(page).to have_content "March 02, 2018 - March 20, 2018" - expect(page).to have_content "This is the summary for finished phase" + expect(page).to have_content "Description of finished phase" expect(page).to have_content "March 21, 2018 - March 29, 2018" - expect(page).to have_css(".phase.is-active", count: 1) + expect(page).to have_css(".tabs-panel.is-active", count: 1) end context "Index map" do