Add help text in budgets admin index

Co-authored-by: decabeza <alberto@decabeza.es>

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,12 @@
+class Admin::Budgets::HelpComponent < ApplicationComponent
+
+  private
+
+    def i18n_namespace
+      "admin.budgets.index"
+    end
+
+    def text
+      t("#{i18n_namespace}.help")
+    end
+end

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

@@ -3,6 +3,7 @@
   <%= link_to t("admin.budgets.index.new_link"), new_admin_budget_path %>
 </header>
 
+<%= render Admin::Budgets::HelpComponent.new %>
 <%= 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

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