From 8398d176b571fab907a624681f5c7c9a5374bfae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 10 Jul 2021 04:48:05 +0200
Subject: [PATCH] Allow more elements in investment form header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since we're going to reuse this pattern in other forms, we shouldn't
rely on the header having just one element. There could be a subtitle.
So we're changing the CSS to be less dependent on a very specific HTML
structure.

Regarding the subtitle, the original idea was to have both an <h1> and
an <h2> element inside the header. However, the W3C advices against it
[1]:

> h1–h6 elements must not be used to markup subheadings, subtitles,
> alternative titles and taglines unless intended to be the heading for
> a new section or subsection.

So we ended up including the subtitle inside he <h1>. We could also add
it in a separate <p> tag. However, in this case I think it's better to
include it in the <h1> (and in the <title> tag) because it helps to
uniquely identify the current page from other pages.

Due to some rounding issues in Firefox, we're manually moving the polygon
6px so there isn't a blank space between it and the icon on the right.
And due to rounding issues in Chrome, we're adding one extra pixel to
the bottom of the polygon defining the clip-path.

[1] https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements
---
 .../stylesheets/budgets/investments/new.scss  | 102 +++++++++++-------
 app/assets/stylesheets/mixins/layouts.scss    |   2 +-
 2 files changed, 63 insertions(+), 41 deletions(-)

diff --git a/app/assets/stylesheets/budgets/investments/new.scss b/app/assets/stylesheets/budgets/investments/new.scss
index 0c5b9f338..213cc9258 100644
--- a/app/assets/stylesheets/budgets/investments/new.scss
+++ b/app/assets/stylesheets/budgets/investments/new.scss
@@ -6,71 +6,93 @@
   }
 
   header {
-    @include has-fa-icon(building, regular, after);
-    align-items: center;
-    border: $border-width solid;
-    color: $brand-secondary;
+    $icon-size: $line-height * 4;
+    $padding-right: rem-calc(20);
+    $icon-size-with-padding: $icon-size + $padding-right;
+    $polygon-size: $icon-size / 2;
+    @include background-till-left-of-screen;
+    @include brand-background($brand-secondary);
+    border: $border-width solid $brand-secondary;
     border-bottom-right-radius: rem-calc(12);
     border-top-right-radius: rem-calc(12);
-    display: flex;
     margin-top: $line-height * 2;
+    padding: $line-height * 2 0;
+    position: relative;
 
-    @include breakpoint(large) {
-      padding-right: $line-height;
+    @include breakpoint(small) {
+      &::after {
+        display: none;
+      }
     }
 
-    &::after {
-      display: none;
+    @include breakpoint(large) {
+      $rounding-error: 6px;
+      padding-right: $icon-size-with-padding;
+      background-image: linear-gradient(
+        to right,
+        #{$brand-secondary} 0,
+        #{$brand-secondary} calc(100% - #{$icon-size-with-padding} - 1px),
+        #{$body-background} calc(100% - #{$icon-size-with-padding}),
+        #{$body-background} 100%
+      );
 
-      @include breakpoint(large) {
+      &::after {
+        background: $body-background;
+        content: "";
+        clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% calc(100% + 1px), 0 50%);
         display: block;
-        font-size: rem-calc(100);
-        margin-left: $line-height;
+        position: absolute;
+        right: calc(#{$icon-size-with-padding} - #{$rounding-error});
+        top: 0;
+        height: 100%;
+        width: $polygon-size;
       }
     }
 
+    &::before {
+      top: -$border-width;
+      height: calc(100% + #{$border-width * 2});
+    }
+
     h1 {
-      @include brand-background($brand-secondary);
-      @include background-till-left-of-screen;
+      $heading-icon-size: $icon-size * 0.85;
+      @include has-fa-icon(building, regular);
       @include has-fa-icon(chart-pie, solid, after);
-      flex: 1;
       font-size: rem-calc(36);
-      padding: $line-height * 2 0;
 
       @include breakpoint(small) {
-        &::after {
+        &::after,
+        &::before {
           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},
-          100% -#{$border-width},
-          calc(100% - #{rem-calc(20)}) 50%,
-          100% calc(100% + #{$border-width}),
-          -100vw calc(100% + #{$border-width})
-        );
-        font-size: rem-calc(44);
+      @include breakpoint(medium) {
+        padding-right: $heading-icon-size * 2.5;
+
+        &::after {
+          display: block;
+          font-size: $heading-icon-size;
+          right: $heading-icon-size;
+        }
       }
 
-      &::before {
-        top: -$border-width;
-        height: calc(100% + 2 * #{$border-width});
+      @include breakpoint(large) {
+        font-size: rem-calc(44);
+
+        &::after {
+          right: $icon-size-with-padding + $polygon-size + $heading-icon-size / 2;
+        }
+
+        &::before {
+          color: $brand-secondary;
+          display: block;
+          font-size: $icon-size;
+          right: $padding-right;
+        }
       }
 
       span {
diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss
index 445e8e6f0..fecb67d2c 100644
--- a/app/assets/stylesheets/mixins/layouts.scss
+++ b/app/assets/stylesheets/mixins/layouts.scss
@@ -87,7 +87,7 @@
   position: relative;
 
   &::before {
-    background: inherit;
+    background-color: inherit;
     content: "";
     height: 100%;
     position: absolute;