Merge pull request #4368 from consul/budgets_help

Add help texts in budgets admin section

app/assets/stylesheets/admin.scss

@@ -659,7 +659,7 @@ code {
   display: flex;
 
   a {
-    @include hollow-button;
+    @include regular-button;
     margin-left: auto;
   }
 }

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

@@ -0,0 +1,42 @@
+.admin .budgets-help {
+  $padding: $line-height / 2;
+  $quote-size: 1em;
+  $quote-padding: 2 * $quote-size / 5;
+  $quote-width: $quote-size + 2 * $quote-padding;
+
+  @include has-fa-icon(quote-right, solid, after);
+  background: $table-header;
+  border-radius: rem-calc(6);
+  color: $admin-text;
+  margin-bottom: $line-height;
+  padding: $padding;
+  padding-right: calc(2 * #{$padding} + #{$quote-width});
+  position: relative;
+
+  @include breakpoint(medium) {
+    width: 50%;
+  }
+
+  p {
+    font-size: $small-font-size;
+    font-style: italic;
+  }
+
+  &::before {
+    background: #ccd8e4;
+    content: "";
+    height: 100%;
+    position: absolute;
+    right: $padding;
+    top: 0;
+    width: $quote-width;
+  }
+
+  &::after {
+    bottom: $padding / 2;
+    color: $white;
+    margin-right: 0;
+    position: absolute;
+    right: calc(#{$padding} + #{$quote-padding});
+  }
+}

app/assets/stylesheets/application.scss

@@ -31,7 +31,7 @@
 @import "leaflet";
 @import "sticky_overrides";
 @import "tags";
-@import "admin/*";
+@import "admin/**/*";
 @import "sdg/**/*";
 @import "sdg_management/*";
 @import "sdg_management/**/*";

app/components/admin/budgets/help_component.html.erb

@@ -0,0 +1,3 @@
+<div class="budgets-help">
+  <p><%= text %></p>
+</div>

app/components/admin/budgets/help_component.rb

@@ -0,0 +1,13 @@
+class Admin::Budgets::HelpComponent < ApplicationComponent
+  attr_reader :i18n_namespace
+
+  def initialize(i18n_namespace)
+    @i18n_namespace = i18n_namespace
+  end
+
+  private
+
+    def text
+      t("admin.#{i18n_namespace}.index.help")
+    end
+end

app/views/admin/budget_groups/index.html.erb

@@ -2,11 +2,12 @@
 
 <div class="clear"></div>
 
-<h2 class="inline-block"><%= @budget.name %></h2>
+<header>
+  <h2><%= @budget.name %></h2>
+  <%= link_to t("admin.budget_groups.form.create"), new_admin_budget_group_path %>
+</header>
 
-<%= link_to t("admin.budget_groups.form.create"),
-            new_admin_budget_group_path,
-            class: "button float-right" %>
+<%= render Admin::Budgets::HelpComponent.new("budget_groups") %>
 
 <% if @groups.any? %>
   <h3><%= t("admin.budget_groups.amount", count: @groups.count) %></h3>

app/views/admin/budget_headings/index.html.erb

@@ -1,10 +1,11 @@
 <%= back_link_to admin_budget_groups_path(@budget), t("admin.budget_headings.index.back") %>
 
-<div class="clear"></div>
-<h2 class="inline-block"><%= "#{@budget.name} / #{@group.name}" %></h2>
-<%= link_to t("admin.budget_headings.form.create"),
-            new_admin_budget_group_heading_path,
-            class: "button float-right" %>
+<header>
+  <h2><%= "#{@budget.name} / #{@group.name}" %></h2>
+  <%= link_to t("admin.budget_headings.form.create"), new_admin_budget_group_heading_path %>
+</header>
+
+<%= render Admin::Budgets::HelpComponent.new("budget_headings") %>
 
 <% if @headings.any? %>
   <h3><%= t("admin.budget_headings.amount", count: @headings.count) %></h3>

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

@@ -42,6 +42,8 @@
     <%= render "/admin/budgets/association", assignable_type: "valuators", assignables: @valuators, form: f %>
   </div>
 
+  <%= render Admin::Budgets::HelpComponent.new("budget_phases") %>
+
   <% if @budget.phases.present? %>
     <div class="row">
       <div class="small-12 column">

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

@@ -1,9 +1,9 @@
-<h2 class="inline-block"><%= t("admin.budgets.index.title") %></h2>
-
-<%= link_to t("admin.budgets.index.new_link"),
-            new_admin_budget_path,
-            class: "button float-right" %>
+<header>
+  <h2><%= t("admin.budgets.index.title") %></h2>
+  <%= link_to t("admin.budgets.index.new_link"), new_admin_budget_path %>
+</header>
 
+<%= render Admin::Budgets::HelpComponent.new("budgets") %>
 <%= render "shared/filter_subnav", i18n_namespace: "admin.budgets.index" %>
 
 <% if @budgets.any? %>

config/locales/en/admin.yml

@@ -70,6 +70,7 @@ en:
         filters:
           open: Open
           finished: Finished
+        help: "Participatory budgets allow citizens to propose and decide directly how to spend part of the budget, with monitoring and rigorous evaluation of proposals by the institution."
         budget_investments: Manage projects
         table_name: Name
         table_phase: Phase
@@ -133,6 +134,7 @@ en:
         submit: "Save group"
       index:
         back: "Go back to budgets"
+        help: "Groups are meant to organize headings. After a group is created and it contais headings, it's possible to determine in how many headings a user can vote per group."
     budget_headings:
       no_headings: "There are no headings."
       amount:
@@ -155,12 +157,15 @@ en:
         submit: "Save heading"
       index:
         back: "Go back to groups"
+        help: "Headings are meant to divide the money of the participatory budget. Here you can add headings for this group and assign the amount of money that will be used for each heading."
     budget_phases:
       edit:
         summary_help_text: This text will inform the user about the phase. To show it even if the phase is not active, select the checkbox below
         description_help_text: This text will appear in the header when the phase is 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:
+        help: "Participatory budgets have different phases. Here you can enable or disable phases and also customize each individual phase."
     budget_investments:
       index:
         heading_filter_all: All headings

config/locales/es/admin.yml

@@ -70,6 +70,7 @@ es:
         filters:
           open: Abiertos
           finished: Terminados
+        help: "Los presupuestos participativos permiten que los ciudadanos propongan y decidan de manera directa cómo gastar parte del presupuesto, con un seguimiento y evaluación riguroso de las propuestas por parte de la institución."
         budget_investments: Gestionar proyectos de gasto
         table_name: Nombre
         table_phase: Fase
@@ -133,6 +134,7 @@ es:
         submit: "Guardar grupo"
       index:
         back: "Volver a presupuestos"
+        help: "Los grupos sirven para organizar las partidas del presupuesto. Después de que un grupo sea creado y éste contenga partidas, es posible determinar el número de partidas a las que un usuario puede votar por grupo."
     budget_headings:
       no_headings: "No hay partidas."
       amount:
@@ -155,12 +157,15 @@ es:
         submit: "Guardar partida"
       index:
         back: "Volver a grupos"
+        help: "Las partidas sirven para dividir el dinero del presupuesto participativo. Aquí puedes ir añadiendo partidas para cada grupo y establecer la cantidad de dinero que se gastará en cada partida."
     budget_phases:
       edit:
         summary_help_text: Este texto informará al usuario sobre la fase. Para mostrarlo aunque la fase no esté activa, marca la opción de más abajo.
         description_help_text: Este texto aparecerá en la cabecera cuando la fase esté 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:
+        help: "Los presupuestos participativos tienen distintas fases. Aquí puedes habilitar o deshabilitar fases y también personalizar cada una de las fases."
     budget_investments:
       index:
         heading_filter_all: Todas las partidas