updates to lookup and damage.

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -4,20 +4,15 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div
-            class="container-fluid fade-on-route-transition replace-options-question">
-            <div class="row justify-content-center">
-                <div class="col-md-6 px-0 px-md-2">
-                    <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                </div>
+        <div class="fade-on-route-transition replace-options-question">
+            <div class="justify-content-center">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <vehicleBanner
-                        class="mb-4"
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
-                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+            <div class="iss-heritage-container-width">
+                <div class="vehicle-damage-container iss-heritage-content-container-width">
+                    <siteSubHeader
+                        cmsWidgetName="SiteSubHeaderWidget"
+                        class="mt-4" />
                     <alert
                         v-if="shouldDisplayVehicleChangeAlert"
                         ref="vehicleChangeAlert"
@@ -25,71 +20,71 @@
                         cmsWidgetName="VehicleChangeAlert"
                         alertClass="alert-warning"
                         :isDismissible="false" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <damageLocationQuestion
-                        ref="damageLocation"
-                        v-model="selectedDamageLocations"
-                        cmsWidgetName="DamageLocationQuestion"
-                        groupName="DamageLocationQuestion" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <windshieldOptions
-                        ref="windshieldOptions"
-                        v-model="selectedWindshieldOptions"
-                        :hasRepairReplaceConflict="hasRepairReplaceConflict"
-                        :hasSplitSingleConflict="hasSplitSingleConflict"
-                        :selectedDamageLocations="selectedDamageLocations" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <alert
-                        v-if="hasRepairReplaceConflict"
-                        class="my-5"
-                        cmsWidgetName="HasReplacementConflict"
-                        alertClass="alert-danger"
-                        :isDismissible="false" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <sideDoorOptions
-                        v-show="!hasRepairReplaceConflict"
-                        ref="sideDoorOptions"
-                        v-model="sideDoorOptionsData"
-                        cmsWidgetName="SideDoorSideQuestion"
-                        groupName="SideDoorSideQuestion"
-                        :selectedDamageLocations="selectedDamageLocations" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <replaceOptionsQuestion
-                        ref="backGlassOptions"
-                        v-model="selectedRearReplaceOptions"
-                        cmsWidgetName="RearReplaceOptionsQuestion"
-                        :isAvailable="
-                            isRearWindowDamageLocation &&
-                            !hasRepairReplaceConflict
-                        "
-                        groupName="BackGlassReplaceOptionsQuestion"
-                        validationRules="replace-options-required" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <site-footer
-                        ref="siteFooter"
-                        class="mt-5"
-                        cmsWidgetName="SiteFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
-                        @backClicked="navigateBack"
-                        @forwardClicked="forwardButtonAction" />
+                    <div class="justify-content-center">
+                        <div class="vehicle-damage-question-container">
+                            <damageLocationQuestion
+                                ref="damageLocation"
+                                v-model="selectedDamageLocations"
+                                cmsWidgetName="DamageLocationQuestion"
+                                groupName="DamageLocationQuestion" />
+                        </div>
+                    </div>
+                    <div class="justify-content-center">
+                        <div class="vehicle-damage-question-container">
+                            <windshieldOptions
+                                ref="windshieldOptions"
+                                v-model="selectedWindshieldOptions"
+                                :hasRepairReplaceConflict="hasRepairReplaceConflict"
+                                :hasSplitSingleConflict="hasSplitSingleConflict"
+                                :selectedDamageLocations="selectedDamageLocations" />
+                        </div>
+                    </div>
+                    <div class="justify-content-center">
+                        <div class="vehicle-damage-question-container">
+                            <alert
+                                v-if="hasRepairReplaceConflict"
+                                class="my-5"
+                                cmsWidgetName="HasReplacementConflict"
+                                alertClass="alert-danger"
+                                :isDismissible="false" />
+                        </div>
+                    </div>
+                    <div class="justify-content-center">
+                        <div class="vehicle-damage-question-container">
+                            <sideDoorOptions
+                                v-show="!hasRepairReplaceConflict"
+                                ref="sideDoorOptions"
+                                v-model="sideDoorOptionsData"
+                                cmsWidgetName="SideDoorSideQuestion"
+                                groupName="SideDoorSideQuestion"
+                                :selectedDamageLocations="selectedDamageLocations" />
+                        </div>
+                    </div>
+                    <div class="justify-content-center">
+                        <div class="vehicle-damage-question-container">
+                            <replaceOptionsQuestion
+                                ref="backGlassOptions"
+                                v-model="selectedRearReplaceOptions"
+                                cmsWidgetName="RearReplaceOptionsQuestion"
+                                :isAvailable="
+                                    isRearWindowDamageLocation &&
+                                    !hasRepairReplaceConflict
+                                "
+                                groupName="BackGlassReplaceOptionsQuestion"
+                                validationRules="replace-options-required" />
+                        </div>
+                    </div>
+                    <div class="justify-content-center">
+                        <div class="vehicle-damage-question-container">
+                            <site-footer
+                                ref="siteFooter"
+                                class="mt-5"
+                                cmsWidgetName="SiteFooterWidget"
+                                :isForwardActionDisabled="!meta.valid"
+                                @backClicked="navigateBack"
+                                @forwardClicked="forwardButtonAction" />
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -100,7 +95,6 @@
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import sideDoorOptions from '@/layouts/vehicle-damage/side-door-options/side-door-options.vue';
 import damageLocationQuestion from '@/layouts/vehicle-damage/damage-location-question/damage-location-question.vue';
@@ -133,7 +127,6 @@ export default {
     components: {
         siteHeader,
         siteFooter,
-        vehicleBanner,
         siteSubHeader,
         sideDoorOptions,
         damageLocationQuestion,
@@ -500,18 +493,21 @@ export default {
 </script>
 
 <style lang="scss">
-.replace-options-question {
-    .row {
-        margin-top: 0;
-        .col-12 {
-            margin: 0 0 .5rem 0;
-            &:last-child {
-                margin-bottom: 0;
-            }
+.iss-heritage-container-width {
+    .vehicle-damage-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
+
+        .question-text {
+            margin-top: 0; //would need deep is changed to scoped. Was already not scoped.
         }
     }
+}
+
+.replace-options-question {
     .question-text {
-        margin: 0;
         span {
             padding: 1rem 0;
             text-align: center;

src/layouts/vehicle-lookup/vehicle-lookup.vue

@@ -1,41 +1,34 @@
 <template>
     <Form
-@submit="onSubmit"
-@invalidSubmit="onInvalidSubmit">
-        <div class="container-fluid fade-on-route-transition">
-            <div class="row justify-content-center">
-                <div class="col-md-6 px-0 px-md-2">
-                    <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                </div>
+        @submit="onSubmit"
+        @invalidSubmit="onInvalidSubmit">
+        <div class="fade-on-route-transition">
+            <div class="justify-content-center">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <div class="select-car-form rounded">
-                        <VehicleBanner
-                            class="mt-2 mb-4"
-                            cmsWidgetName="VehicleBannerWidget"
-                            :displayGenericVehicleImage="false" />
-                        <SiteSubHeader
-                            cmsWidgetName="SiteSubHeaderWidget"
-                            class="mb-2"
-                            subHeaderMarginClasses="mt-1" />
-                        <VinLookupMethods
-                            ref="VinLookupMethods"
-                            v-model="selectedVinLookupMethod"
-                            cmsWidgetName="VINLookupMethod"
-                            groupName="VinLookupMethods" />
-                        <SiteFooter
-                            cmsWidgetName="SiteFooterWidget"
-                            :isForwardActionDisabled="isForwardActionDisabled"
-                            class="mt-5"
-                            @backClicked="navigateBack"
-                            @forwardClicked="forwardButtonAction" />
-                    </div>
+            <div class="iss-heritage-container-width">
+                <div class="vehicle-lookup-container iss-heritage-content-container-width">
+                    <SiteSubHeader
+                        cmsWidgetName="SiteSubHeaderWidget"
+                        class="mt-4"
+                        subHeaderMarginClasses="mt-1" />
+                    <VinLookupMethods
+                        ref="VinLookupMethods"
+                        v-model="selectedVinLookupMethod"
+                        cmsWidgetName="VINLookupMethod"
+                        groupName="VinLookupMethods" />
+                    <SiteFooter
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="isForwardActionDisabled"
+                        class="mt-5"
+                        @backClicked="navigateBack"
+                        @forwardClicked="forwardButtonAction" />
                 </div>
             </div>
         </div>
     </Form>
 </template>
+
 <script>
 // Import Supporting Files
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
@@ -46,9 +39,8 @@ import vinLookupMethodSelections from '@/constants/vin-lookup-methods';
 
 // Import Component
 import SiteFooter from '@/iss-components/site-footer/site-footer.vue';
-import SiteHeader from '@/iss-components/site-header/site-header.vue';
+import siteHeader from '@/iss-components/site-header/site-header.vue';
 import SiteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import VinLookupMethods from '@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue';
 
 export default {
@@ -57,9 +49,8 @@ export default {
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
         SiteFooter,
-        SiteHeader,
+        siteHeader,
         SiteSubHeader,
-        VehicleBanner,
         VinLookupMethods
     },
     mixins: [BaseFormMixin],
@@ -123,3 +114,15 @@ export default {
     }
 };
 </script>
+
+<style lang="scss" scoped>
+.iss-heritage-container-width {
+    .vehicle-lookup-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
+    }
+}
+
+</style>

src/styles/common-styles.scss

@@ -128,6 +128,18 @@ body {
 }
 
 #app {
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+
+    >form {
+        flex: 1 0 auto;
+    }
+
+    >.footer-menu-container {
+        flex: 0 0 auto;
+    }
+
     @include media-breakpoint-up(xs) {
         overflow: auto;
     }