From c5162483f423213aed030c0f62ddd401f1f4f10a Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 19 Sep 2023 14:33:44 -0400
Subject: [PATCH] WIP grid and style updates.

---
 src/layouts/address-lookup/address-lookup.vue    |  6 ++----
 .../customer-details/customer-details.vue        |  6 ++----
 src/layouts/estimate/estimate.vue                |  6 ++----
 .../license-plate-lookup.vue                     |  6 ++----
 src/layouts/quote/quote.vue                      |  6 ++----
 src/layouts/review/review.vue                    |  6 ++----
 src/layouts/schedule/schedule.vue                |  6 ++----
 .../service-location/service-location.vue        |  6 ++----
 src/layouts/vehicle-damage/vehicle-damage.vue    | 16 ++++++++++++----
 src/layouts/vehicle-parts/vehicle-parts.vue      | 16 ++++++++++++----
 src/layouts/vehicle/vehicle.vue                  |  6 ++----
 src/layouts/vin-lookup/vin-lookup.vue            |  6 ++----
 12 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index faae41388..34b111d15 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -7,9 +7,8 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
-            <div class="row">
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
-                <div class="col-md-8 col-lg-6">
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
 
                     <vehicleBanner
                     cmsWidgetName="VehicleBannerWidget"
@@ -90,7 +89,6 @@
                     :isForwardActionDisabled="!meta.valid" />
 
                 </div>
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index ebdd4c7a6..03de9ff97 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -6,9 +6,8 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row">
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
-                <div class="col-md-8 col-lg-6">
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
                     <textboxQuestion
                         class="mb-4"
@@ -60,7 +59,6 @@
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index d6308f444..f27f833a0 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -7,9 +7,8 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row">
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
-                <div class="col-md-8 col-lg-6">
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div v-if="!skipVin">
@@ -80,7 +79,6 @@
                             @ForwardClicked="forwardButtonAction" />
                     </div>
                 </div>
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index c9e3d248e..31ca3fec7 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -6,9 +6,8 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row">
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
-                <div class="col-md-8 col-lg-6">
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
@@ -85,7 +84,6 @@
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 357bd7c14..46f573144 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -7,9 +7,8 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row">
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
-                <div class="col-md-8 col-lg-6">
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
@@ -52,7 +51,6 @@
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index c7112fb00..639fd0fd5 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -7,9 +7,8 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row">
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
-                <div class="col-md-8 col-lg-6">
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
@@ -101,7 +100,6 @@
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 59d8e932a..f276ea1cd 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -7,9 +7,8 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row">
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
-                <div class="col-md-8 col-lg-6">
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
                     <template v-if="ChangeShopLink.length">
                         <textBlock
@@ -57,7 +56,6 @@
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index aed00e644..f93a1d5c8 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -7,9 +7,8 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row">
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
-                <div class="col-md-8 col-lg-6">
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
 
                     <serviceZipModalQuestion
@@ -101,7 +100,6 @@
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index e5583d986..a528523cf 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -6,9 +6,8 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row">
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
-                <div class="col-md-8 col-lg-6">
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                     cmsWidgetName="VehicleBannerWidget"
                     :displayGenericVehicleImage="false" />
@@ -23,6 +22,11 @@
                     alertClass="alert-warning"
                     :isDismissible="false" />
 
+                </div>
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-8 col-xl-6">
+
                     <damageLocationQuestion
                     ref="damageLocation"
                     cmsWidgetName="DamageLocationQuestion"
@@ -59,6 +63,11 @@
                     groupName="BackGlassReplaceOptionsQuestion"
                     validationRules="replace-options-required" />
 
+                </div>
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+
                     <navbar
                     cmsWidgetName="FunnelFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
@@ -66,7 +75,6 @@
                     @back-clicked="backButtonAction"
                     @ForwardClicked="forwardButtonAction" />
                 </div>
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 5ad44d3e0..b5bf2cec8 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -8,9 +8,8 @@
                         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                     </div>
                 </div>
-                <div class="row">
-                    <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
-                    <div class="col-md-8 col-lg-6">
+                <div class="row justify-content-md-center">
+                    <div class="col-md-6 col-lg-4">
                         <vehicleBanner
                             ref="vehicleBanner"
                             cmsWidgetName="VehicleBannerWidget"
@@ -50,7 +49,6 @@
                             @ForwardClicked="forwardButtonAction" />
                     </div>
                 </div>
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>
@@ -241,3 +239,13 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+    .vehicle-parts {
+        label {
+            &.list-card {
+                height: auto;
+            }
+        }
+    }
+</style>
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 8743ef284..0649fb651 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -6,9 +6,8 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row">
-                <div class="d-none d-md-block col-md-3 col-lg-4">&nbsp;</div>
-                <div class="col-md-6 col-lg-4">
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
                     <vehicleQuestion
                         ref="vehicleYearQuestion"
@@ -65,7 +64,6 @@
                         :isForwardActionDisabled="!meta.valid"
                         ref="navbar" />
                 </div>
-                <div class="d-none d-md-block col-md-3 col-lg-4">&nbsp;</div>
             </div>
         </div>
     </Form>
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index fe25fa403..8ab84aacb 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -7,9 +7,8 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row">
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
-                <div class="col-md-8 col-lg-6">
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
@@ -121,7 +120,6 @@
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
-                <div class="d-none d-md-block col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>