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

Change budget phases design

Browse Source 
Co-authored-by: Javi Martín <javim@elretirao.net>
This commit is contained in:
decabeza
2020-03-16 12:54:00 +01:00
committed by Javi Martín
parent 014d29b991
commit c0f9e4f045
9 changed files with 278 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
app/assets/stylesheets/budgets/phases.scss
View File

@@ -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;
}
h2 {
font-size: $base-font-size;
text-align: center;
}
.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;
}
.tabs,
.tabs-content {
background: none;
border: 0;
}
.tabs-panel {
padding: 0;
h3 {
margin-bottom: 0;
font-size: rem-calc(36);
}
}
.tabs-controls {
display: flex;
.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 {
margin: auto;
}
span {
color: $text-medium;
display: block;
font-size: $small-font-size;
margin-bottom: $line-height / 2;
@include element-invisible;
}
}
.phase {
position: relative;
&:not(:first-child) {
margin-top: $line-height * 1.5;
> :first-child {
margin-right: 0.2em;
}
&::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;
.budget-prev-phase-disabled,
.budget-next-phase-disabled {
background: none;
color: #acb6b6;
}
&.is-active {
h3 {
background: $budget;
color: #fff;
display: inline-block;
.budget-prev-phase,
.budget-prev-phase-disabled {
@include has-fa-icon(angle-left, solid);
}
&::before {
background-color: $budget;
.budget-next-phase,
.budget-next-phase-disabled {
@include has-fa-icon(angle-right, solid);
}
}
.budget-phase {
@include breakpoint(medium) {
width: 50%;
}
}
}

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

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

62
app/components/budgets/phases_component.html.erb
View File

@@ -1,13 +1,53 @@
<ul class="no-bullet budget-phases">
<% budget.published_phases.each do |phase| %>
<li class="phase <%= "is-active" if phase.current? %>">
<h3><%= phase.name %></h3>
<span>
<%= l(phase.starts_at.to_date, format: :long) if phase.starts_at.present? %>
-
<%= l(phase.ends_at.to_date - 1.day, format: :long) if phase.ends_at.present? %>
</span>
<p><%= auto_link_already_sanitized_html(wysiwyg(phase.summary)) %></p>
<section class="budget-phases">
<header>
<h2><%= t("budgets.index.all_phases") %></h2>
</header>
<ul class="phases-list tabs" data-tabs id="budget_phases_tabs" data-deep-link="true">
<% phases.each do |phase| %>
<li class="phase-title tabs-title <%= "is-active current-phase-tab" if phase.current? %>">
<a href="#<%= phase_dom_id(phase) %>">
<% if phase.current? %>
<span class="current-phase-timeline"><%= t("budgets.index.current_phase") %></span>
<% end %>
<span class="phase-name"><%= phase.name %></span>
</a>
</li>
<% end %>
</ul>
</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>

26
app/components/budgets/phases_component.rb
View File

@@ -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

2
app/views/budgets/_finished.html.erb
View File

@@ -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">

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

@@ -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>

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

@@ -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

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

@@ -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

43
spec/system/budgets/budgets_spec.rb
View File

@@ -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