Change budget phases design

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

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>
</li>
<% end %>
</ul>
<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>
<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>

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