From 4af8f07a29393b05f93ddc6938bf33549dd59a84 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 28 Sep 2023 15:16:28 -0400
Subject: [PATCH] Set header to responsive 6-columns. Position alert relative
 on page.

---
 .../funnel-header/funnel-header.vue           |  7 ++----
 .../funnel-header/menu-modal/menu-modal.vue   | 24 +++++++++----------
 .../questions-page-layout.vue                 |  4 ++--
 src/layouts/address-lookup/address-lookup.vue |  4 ++--
 .../address-vehicles/address-vehicles.vue     |  4 ++--
 src/layouts/estimate/estimate.vue             |  4 ++--
 .../license-plate-lookup.vue                  |  4 ++--
 src/layouts/quote/quote.vue                   |  4 ++--
 src/layouts/schedule/schedule.vue             |  4 ++--
 .../service-location/service-location.vue     |  4 ++--
 src/layouts/vehicle-damage/vehicle-damage.vue |  4 ++--
 src/layouts/vehicle-parts/vehicle-parts.vue   |  4 ++--
 src/layouts/vehicle/vehicle.vue               |  5 ++--
 src/layouts/vin-lookup/vin-lookup.vue         |  4 ++--
 src/styles/common-styles.scss                 |  1 +
 15 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index acfacd709..b5775e649 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -7,7 +7,7 @@
     </div>
     <alert
         v-if="displayGlobalAlert"
-        class="position-absolute rounded-0 w-100 border-0 shadow-sm"
+        class="rounded-0 w-100 border-0 shadow-sm"
         cmsWidgetName="GlobalAlert"
         :manualHeadline="globalAlertMessage.messageHeadline"
         :manualCopy="globalAlertMessage.messageCopy"
@@ -63,14 +63,11 @@ export default {
 
 <style lang="scss" scoped>
 .funnel-header {
+    position: relative;
     padding: 0.97rem 0;
 }
 
 .logo-image {
     max-width: 78px;
 }
-.alert {
-    left: 0;
-    top: 72px;
-}
 </style>
diff --git a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
index aac390739..f9660966f 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -1,4 +1,16 @@
 <template>
+    <div class="menu-modal-container">
+        <button
+            class="menu-button"
+            type="button"
+            :class="[isActive ? 'active' : '']"
+            @click="toggleModal"
+            aria-label="Hamburger Menu (modal window)">
+            <div class="bar1"></div>
+            <div class="bar2"></div>
+            <div class="bar3"></div>
+        </button>
+    </div>
     <div class="menu-modal-container">
         <button
             class="menu-button"
@@ -20,18 +32,6 @@
         aria-labelledby="footerModalLabel"
         aria-hidden="true"
         v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }">
-        <div class="menu-modal-container">
-            <button
-                class="menu-button"
-                type="button"
-                :class="[isActive ? 'active' : '']"
-                @click="toggleModal"
-                aria-label="Hamburger Menu (modal window)">
-                <div class="bar1"></div>
-                <div class="bar2"></div>
-                <div class="bar3"></div>
-            </button>
-        </div>
         <div class="modal-dialog modal-fullscreen">
             <div class="modal-content">
                 <div class="modal-header visually-hidden">
diff --git a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
index 589a7c938..29b92f2b8 100644
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@@ -2,8 +2,8 @@
     <div :class="`questions-page`">
         <loadingModal ref="loadingModal" />
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 3b75d7a73..08833dc2c 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -6,8 +6,8 @@
         v-slot="{ meta }"
         autocomplete="off">
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 62f8b08f9..eb6a6eccd 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -1,8 +1,8 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index b965f8294..4fc6a1bc1 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -2,8 +2,8 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 146b618c6..c72ca9f52 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,8 +1,8 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 160e74389..c61394f3a 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -2,8 +2,8 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index a9fcadce8..fccef82e1 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -2,8 +2,8 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 52ce60c67..b17d7bb26 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -2,8 +2,8 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 51e52f0e3..e6d4c01f8 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,8 +1,8 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="container-fluid page-container-grouped-styles vehicle-damage">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index d2a20ac8e..855394ce3 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -3,8 +3,8 @@
         <div class="vehicle-parts small-question-text">
             <loadingModal ref="loadingModal" />
             <div class="container-fluid page-container-grouped-styles">
-                <div class="row">
-                    <div class="col">
+                <div class="row justify-content-center">
+                    <div class="col-md-6">
                         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                     </div>
                 </div>
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 494027bb9..429f6cdfa 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -1,8 +1,8 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="container-fluid">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
@@ -48,7 +48,6 @@
                         validationRules="style-required"
                         placeHolderText="Select style"
                         inputId="styleQuestionField" />
-                    <div class="col-md-3">&nbsp;</div>
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="displayGeneric"
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index cbadaed78..db6070c26 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -2,8 +2,8 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 406b3ee53..bb04e2298 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -7,6 +7,7 @@ body {
     .container-fluid {
         max-width: 1400px;
         padding: 0 1.5rem;
+        position: relative;
         .prevent-squish {
             overflow-x: unset;
         }