Show heading name and amount on single heading new form

Note we're using an extra `<span>` element but we could use a CSS grid
layout instead. We're not using it because browser compatibility is only
94.56% at the time of writing.

app/assets/stylesheets/budgets/investments/new.scss

@@ -41,7 +41,6 @@
       font-size: rem-calc(36);
       margin-bottom: 0;
       padding: $line-height * 2 0;
-      position: relative;
 
       @include breakpoint(large) {
         clip-path: polygon(
@@ -69,6 +68,12 @@
           margin-right: rem-calc(60);
         }
       }
+
+      span span {
+        display: block;
+        font-size: 0.75em;
+        margin-top: $line-height / 2;
+      }
     }
   }
 }

app/assets/stylesheets/mixins/layouts.scss

@@ -29,6 +29,8 @@
 }
 
 @mixin background-till-left-of-screen {
+  position: relative;
+
   &::before {
     background: inherit;
     content: "";

app/views/budgets/investments/new.html.erb

@@ -3,7 +3,19 @@
     <%= back_link_to budgets_path %>
 
     <header>
-      <h1><%= t("budgets.investments.form.title") %></h1>
+      <h1>
+        <span>
+          <%= t("budgets.investments.form.title") %>
+
+          <% if @budget.single_heading? %>
+            <span>
+              <%= t("budgets.investments.form.subtitle",
+                    heading: @budget.headings.first.name,
+                    price: @budget.formatted_heading_price(@budget.headings.first)) %>
+            </span>
+          <% end %>
+        </span>
+      </h1>
     </header>
   </div>
 

config/locales/en/budgets.yml

@@ -79,6 +79,7 @@ en:
     investments:
       form:
         title: "Create a budget investment"
+        subtitle: "%{heading} (%{price})"
         tag_category_label: "Categories"
         tags_instructions: "Tag this proposal. You can choose from proposed categories or add your own"
         tags_label: Tags

config/locales/es/budgets.yml

@@ -79,6 +79,7 @@ es:
     investments:
       form:
         title: "Crear nuevo proyecto"
+        subtitle: "%{heading} (%{price})"
         tag_category_label: "Categorías"
         tags_instructions: "Etiqueta este proyecto. Puedes elegir entre las categorías propuestas o introducir las que desees"
         tags_label: Etiquetas

spec/system/budgets/investments_spec.rb

@@ -545,6 +545,7 @@ describe "Budget Investments" do
       visit new_budget_investment_path(budget)
 
       expect(page).not_to have_field "budget_investment_heading_id"
+      expect(page).to have_content("#{heading.name} (#{budget.formatted_heading_price(heading)})")
 
       fill_in "Title", with: "Build a skyscraper"
       fill_in_ckeditor "Description", with: "I want to live in a high tower over the clouds"
@@ -576,6 +577,7 @@ describe "Budget Investments" do
 
       visit new_budget_investment_path(budget)
 
+      expect(page).not_to have_content("#{heading.name} (#{budget.formatted_heading_price(heading)})")
       expect(page).to have_select "Heading",
         options: ["", "More hospitals", "Medical supplies", "Even more hospitals"]