Change budget phases design

Co-authored-by: Javi Martín <javim@elretirao.net>

app/assets/stylesheets/budgets/phases.scss

@@ -1,56 +1,187 @@
 .budget-phases {
-  border-left: 3px solid $budget;
+  background: $light;
-  margin-left: $line-height / 2;
+  border-top: 2px solid $border;
-  padding: $line-height $line-height / 2;
+  padding-bottom: $line-height * 2;
 
-  h3,
+  > * {
-  span,
+    @include grid-column-gutter;
-  p {
+    @include grid-row;
-    padding: 0 $line-height / 4;
   }
 
-  h3 {
+  h2 {
-    margin-bottom: 0;
+    font-size: $base-font-size;
+    text-align: center;
   }
 
-  span {
+  .phases-list {
-    color: $text-medium;
+    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 {
+  .tabs,
-    position: relative;
+  .tabs-content {
+    background: none;
+    border: 0;
+  }
 
-    &:not(:first-child) {
+  .tabs-panel {
-      margin-top: $line-height * 1.5;
+    padding: 0;
+
+    h3 {
+      font-size: rem-calc(36);
     }
+  }
 
-    &::before {
+  .tabs-controls {
-      background-color: #fff;
+    display: flex;
-      border: 4px solid $budget;
-      border-radius: 100%;
-      content: "";
-      height: 16px;
-      left: -22px;
-      position: absolute;
-      top: 6px;
-      width: 16px;
-      z-index: 99;
-    }
 
-    &.is-active {
+    .budget-prev-phase,
-
+    .budget-next-phase,
-      h3 {
+    .budget-prev-phase-disabled,
-        background: $budget;
+    .budget-next-phase-disabled {
-        color: #fff;
+      background: $brand;
-        display: inline-block;
+      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%;
     }
   }
 }

app/assets/stylesheets/participation.scss

@@ -1226,6 +1226,10 @@
   }
 }
 
+.current-phase {
+  color: $brand;
+}
+
 .groups-and-headings {
 
   .heading {

app/components/budgets/phases_component.html.erb

@@ -1,13 +1,53 @@
-<ul class="no-bullet budget-phases">
+<section class="budget-phases">
-  <% budget.published_phases.each do |phase| %>
+  <header>
-    <li class="phase <%= "is-active" if phase.current? %>">
+    <h2><%= t("budgets.index.all_phases") %></h2>
-      <h3><%= phase.name %></h3>
+  </header>
-      <span>
+
-        <%= l(phase.starts_at.to_date, format: :long) if phase.starts_at.present? %>
+  <ul class="phases-list tabs" data-tabs id="budget_phases_tabs" data-deep-link="true">
-        -
+    <% phases.each do |phase| %>
-        <%= l(phase.ends_at.to_date - 1.day, format: :long) if phase.ends_at.present? %>
+      <li class="phase-title tabs-title <%= "is-active current-phase-tab" if phase.current? %>">
-      </span>
+        <a href="#<%= phase_dom_id(phase) %>">
-      <p><%= auto_link_already_sanitized_html(wysiwyg(phase.summary)) %></p>
+          <% if phase.current? %>
-    </li>
+            <span class="current-phase-timeline"><%= t("budgets.index.current_phase") %></span>
-  <% end %>
+          <% end %>
-</ul>
+
+          <span class="phase-name"><%= phase.name %></span>
+        </a>
+      </li>
+    <% end %>
+  </ul>
+
+  <div class="tabs-content" data-tabs-content="budget_phases_tabs">
+    <% phases.each do |phase| %>
+      <div id="<%= phase_dom_id(phase) %>" class="tabs-panel <%= "is-active" if phase.current? %>">
+        <div class="tabs-controls">
+          <% if phase == phases.first %>
+            <span class="budget-prev-phase-disabled"></span>
+          <% else %>
+            <a href="#<%= prev_phase_dom_id(phase) %>" title="<%= t("budgets.index.prev_phase") %>"
+               data-turbolinks="false"
+               class="budget-prev-phase">
+              <span><%= t("budgets.index.prev_phase") %></span>
+            </a>
+          <% end %>
+
+          <% if phase == phases.last %>
+            <span class="budget-next-phase-disabled"></span>
+          <% else %>
+            <a href="#<%= next_phase_dom_id(phase) %>" title="<%= t("budgets.index.next_phase") %>"
+               data-turbolinks="false"
+               class="budget-next-phase">
+              <span><%= t("budgets.index.next_phase") %></span>
+            </a>
+          <% end %>
+        </div>
+
+        <div class="budget-phase">
+          <h3><%= phase.name %></h3>
+          <p><%= start_date(phase) %> - <%= end_date(phase) %></p>
+          <%= auto_link_already_sanitized_html(wysiwyg(phase.description)) %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</section>

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

app/views/budgets/_finished.html.erb

@@ -2,7 +2,7 @@
   <div class="small-12 medium-9 column">
     <h2><%= t("budgets.index.finished_budgets") %></h2>
 
-    <div id="finished_budgets" class="budget-investments-list">
+    <div id="finished_budgets">
       <% budgets.each do |budget| %>
         <div class="budget-investment clear">
           <div class="panel past-budgets">

app/views/budgets/index.html.erb

@@ -56,6 +56,8 @@
     </div>
   </div>
 
+  <%= render Budgets::PhasesComponent.new(current_budget) %>
+
   <div id="budget_info" class="budget-info">
     <div class="row margin-top">
       <div class="small-12 column">
@@ -111,11 +113,6 @@
             <% end %>
           </ul>
         <% end %>
-
-        <div id="all_phases">
-          <h2><%= t("budgets.index.all_phases") %></h2>
-          <%= render Budgets::PhasesComponent.new(current_budget) %>
-        </div>
       </div>
     </div>
 

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: Participatory budgets phases
-      all_phases: Budget investment's 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

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

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",
+                            description: "Description of reviewing phase")
-                            summary: "This is the summary for 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",
+                            description: "Description of valuating phase")
-                            summary: "This is the summary for valuating phase")
 
     phases.publishing_prices.update!(starts_at: "21-02-2018", ends_at: "01-03-2018", enabled: false,
-                                    description: "Description of publishing prices phase",
+                                    description: "Description of publishing prices phase")
-                                    summary: "This is the summary for publishing_prices phase")
 
     phases.balloting.update!(starts_at: "02-03-2018", ends_at: "10-03-2018", enabled: true,
-                            description: "Description of balloting phase",
+                            description: "Description of balloting phase")
-                            summary: "This is the summary for balloting phase")
 
     phases.reviewing_ballots.update!(starts_at: "11-03-2018", ends_at: "20-03-2018", enabled: false,
-                                    description: "Description of reviewing ballots phase",
+                                    description: "Description of reviewing ballots phase")
-                                    summary: "This is the summary for reviewing_ballots phase")
 
     phases.finished.update!(starts_at: "21-03-2018", ends_at: "30-03-2018", enabled: true,
-                           description: "Description of finished phase",
+                           description: "Description of finished phase")
-                           summary: "This is the summary for 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