Improve admin budgets form structure

Co-Authored-By: Javi Martín <javim@elretirao.net>

app/assets/stylesheets/admin/budgets/form.scss

@@ -0,0 +1,20 @@
+.admin .budgets-form {
+
+  > fieldset {
+    border-top: 4px solid $admin-border-color;
+    clear: both;
+    margin-top: $line-height * 1.5;
+
+    legend {
+      color: $admin-text;
+      font-size: $small-font-size;
+      font-weight: bold;
+      padding-right: $line-height / 2;
+      text-transform: uppercase;
+    }
+  }
+
+  .globalize-languages {
+    max-width: none;
+  }
+}

app/assets/stylesheets/admin/budgets/help.scss

@@ -7,6 +7,7 @@
   @include has-fa-icon(quote-right, solid, after);
   background: $table-header;
   border-radius: rem-calc(6);
+  clear: both;
   color: $admin-text;
   margin-bottom: $line-height;
   padding: $padding;

app/views/admin/budgets/_association.html.erb

@@ -2,10 +2,12 @@
   <% if assignables.nil? || assignables.empty? %>
     <p><%= t("admin.budgets.edit.empty_#{assignable_type}") %></p>
   <% else %>
-    <h3><%= t("admin.budgets.edit.#{assignable_type}", count: 0) %></h3>
+    <fieldset>
+      <legend><%= t("admin.budgets.edit.#{assignable_type}", count: 0) %></legend>
       <% field = "#{assignable_type.chomp("s")}_ids" %>
       <%= form.collection_check_boxes field, assignables, :id, :name do |box| %>
         <%= box.label { box.check_box + box.text } %>
       <% end %>
+    </fieldset>
   <% end %>
 </div>

app/views/admin/budgets/_form.html.erb

@@ -1,21 +1,16 @@
-<%= render "shared/globalize_locales", resource: @budget %>
-
-<%= translatable_form_for [:admin, @budget] do |f| %>
-
+<%= translatable_form_for [:admin, @budget], html: { class: "budgets-form" } do |f| %>
+  <fieldset>
+    <legend><%= t("admin.budgets.edit.info.budget_settings") %></legend>
+    <%= render "shared/globalize_locales", resource: @budget %>
     <%= render "shared/errors", resource: @budget %>
 
-  <div class="row">
     <%= f.translatable_fields do |translations_form| %>
       <div class="small-12 medium-9 column end">
-        <%= translations_form.text_field :name, maxlength: Budget.title_max_length %>
+        <%= translations_form.text_field :name,
+                                          maxlength: Budget.title_max_length,
+                                          hint: t("admin.budgets.edit.name_description") %>
       </div>
     <% end %>
-  </div>
-
-  <div class="row margin-top">
-    <div class="small-12 medium-6 column">
-      <%= f.select :phase, budget_phases_select_options %>
-    </div>
 
     <div class="small-12 medium-4 column">
       <%= f.select :voting_style, budget_voting_styles_select_options %>
@@ -24,9 +19,11 @@
     <div class="small-12 medium-2 column end">
       <%= f.select :currency_symbol, budget_currency_symbol_select_options %>
     </div>
-  </div>
+  </fieldset>
+
+  <fieldset>
+    <legend><%= t("admin.budgets.edit.info.staff_settings") %></legend>
 
-  <div class="row margin-top">
     <% %w[administrators valuators].each do |staff| %>
       <div class="small-12 medium-4 column end">
         <%= link_to t("admin.budgets.edit.#{staff}", count: @budget.send(staff).count),
@@ -35,18 +32,20 @@
           data: { toggle: "#{staff}_list", texts: t("admin.budgets.edit.#{staff}") } %>
       </div>
     <% end %>
-  </div>
 
-  <div class="row margin-top">
     <%= render "/admin/budgets/association", assignable_type: "administrators", assignables: @admins, form: f %>
     <%= render "/admin/budgets/association", assignable_type: "valuators", assignables: @valuators, form: f %>
+  </fieldset>
+
+  <fieldset>
+    <legend><%= t("admin.budgets.edit.info.phases_settings") %></legend>
+    <div class="small-12 medium-6 column">
+      <%= f.select :phase, budget_phases_select_options %>
     </div>
 
     <%= render Admin::Budgets::HelpComponent.new("budget_phases") %>
 
     <% if @budget.phases.present? %>
-    <div class="row">
-      <div class="small-12 column">
       <table id="budget-phases-table" class="table-for-mobile">
         <thead>
           <tr>
@@ -86,14 +85,10 @@
           </tr>
         <% end %>
       </table>
-      </div>
-    </div>
     <% end %>
+  </fieldset>
 
-  <div class="row">
-    <div class="small-12 column">
   <%= render "admin/shared/show_results_fields", form: f %>
-    </div>
 
   <div class="small-12 column">
     <div class="clear small-12 medium-4 large-3 inline-block">
@@ -121,5 +116,4 @@
       <% end %>
     </div>
   </div>
-  </div>
 <% end %>

app/views/admin/budgets/edit.html.erb

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

app/views/admin/shared/_show_results_fields.html.erb

@@ -1,7 +1,11 @@
-<fieldset class="fieldset">
+<fieldset aria-describedby="results_and_stats_reminder">
   <legend><%= t("admin.shared.show_results_and_stats") %></legend>
+
+  <p class="help-text" id="results_and_stats_reminder">
+    <%= t("admin.shared.results_and_stats_reminder") %>
+  </p>
+
   <%= form.check_box :results_enabled %>
   <%= form.check_box :stats_enabled %>
   <%= form.check_box :advanced_stats_enabled %>
-  <p class="small"><%= t("admin.shared.results_and_stats_reminder") %></p>
 </fieldset>

config/locales/en/admin.yml

@@ -102,6 +102,11 @@ en:
           other: "%{count} valuators selected"
         empty_administrators: "There are no administrators"
         empty_valuators: "There are no valuators"
+        name_description: "This is the name of the participatory budget used on the header and cards whenever it is active"
+        info:
+          budget_settings: "General participatory budget settings"
+          phases_settings: "Phases settings"
+          staff_settings: "Administrators and Valuators assigned to the budget"
       destroy:
         success_notice: Budget deleted successfully
         unable_notice: You cannot delete a budget that has associated investments

config/locales/es/admin.yml

@@ -102,6 +102,11 @@ es:
           other: "%{count} evaluadores seleccionados"
         empty_administrators: "No hay administradores"
         empty_valuators: "No hay evaluadores"
+        name_description: "Este es el nombre del presupuesto participativo usado en la cabecera y tarjetas cuando éste está activo"
+        info:
+          budget_settings: "Configuración genérica del presupuesto participativo"
+          phases_settings: "Configuración de las fases"
+          staff_settings: "Administradores y Evaluadores asigandos al presupuesto"
       destroy:
         success_notice: Presupuesto eliminado correctamente
         unable_notice: No se puede eliminar un presupuesto con proyectos asociados