From e7e343e2e84eb87a35d5b4b20b9b3663bd2ccbcc Mon Sep 17 00:00:00 2001
From: Nick Downing <nick@ndcode.org>
Date: Tue, 25 Jan 2022 14:35:30 +1100
Subject: [PATCH] Make tick, cross and spinner have no height, so they don't
 affect card header

---
 css/bootstrap/_custom.scss        | 14 +++++++++
 my_account/sign_up/index.html.jst | 47 ++++++++++++++++---------------
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss
index ff8f136..0f93c88 100644
--- a/css/bootstrap/_custom.scss
+++ b/css/bootstrap/_custom.scss
@@ -12,6 +12,20 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
   padding-left: calc(100vw - 100%);
 }
 
+// needed for svg icons inside card headers
+// creates an inline element with correct width but no height
+// the svg is positioned at an arbitrary position within this
+.icon32-outer {
+  display: inline-block;
+  position: relative;
+  width: calc(32px + 1rem);
+  height: 0;
+}
+.icon32-inner {
+  position: absolute;
+  top: -22px;
+}
+
 // apply this to svg, see _svg/icon_search.svg
 .svg-icon {
   display: inline-block;
diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst
index 4dfacc3..35d13eb 100644
--- a/my_account/sign_up/index.html.jst
+++ b/my_account/sign_up/index.html.jst
@@ -41,17 +41,15 @@ return async env => {
       div.accordion#accordion(role="tablist" aria-multiselectable="true") {
         div.card#card-1 {
           div.card-header#card-1-heading(role="tab") {
-            span#card-1-tick(hidden) {
-              span.icon-color.pr-3 {_out.push(icon_tick)}
+            span.icon32-outer#card-1-tick(hidden) {
+              span.icon32-inner {_out.push(icon_tick)}
             }
-            span#card-1-cross(hidden) {
-              span.icon-color.pr-3 {_out.push(icon_cross)}
+            span.icon32-outer#card-1-cross(hidden) {
+              span.icon32-inner {_out.push(icon_cross)}
             }
-            span#card-1-spinner(hidden) {
-              span.icon-color.pr-3 {
-                div.spinner-border(role="status") {
-                  span.sr-only {'Loading...'}
-                }
+            span.icon32-outer#card-1-spinner(hidden) {
+              span.icon32-inner {
+                div.spinner-border(role="status") {}
               }
             }
             a.h5(data-toggle="collapse" data-parent="#accordion" href="#card-1-collapse" aria-expanded="true" aria-controls="card-1-collapse") {
@@ -132,17 +130,15 @@ return async env => {
         }
         div.card#card-2 {
           div.card-header#card-2-heading(role="tab") {
-            span#card-2-tick(hidden) {
-              span.icon-color.pr-3 {_out.push(icon_tick)}
+            span.icon32-outer#card-2-tick(hidden) {
+              span.icon32-inner {_out.push(icon_tick)}
             }
-            span#card-2-cross(hidden) {
-              span.icon-color.pr-3 {_out.push(icon_cross)}
+            span.icon32-outer#card-2-cross(hidden) {
+              span.icon32-inner {_out.push(icon_cross)}
             }
-            span#card-2-spinner(hidden) {
-              span.icon-color.pr-3 {
-                div.spinner-border(role="status") {
-                  span.sr-only {'Loading...'}
-                }
+            span.icon32-outer#card-2-spinner(hidden) {
+              span.icon32-inner {
+                div.spinner-border(role="status") {}
               }
             }
             a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#card-2-collapse" aria-expanded="false" aria-controls="card-2-collapse") {
@@ -199,9 +195,15 @@ return async env => {
               document.getElementById('contact-me').checked &&
               document.getElementById('email').value.length === 0 &&
               document.getElementById('verification-code').value.length === 0
+          document.getElementById('card-1-tick').hidden = true
+          document.getElementById('card-1-cross').hidden = true
+          document.getElementById('card-1-spinner').hidden = true
           document.getElementById('card-1-message').hidden = true
 
           document.getElementById('card-2-resend-email').disabled = true
+          document.getElementById('card-2-tick').hidden = true
+          document.getElementById('card-2-cross').hidden = true
+          document.getElementById('card-2-spinner').hidden = true
           document.getElementById('card-2-message').hidden = true
         }
 
@@ -210,8 +212,8 @@ return async env => {
           document.getElementById('card-1-tick').hidden = true
           document.getElementById('card-1-cross').hidden = true
           document.getElementById('card-1-spinner').hidden = true
-          document.getElementById('card-1-message').hidden = true
-          document.getElementById('card-1').scrollIntoView()
+          // the below causes an ugly flicker, so just keep the message
+          //document.getElementById('card-1-message').hidden = true
 
           if (!document.getElementById('form').checkValidity()) {
             document.getElementById('form').classList.add('was-validated');
@@ -258,6 +260,7 @@ return async env => {
           document.getElementById('card-1-message').hidden = false
 
           document.getElementById('card-2-resend-email').disabled = false
+          document.getElementById('card-2').scrollIntoView()
           return true
         }
 
@@ -265,8 +268,8 @@ return async env => {
           document.getElementById('card-2-tick').hidden = true
           document.getElementById('card-2-cross').hidden = true
           document.getElementById('card-2-spinner').hidden = false
-          document.getElementById('card-2-message').hidden = true
-          document.getElementById('card-2').scrollIntoView()
+          // the below causes an ugly flicker, so just keep the message
+          //document.getElementById('card-2-message').hidden = true
 
           try {
             await api_call(
-- 
2.34.1