From 68e0929c7d9247e3b722038f7e686e3e1a77a5d3 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 18 Sep 2023 17:01:53 -0400
Subject: [PATCH] WIP format vehicle-parts.

---
 src/layouts/vehicle-parts/vehicle-parts.vue | 76 ++++++++++++---------
 1 file changed, 43 insertions(+), 33 deletions(-)

diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 2c26a7d6c..c34223b88 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,42 +1,52 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <div class="page-container-grouped-styles vehicle-parts small-question-text">
+        <div class="vehicle-parts small-question-text">
             <loadingModal ref="loadingModal" />
-            <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
-            <vehicleBanner
-                ref="vehicleBanner"
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-            <funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
-            <div class="fade-on-route-transition sub-container make-tall">
-                <div class="prevent-squish my-5">
-                    <div class="row">
-                        <div class="col pb-0">
-                            <alert
-                                class="rounded border-0 shadow-sm"
-                                alertClass="alert-warning"
-                                cmsWidgetName="AlertWidget"
-                                :isDismissible="false" />
-                        </div>
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col">
+                        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                     </div>
                 </div>
-                <div v-for="(item, i) in PartsOrQuestions" :key="i">
-                    <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
-                    <hr v-if="i > 0" />
-                    <glassPartQuestion
-                        :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
-                        v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
-                        :glassLocation="item.glassLocation"
-                        :glassName="item.glassName"
-                        :colorAnswers="item.colorAnswers"
-                        :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
+                <div class="row">
+                    <div class="col-md-2 col-lg-3">&nbsp;</div>
+                    <div class="col-md-8 col-lg-6">
+                        <vehicleBanner
+                            ref="vehicleBanner"
+                            cmsWidgetName="VehicleBannerWidget"
+                            :displayGenericVehicleImage="false" />
+                        <funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
+                            <div class="prevent-squish my-5">
+                                <div class="row">
+                                    <div class="col pb-0">
+                                        <alert
+                                            class="rounded border-0 shadow-sm"
+                                            alertClass="alert-warning"
+                                            cmsWidgetName="AlertWidget"
+                                            :isDismissible="false" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-for="(item, i) in PartsOrQuestions" :key="i">
+                                <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+                                <hr v-if="i > 0" />
+                                <glassPartQuestion
+                                    :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
+                                    v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
+                                    :glassLocation="item.glassLocation"
+                                    :glassName="item.glassName"
+                                    :colorAnswers="item.colorAnswers"
+                                    :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
+                            </div>
+                            <navbar
+                                cmsWidgetName="FunnelFooterWidget"
+                                ref="navbar"
+                                :isForwardActionDisabled="isForwardActionDisabled"
+                                @back-clicked="navigateBack"
+                                @ForwardClicked="forwardButtonAction" />
+                    </div>
                 </div>
-                <navbar
-                    cmsWidgetName="FunnelFooterWidget"
-                    ref="navbar"
-                    :isForwardActionDisabled="isForwardActionDisabled"
-                    @back-clicked="navigateBack"
-                    @ForwardClicked="forwardButtonAction" />
+                <div class="col-md-2 col-lg-3">&nbsp;</div>
             </div>
         </div>
     </Form>