From 937450ff4e7ec580448ad4f7ec5aefa54e21a46c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 10 Jul 2021 01:45:56 +0200
Subject: [PATCH] Simplify new investment header HTML

In commit 49b406199 we added an extra `<span>` element just so we could
add an icon to the right while maintaining both the title and subtitle
on the left.

We can do the same thing without the extra `<span>` element, absolutely
positioning the element and leaving enough padding.
---
 .../stylesheets/budgets/investments/new.scss  | 35 +++++++++++--------
 app/views/budgets/investments/new.html.erb    | 18 +++++-----
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/app/assets/stylesheets/budgets/investments/new.scss b/app/assets/stylesheets/budgets/investments/new.scss
index d7a698e4d..c60ad1a73 100644
--- a/app/assets/stylesheets/budgets/investments/new.scss
+++ b/app/assets/stylesheets/budgets/investments/new.scss
@@ -34,12 +34,30 @@
       @include brand-background($brand-secondary);
       @include background-till-left-of-screen;
       @include has-fa-icon(chart-pie, solid, after);
-      align-items: center;
-      display: flex;
       flex: 1;
       font-size: rem-calc(36);
       padding: $line-height * 2 0;
 
+      @include breakpoint(small) {
+        &::after {
+          display: none;
+        }
+      }
+
+      @include breakpoint(medium) {
+        padding-right: 4em;
+
+        &::after {
+          display: block;
+          font-size: 2em;
+          margin-right: rem-calc(60);
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+
       @include breakpoint(large) {
         clip-path: polygon(
           -100vw -#{$border-width},
@@ -56,18 +74,7 @@
         height: calc(100% + 2 * #{$border-width});
       }
 
-      &::after {
-        display: none;
-
-        @include breakpoint(medium) {
-          display: block;
-          font-size: 2em;
-          margin-left: auto;
-          margin-right: rem-calc(60);
-        }
-      }
-
-      span span {
+      span {
         display: block;
         font-size: 0.75em;
         margin-top: $line-height / 2;
diff --git a/app/views/budgets/investments/new.html.erb b/app/views/budgets/investments/new.html.erb
index 5c9b3b2a6..6ffeade7d 100644
--- a/app/views/budgets/investments/new.html.erb
+++ b/app/views/budgets/investments/new.html.erb
@@ -3,17 +3,15 @@
 
   <header>
     <h1>
-      <span>
-        <%= t("budgets.investments.form.title") %>
+      <%= 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>
+      <% 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 %>
     </h1>
   </header>