Change budget phases design
Co-authored-by: Javi Martín <javim@elretirao.net>
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user