Render link to budget header

- Allow to define a link (text and url) on budget form for render on the budget
header.
- Improve styles

app/assets/stylesheets/participation.scss

@@ -1132,8 +1132,9 @@
 .budget-header {
   @extend %brand-background;
   margin-top: -$line-height;
+  min-height: $line-height * 25;
   padding-bottom: $line-height;
-  padding-top: $line-height;
+  padding-top: $line-height * 4;
 
   .budget-title {
     font-weight: bold;
@@ -1149,6 +1150,11 @@
     }
   }
 
+  h1 {
+    font-size: rem-calc(60);
+    padding: $line-height * 2 0 $line-height;
+  }
+
   h1,
   h2,
   p,
@@ -1176,6 +1182,14 @@
       text-transform: uppercase;
     }
   }
+
+  .button {
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    margin-bottom: $line-height * 2;
+    min-width: 30%;
+    text-decoration: none;
+  }
 }
 
 .jumbo-budget {

app/components/budgets/budget_component.html.erb

@@ -1,9 +1,14 @@
 <div class="budget-header">
   <div class="row">
-    <div class="small-12 column">
+    <div class="small-12 column text-center">
       <span class="budget-title"><%= t("budgets.index.title") %></span>
       <h1><%= budget.name %></h1>
 
+      <% if budget.main_link_text.present? && budget.main_link_url.present? %>
+        <%= link_to budget.main_link_text, budget.main_link_url,
+                    class: "button large" %>
+      <% end %>
+
       <p>
         <%= link_to t("budgets.index.section_header.help"), "#section_help" %>
       </p>

app/controllers/admin/budgets_controller.rb

@@ -74,6 +74,8 @@ def budget_params
       valid_attributes = [:phase,
                           :currency_symbol,
                           :voting_style,
+                          :main_link_text,
+                          :main_link_url,
                           administrator_ids: [],
                           valuator_ids: []
       ] + descriptions

app/models/budget.rb

@@ -27,6 +27,7 @@ def name_uniqueness_by_budget
   validates :currency_symbol, presence: true
   validates :slug, presence: true, format: /\A[a-z0-9\-_]+\z/
   validates :voting_style, inclusion: { in: VOTING_STYLES }
+  validates :main_link_url, presence: true, if: -> { main_link_text.present? }
 
   has_many :investments, dependent: :destroy
   has_many :ballots, dependent: :destroy

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

@@ -19,6 +19,13 @@
     <div class="small-12 medium-2 column end">
       <%= f.select :currency_symbol, budget_currency_symbol_select_options %>
     </div>
+
+    <div class="small-12 medium-6 column">
+      <p class="form-label"><%= t("admin.budgets.edit.main_call_to_action") %></p>
+      <p class="help-text"> <%= t("admin.budgets.edit.main_call_to_action_description") %></p>
+      <%= f.text_field :main_link_text %>
+      <%= f.text_field :main_link_url, placeholder: t("admin.shared.example_url") %>
+    </div>
   </fieldset>
 
   <fieldset>

config/locales/en/activerecord.yml

@@ -160,6 +160,8 @@ en:
         voting_style: "Final voting style"
         voting_style_knapsack: "Knapsack"
         voting_style_approval: "Approval"
+        main_link_text: "Text on the link"
+        main_link_url: "The link takes you to (add a link)"
       budget/translation:
         name: "Name"
       budget/investment:

config/locales/en/admin.yml

@@ -119,6 +119,8 @@ en:
         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"
+        main_call_to_action: "Main call to action (optional)"
+        main_call_to_action_description: "This link will appear on main banner of this participatory budget and encourages your user to perform a specific action like creating a proposal, voting for existing ones, or learn more about the process."
         info:
           budget_settings: "General participatory budget settings"
           phases_settings: "Phases settings"

config/locales/es/activerecord.yml

@@ -160,6 +160,8 @@ es:
         voting_style: "Estilo de la votación final"
         voting_style_knapsack: Bolsa de dinero
         voting_style_approval: Por aprobación
+        main_link_text: "Texto del enlace"
+        main_link_url: "El enlace te lleva a (añade un enlace)"
       budget/translation:
         name: "Nombre"
       budget/investment:

config/locales/es/admin.yml

@@ -119,6 +119,8 @@ es:
         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"
+        main_call_to_action: "Enlace de acción principal (opcional)"
+        main_call_to_action_description: "Este enlace aparecerá en la cabecera de este presupuesto participativo y permite al usuario ejecutar una acción específica como crear una nueva propuesta, votar las existentes, o leer más sobre el funcionamiento de los presupuestos participativos."
         info:
           budget_settings: "Configuración genérica del presupuesto participativo"
           phases_settings: "Configuración de las fases"

db/migrate/20200213163214_add_main_link_to_budgets.rb

@@ -0,0 +1,6 @@
+class AddMainLinkToBudgets < ActiveRecord::Migration[5.2]
+  def change
+    add_column :budgets, :main_link_text, :string
+    add_column :budgets, :main_link_url, :string
+  end
+end

db/schema.rb

@@ -362,6 +362,8 @@
     t.text "description_informing"
     t.string "voting_style", default: "knapsack"
     t.boolean "published"
+    t.string "main_link_text"
+    t.string "main_link_url"
   end
 
   create_table "campaigns", id: :serial, force: :cascade do |t|

spec/models/budget_spec.rb

@@ -114,6 +114,28 @@
     end
   end
 
+  describe "main_link_url" do
+    it "is not required if main_link_text is not provided" do
+      valid_budget = build(:budget,
+                           name_en: "object name",
+                           main_link_text: "link text",
+                           main_link_url: "http://domain.com")
+
+      expect(valid_budget).to be_valid
+    end
+
+    it "is required if main_link_text is provided" do
+      invalid_budget = build(:budget,
+                             name_en: "object name",
+                             main_link_text: "link text")
+
+      expect(invalid_budget).not_to be_valid
+      expect(invalid_budget.errors.count).to be 1
+      expect(invalid_budget.errors[:main_link_url].count).to be 1
+      expect(invalid_budget.errors[:main_link_url].first).to eq "can't be blank"
+    end
+  end
+
   describe "phase" do
     it "is validated" do
       Budget::Phase::PHASE_KINDS.each do |phase|

spec/system/admin/budgets_spec.rb

@@ -290,6 +290,18 @@
       end
     end
 
+    scenario "Show CTA link in public site if added" do
+      visit edit_admin_budget_path(budget)
+      expect(page).to have_content("Main call to action (optional)")
+
+      fill_in "Text on the link", with: "Participate now"
+      fill_in "The link takes you to (add a link)", with: "https://consulproject.org"
+      click_button "Update Budget"
+
+      visit budgets_path
+      expect(page).to have_link("Participate now", href: "https://consulproject.org")
+    end
+
     scenario "Changing name for current locale will update the slug if budget is in draft phase" do
       budget.update!(published: false, name: "Old English Name")