From 29acac17b29d403f5f7272e87f1e57b733b853c2 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 17 Apr 2024 10:33:02 -0400
Subject: [PATCH] WIP Update question-page-layout

---
 .../questions-page-layout.vue                 | 108 +++++++++---------
 1 file changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/iss-components/questions-page-layout/questions-page-layout.vue b/src/iss-components/questions-page-layout/questions-page-layout.vue
index 44d46440..999c3385 100644
--- a/src/iss-components/questions-page-layout/questions-page-layout.vue
+++ b/src/iss-components/questions-page-layout/questions-page-layout.vue
@@ -1,51 +1,45 @@
 <template>
-    <div :class="`page-container-grouped-styles questions-page`">
-        <div class="fade-on-route-transition position-relative">
-            <loadingModal
-                ref="loadingModal"
-                :textSlides="loadingText" />
-            <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            <div class="select-car">
-                <div class="container-fluid pb-2">
-                    <div class="row px-3">
-                        <div class="col">
-                            <div class="select-car-form rounded">
-                                <vehicleBanner
-                                    class="mt-2 mb-4"
-                                    cmsWidgetName="VehicleBannerWidget"
-                                    :displayGenericVehicleImage="false" />
-                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-                                <alert
-                                ref="alertFewMoreQuestions"
-                                cmsWidgetName="alertWidget"
-                                alertClass="alert-warning"
-                                :manualHeadline="alertFewMoreQuestionsHeader"
-                                :manualCopy="alertFewMoreQuestionsCopy"
-                                :isDismissible="false"
-                                class="mt-5" />
-                                <div
-                                    v-for="(questionsDatum, i) in questionsData"
-                                    :key="questionsDatum.key">
-                                    <questionChain
-                                        v-if="showThisQuestionChain(questionsDatum, i)"
-                                        ref="questionChain"
-                                        v-model="selectedAnswers[questionsDatum.answerKey]"
-                                        :questionData="questionsDatum.questions"
-                                        :index="i"
-                                        :answerKey="questionsDatum.answerKey"
-                                        :validationRules="validationRules" />
-                                </div>
-                                <siteFooter
-                                    ref="siteFooter"
-                                    class="mt-5"
-                                    cmsWidgetName="SiteFooterWidget"
-                                    :isForwardActionDisabled="!isMetaValid"
-                                    @backClicked="handleBackButtonAction"
-                                    @ForwardClicked="handleForwardButtonAction" />
-                            </div>
-                        </div>
-                    </div>
+    <div class="container-fluid fade-on-route-transition">
+        <div class="row justify-content-center">
+            <div class="col-md-6 px-0 px-md-2">
+                <loadingModal ref="loadingModal" :textSlides="loadingText" />
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            </div>
+        </div>
+        <div class="row justify-content-center">
+            <div class="col-md-6 col-xl-4">
+                <vehicleBanner
+                    class="mt-2 mb-4"
+                    cmsWidgetName="VehicleBannerWidget"
+                    :displayGenericVehicleImage="false" />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                <alert
+                    ref="alertFewMoreQuestions"
+                    cmsWidgetName="alertWidget"
+                    alertClass="alert-warning"
+                    :manualHeadline="alertFewMoreQuestionsHeader"
+                    :manualCopy="alertFewMoreQuestionsCopy"
+                    :isDismissible="false"
+                    class="mt-5" />
+                <div
+                    v-for="(questionsDatum, i) in questionsData"
+                    :key="questionsDatum.key">
+                    <questionChain
+                        v-if="showThisQuestionChain(questionsDatum, i)"
+                        ref="questionChain"
+                        v-model="selectedAnswers[questionsDatum.answerKey]"
+                        :questionData="questionsDatum.questions"
+                        :index="i"
+                        :answerKey="questionsDatum.answerKey"
+                        :validationRules="validationRules" />
                 </div>
+                <siteFooter
+                    ref="siteFooter"
+                    class="mt-5"
+                    cmsWidgetName="SiteFooterWidget"
+                    :isForwardActionDisabled="!isMetaValid"
+                    @backClicked="handleBackButtonAction"
+                    @ForwardClicked="handleForwardButtonAction" />
             </div>
         </div>
     </div>
@@ -70,7 +64,7 @@ export default {
         questionChain,
         siteSubHeader,
         siteFooter,
-        loadingModal
+        loadingModal,
     },
     props: {
         isMetaValid: Boolean,
@@ -80,7 +74,7 @@ export default {
         validationRules: String,
         modelValue: Object,
         loadingText: Array,
-        index: Number
+        index: Number,
     },
     emits: ['update:modelValue', 'forwardButtonAction', 'back-click'],
     computed: {
@@ -90,16 +84,22 @@ export default {
             },
             set(newValue) {
                 this.$emit('update:modelValue', newValue);
-            }
-        }
+            },
+        },
     },
     methods: {
         showThisQuestionChain(glass, i) {
             // return false if no questions or if suppressed
-            if (!glass.questions || glass.questions?.length < 1 || glass.isSuppressedPart) {
+            if (
+                !glass.questions ||
+                glass.questions?.length < 1 ||
+                glass.isSuppressedPart
+            ) {
                 return false;
             }
-            return this.index === i || glass.answerData?.answerResult?.length > 0;
+            return (
+                this.index === i || glass.answerData?.answerResult?.length > 0
+            );
         },
         handleForwardButtonAction() {
             this.$emit('forwardButtonAction');
@@ -109,8 +109,8 @@ export default {
         },
         showLoadingModal() {
             this.$refs.loadingModal.showModal();
-        }
-    }
+        },
+    },
 };
 </script>