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

Improve budget phases form layout

Browse Source 
Dates are grouped in a fieldset and activating the phase is more
prominent.
This commit is contained in:
decabeza
2020-03-16 12:54:00 +01:00
committed by Javi Martín
parent c0c458bb38
commit c4e7bf0938
5 changed files with 60 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/assets/stylesheets/admin/budget_phases/form.scss Normal file
View File

@@ -0,0 +1,25 @@
.admin .budget-phases-form {
fieldset {
margin-top: $line-height;
> * {
@include grid-column;
}
> .date-field {
@include breakpoint(medium) {
width: 50%;
}
@include breakpoint(large) {
width: 25%;
}
&:last-child {
float: left;
}
}
}
}

58
app/views/admin/budget_phases/_form.html.erb
View File

@@ -1,43 +1,45 @@
<%= render "shared/globalize_locales", resource: @phase %>
<%= translatable_form_for [:admin, @phase.budget, @phase] do |f| %>
<%= translatable_form_for [:admin, @phase.budget, @phase], html: { class: "budget-phases-form" } do |f| %>
<%= render "shared/errors", resource: @phase %>
<div class="row">
<div class="small-12 medium-6 column">
<fieldset>
<legend aria-describedby="phase_duration_description">
<%= t("admin.budget_phases.edit.duration") %>
</legend>
<p class="help-text" id="phase_duration_description">
<%= t("admin.budget_phases.edit.duration_description") %>
</p>
<div class="date-field">
<%= f.date_field :starts_at, id: "start_date" %>
</div>
<div class="small-12 medium-6 column">
<div class="date-field">
<%= f.date_field :ends_at, id: "end_date" %>
</div>
</fieldset>
<div class="small-12 column margin">
<%= f.check_box :enabled %>
<span class="help-text" id="phase-summary-help-text">
<%= t("admin.budget_phases.edit.enabled_help_text") %>
</span>
</div>
<div class="row">
<%= f.translatable_fields do |translations_form| %>
<div class="small-12 column">
<%= translations_form.text_area :description,
maxlength: Budget::Phase::DESCRIPTION_MAX_LENGTH,
class: "html-area",
hint: t("admin.budget_phases.edit.description_help_text") %>
</div>
<% end %>
</div>
<div class="row">
<div class="small-12 column margin-top">
<%= f.check_box :enabled %>
<span class="help-text" id="phase-summary-help-text">
<%= t("admin.budget_phases.edit.enabled_help_text") %>
</span>
<%= f.translatable_fields do |translations_form| %>
<div class="small-12 column">
<%= translations_form.text_area :description,
maxlength: Budget::Phase::DESCRIPTION_MAX_LENGTH,
class: "html-area",
hint: t("admin.budget_phases.edit.description_help_text") %>
</div>
</div>
<% end %>
<div class="row">
<div class="small-12 medium-4 large-3 column end margin-top">
<%= f.submit t("admin.budget_phases.edit.save_changes"), class: "button success expanded" %>
</div>
<div class="small-12 column">
<%= f.submit t("admin.budget_phases.edit.save_changes"), class: "button success" %>
</div>
<% end %>

6
app/views/admin/budget_phases/edit.html.erb
View File

@@ -1,9 +1,5 @@
<%= back_link_to edit_admin_budget_path(@phase.budget) %>
<div class="row">
<div class="small-12 column">
<h2><%= t("admin.budgets.edit.title") %> - <%= @phase.name %></h2>
</div>
</div>
<h2><%= t("admin.budgets.edit.title") %> - <%= @phase.name %></h2>
<%= render "/admin/budget_phases/form" %>

2
config/locales/en/admin.yml
View File

@@ -174,6 +174,8 @@ en:
budget_phases:
edit:
description_help_text: This text will appear in the header when the phase is active
duration: "Phase's duration"
duration_description: "The period of time this phase will be active."
enabled_help_text: This phase will be public in the budget's phases timeline, as well as active for any other purpose
save_changes: Save changes
index:

2
config/locales/es/admin.yml
View File

@@ -174,6 +174,8 @@ es:
budget_phases:
edit:
description_help_text: Este texto aparecerá en la cabecera cuando la fase esté activa
duration: "Duración de la fase"
duration_description: "El período de tiempo que esta fase estará activa."
enabled_help_text: Esta fase será pública en el calendario de fases del presupuesto y estará activa para otros propósitos
save_changes: Guardar cambios
index: