jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #233 from Safelite/SSR-348-site-header-unstick-2

Browse source 
Ssr 348 site header unstick 2
This commit is contained in:
bmauger 2023-04-10 15:08:27 -04:00 committed by GitHub
commit 785a75fa62
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 2250 additions and 2097 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/digital-components/button-question/button-question.spec.js
View file

@ -2,22 +2,6 @@ import { shallowMount } from "@vue/test-utils";
import buttonQuestion from "@/digital-components/button-question/button-question"; import buttonQuestion from "@/digital-components/button-question/button-question";
import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { getMountOptions } from "@/helpers/unit-test-helper.js";
describe("buttonQuestion.vue", () => {
it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
// Act
const wrapper = shallowMount(buttonQuestion, {
propsData: {
isOverflowScrollable: true,
groupName: "group-name",
},
});
// Assert
const fieldSet = wrapper.find("fieldset");
expect(fieldSet.classes()).toContain("overflow-scroll");
});
});
describe("buttonQuestion.vue", () => { describe("buttonQuestion.vue", () => {
it("Fieldset classes should contain row if button type is listCard", () => { it("Fieldset classes should contain row if button type is listCard", () => {
// Act // Act

21
src/digital-components/button-question/button-question.vue
View file

@ -13,7 +13,6 @@
<fieldset <fieldset
class="w-100" class="w-100"
:aria-required="isRequired" :aria-required="isRequired"
:class="getFieldSetClasses"
:role="isMultiSelect ? 'group' : 'radiogroup'" :role="isMultiSelect ? 'group' : 'radiogroup'"
:aria-labelledby="formatString(groupName)"> :aria-labelledby="formatString(groupName)">
<legend <legend
@ -234,16 +233,16 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.button-question-overflow { // .button-question-overflow {
height: calc(100vh - 274px); // height: calc(100vh - 274px);
//
.overflow-scroll { // .overflow-scroll {
// Height will be determined by overall height of content above list // // Height will be determined by overall height of content above list
height: calc(100% - 400px); // height: calc(100% - 400px);
overflow-x: hidden !important; // overflow-x: hidden !important;
-webkit-overflow-scrolling: touch; // -webkit-overflow-scrolling: touch;
} // }
} // }
.button-question { .button-question {
color: $black; color: $black;

29
src/iss-components/questions-page-layout/questions-page-layout.vue
View file

@ -1,14 +1,18 @@
<template> <template>
<div :class="`page-container-grouped-styles questions-page`"> <div :class="`page-container-grouped-styles questions-page`">
<div class="fade-on-route-transition position-relative">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <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="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<alert <alert
ref="alertFewMoreQuestions" ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget" cmsWidgetName="alertWidget"
class="mt-5"
alertClass="alert-warning" alertClass="alert-warning"
:manualHeadline="alertFewMoreQuestionsHeader" :manualHeadline="alertFewMoreQuestionsHeader"
:manualCopy="alertFewMoreQuestionsCopy" :manualCopy="alertFewMoreQuestionsCopy"
@ -31,6 +35,11 @@
@ForwardClicked="handleForwardButtonAction" /> @ForwardClicked="handleForwardButtonAction" />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
@ -94,10 +103,18 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.overflow-scroll { .fade-on-route-transition {
height: calc(100% - 180px); margin-bottom: 100px;
overflow-x: hidden !important; }
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
.questions-page { .questions-page {
.question-text { .question-text {

4
src/iss-components/site-header/menu-modal/menu-modal.vue
View file

@ -7,7 +7,7 @@
</button> </button>
</div> </div>
<!-- Modal --> <!-- Modal -->
<div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`"> <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }">
<div class="menu-modal-container"> <div class="menu-modal-container">
<button <button
class="menu-button" class="menu-button"
@ -79,7 +79,7 @@ export default {
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72; this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
this.isActive = true; this.isActive = true;
document.querySelector('.page-container-grouped-styles').scrollTo({ document.querySelector('.page-container-grouped-styles').scrollTo({
top: 0, behavior: 'smooth' top: 0, behavior: 'instant'
}); });
}, },
hide() { hide() {

37
src/layouts/address-lookup/address-lookup.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
ref="theForm"
v-slot="{ meta }"
autocomplete="off">
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" /> <div class="fade-on-route-transition position-relative">
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <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 <vehicleBanner
class="mb-3" class="mb-3"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
@ -57,6 +57,11 @@
:isForwardActionDisabled="!meta.valid" /> :isForwardActionDisabled="!meta.valid" />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
@ -347,11 +352,17 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.fade-on-route-transition {
.overflow-scroll { margin-bottom: 100px;
height: calc(100% - 180px); }
overflow-X: hidden !important; .page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
</style> </style>

48
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -1,14 +1,13 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit"
v-slot="{ meta }"
>
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<siteHeader <div class="fade-on-route-transition position-relative">
cmsWidgetName="SiteHeaderWidget" <siteHeader cmsWidgetName="SiteHeaderWidget" />
/> <div class="select-car">
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<textBlock <textBlock
cmsWidgetName="verifyingCoverageStatement" cmsWidgetName="verifyingCoverageStatement"
typeStyle="h5" typeStyle="h5"
@ -17,10 +16,7 @@
id="coverage-statement-text-block" id="coverage-statement-text-block"
/> />
<div> <div>
<p <p v-html="continueWithSchedulingBodyText" class="mt-0 small" ></p>
v-html="continueWithSchedulingBodyText"
class="mt-0 small" >
</p>
</div> </div>
<textBlock <textBlock
cmsWidgetName="whatHappensNextCopy" cmsWidgetName="whatHappensNextCopy"
@ -28,10 +24,7 @@
id="coverage-statement-text-block" id="coverage-statement-text-block"
/> />
<div> <div>
<p class="small" <p class="small" v-html="bodyText" ref="coverageStatementBodyText"></p>
v-html="bodyText"
ref="coverageStatementBodyText">
</p>
</div> </div>
<recalModal cmsWidgetName="RecalModal" /> <recalModal cmsWidgetName="RecalModal" />
<steeringText cmsWidgetName="MASteeringText" ></steeringText> <steeringText cmsWidgetName="MASteeringText" ></steeringText>
@ -44,6 +37,11 @@
/> />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
<script> <script>
@ -151,10 +149,18 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.overflow-scroll { .fade-on-route-transition {
height: calc(100% - 168px); margin-bottom: 100px;
overflow-X: hidden !important; }
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
ol { ol {
margin-left: -1rem; margin-left: -1rem;

39
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -1,15 +1,14 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
v-slot="{ meta }">
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<siteHeader cms-widget-name="SiteHeaderWidget" /> <div class="fade-on-route-transition position-relative">
<div class="fade-on-route-transition sub-container overflow-scroll mt-5 px-5"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner <div class="select-car">
class="mb-3" <div class="container-fluid pb-2">
cms-widget-name="VehicleBannerWidget" <div class="row px-3">
:display-generic-vehicle-image="false" /> <div class="col">
<div class="select-car-form rounded">
<vehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" /> <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
<alert <alert
ref="alertVinNotFound" ref="alertVinNotFound"
@ -61,6 +60,11 @@
ref="siteFooter" /> ref="siteFooter" />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
<script> <script>
@ -312,11 +316,18 @@ export default {
}; };
</script> </script>
<style> <style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.overflow-scroll { .modal-open {
height: calc(100% - 220px); .page-container-grouped-styles {
overflow-x: hidden !important; overflow: hidden;
}
} }
#license-plate-question-wrapper .form-test-error { #license-plate-question-wrapper .form-test-error {
/** /**

25
src/layouts/policy-holder-details/policy-holder-details.vue
View file

@ -1,12 +1,13 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" > <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="fade-on-route-transition px-5 overflow-scroll"> <div class="container-fluid pb-2">
<div class="row mt-4 px-3">
<div class="col">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
<addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/> <addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>
<div class="row mt-4 ">
<div class="col">
<textboxQuestion <textboxQuestion
inputId="firstNameField" inputId="firstNameField"
cmsWidgetName="PolicyholderFirstNameQuestion" cmsWidgetName="PolicyholderFirstNameQuestion"
@ -15,10 +16,6 @@
ref="policyHolderFirstName" ref="policyHolderFirstName"
disableAutoFill disableAutoFill
validationRules="first-name-required" /> validationRules="first-name-required" />
</div>
</div>
<div class="row mt-4 mb-2">
<div class="col">
<textboxQuestion <textboxQuestion
inputId="lastNameField" inputId="lastNameField"
cmsWidgetName="PolicyholderLastNameQuestion" cmsWidgetName="PolicyholderLastNameQuestion"
@ -38,6 +35,7 @@
/> />
</div> </div>
</div> </div>
</div>
</Form> </Form>
</template> </template>
<script> <script>
@ -137,9 +135,16 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.overflow-scroll { .fade-on-route-transition {
height: calc(100% - 168px); height: calc(100% - 120px);
overflow-X: hidden !important; overflow: scroll;
overflow-x: hidden;
}
.modal-open {
.fade-on-route-transition {
overflow: hidden;
}
} }
.alert.alert-warning .alert.alert-warning
{ {

36
src/layouts/provider-preference/provider-preference.vue
View file

@ -1,16 +1,19 @@
<template> <template>
<Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles overflow-auto"> <div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" /> <div class="select-car">
<div class="fade-on-route-transition sub-container make-tall overflow-scroller px-5"> <div class="container-fluid pb-2">
<div v-html="ProviderPreferenceHeaderText" class="text-center mb-5 modal-link" ></div> <div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<div v-html="ProviderPreferenceHeaderText" class="text-center mb-4 modal-link" ></div>
<div <div
v-html="ProviderPreferenceBodyText" v-html="ProviderPreferenceBodyText"
class="mt-0 body-text" class="mt-0 body-text"
></div> ></div>
<shoppreferenceModal cmsWidgetName="ShopPreferenceDrawer" /> <shoppreferenceModal cmsWidgetName="ShopPreferenceDrawer" />
<buttonQuestion <buttonQuestion
cmsWidgetName="ServiceLocationQuestion" cmsWidgetName="ServiceLocationQuestion"
:questionText="questionText" :questionText="questionText"
@ -29,6 +32,11 @@
/> />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
<script> <script>
@ -117,10 +125,18 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.overflow-scroller { .fade-on-route-transition {
height: calc(100% - 220px) !important; margin-bottom: 100px;
overflow-X: hidden !important; }
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
#sub-header span{ #sub-header span{
color: $black; color: $black;

34
src/layouts/service-location/service-location.vue
View file

@ -1,10 +1,13 @@
<template> <template>
<div> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }"> <div class="page-container-grouped-styles">
<div class="page-container-grouped-styles overflow-auto"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <div class="select-car">
<div class="fade-on-route-transition sub-container make-tall px-5"> <div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<p>Placeholder for service-location page</p> <p>Placeholder for service-location page</p>
<siteFooter <siteFooter
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
@ -15,8 +18,12 @@
/> />
</div> </div>
</div> </div>
</Form>
</div> </div>
</div>
</div>
</div>
</div>
</Form>
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
@ -69,3 +76,18 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

26
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -1,8 +1,11 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" > <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles vehicle-damage"> <div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <div class="container-fluid pb-2">
<div class="row mt-4 px-3">
<div class="col">
<alert <alert
ref="vehicleChangeAlert" ref="vehicleChangeAlert"
v-if="shouldDisplayVehicleChangeAlert" v-if="shouldDisplayVehicleChangeAlert"
@ -55,6 +58,9 @@
/> />
</div> </div>
</div> </div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
@ -472,10 +478,18 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss">
.overflow-scroll { <style lang="scss" scoped>
height: calc(100% - 180px); .fade-on-route-transition {
overflow-X: hidden !important; margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
</style> </style>

63
src/layouts/vehicle-lookup/vehicle-lookup.vue
View file

@ -1,33 +1,22 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit">
@submit="onSubmit" <div class="page-container-grouped-styles">
@invalid-submit="onInvalidSubmit" <div class="fade-on-route-transition position-relative">
> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="page-container-grouped-styles vehicle-lookup"> <div class="select-car">
<SiteHeader <div class="container-fluid pb-2">
cms-widget-name="SiteHeaderWidget" <div class="row px-3">
/> <div class="col">
<div class="fade-on-route-transition sub-container overflow-scroll container gx-0 px-5"> <div class="select-car-form rounded">
<VehicleBanner <VehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
class="mb-3" <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" />
cms-widget-name="VehicleBannerWidget" <VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
:display-generic-vehicle-image="false" <SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" />
/> </div>
<SiteSubHeader </div>
cms-widget-name="SiteSubHeaderWidget" </div>
/> </div>
<VinLookupMethods </div>
v-model="selectedVinLookupMethod"
cms-widget-name="VINLookupMethod"
group-name="VinLookupMethods"
ref="VinLookupMethods"
/>
<SiteFooter
cms-widget-name="SiteFooterWidget"
:is-forward-action-disabled="isForwardActionDisabled"
@back-clicked="backButtonAction"
@forward-clicked="forwardButtonAction"
/>
</div> </div>
</div> </div>
</Form> </Form>
@ -117,10 +106,18 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss">
.overflow-scroll { <style lang="scss" scoped>
height: calc(100% - 180px); .fade-on-route-transition {
overflow-X: hidden !important; margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
</style> </style>

43
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -1,24 +1,20 @@
<template> <template>
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles position-relative">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="container-fluid pb-2">
<div class="row">
<div class="col">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<siteSubHeader <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" @click-event="backButtonAction" />
cmsWidgetName="SiteSubHeaderWidget" <makeQuestion class="px-4" v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
:hasBackButton="true" <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
@click-event="backButtonAction" </div>
/> </div>
<div class="fade-on-route-transition"> </div>
<makeQuestion
class="fade-on-route-transition"
v-model="selectedMake"
ref="makeQuestion"
cmsWidgetName="VehicleMakeQuestion"
/>
</div> </div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div> </div>
</div> </div>
</div> </div>
@ -104,3 +100,18 @@
} }
}; };
</script> </script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

42
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -1,20 +1,20 @@
<template> <template>
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles position-relative">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="container-fluid pb-2">
<div class="row">
<div class="col">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<siteSubHeader <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
cmsWidgetName="SiteSubHeaderWidget" <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" class="px-4" />
:hasBackButton="true" <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
:backButtonAccessibleText="backButtonAccessibleText" </div>
@click-event="backButtonAction" </div>
/> </div>
<div class="fade-on-route-transition">
<modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
</div> </div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div> </div>
</div> </div>
</div> </div>
@ -109,3 +109,21 @@
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.container-fluid {
margin-bottom: 80px;
}
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

32
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -1,8 +1,13 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles vehicle-parts small-question-text"> <div class="page-container-grouped-styles">
<siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" /> <div class="fade-on-route-transition position-relative">
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <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 <vehicleBanner
class="mb-3" class="mb-3"
ref="vehicleBanner" ref="vehicleBanner"
@ -40,6 +45,11 @@
@ForwardClicked="forwardButtonAction" /> @ForwardClicked="forwardButtonAction" />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
@ -222,10 +232,18 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.overflow-scroll { .fade-on-route-transition {
height: calc(100% - 180px); margin-bottom: 100px;
overflow-x: hidden !important; }
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
#vehicle-parts-alert { #vehicle-parts-alert {

42
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -1,22 +1,20 @@
<template> <template>
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles position-relative">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="container-fluid pb-2">
<div class="row">
<div class="col">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
<siteSubHeader <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
cmsWidgetName="SiteSubHeaderWidget" <styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" class="px-4" />
:hasBackButton="true" <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
:backButtonAccessibleText="backButtonAccessibleText" </div>
@click-event="backButtonAction" /> </div>
<div class="fade-on-route-transition"> </div>
<styleQuestion
v-model="selectedStyle"
ref="styleQuestion"
cmsWidgetName="VehicleStyleQuestion" />
</div> </div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div> </div>
</div> </div>
</div> </div>
@ -124,3 +122,21 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped>
.container-fluid {
margin-bottom: 80px;
}
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

35
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -1,20 +1,20 @@
<template> <template>
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles position-relative">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="container-fluid pb-2">
<div class="row">
<div class="col">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition"> <yearQuestion class="px-4" v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" />
<yearQuestion <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
class="fade-on-route-transition" </div>
v-model="selectedYear" </div>
ref="yearQuestion" </div>
cmsWidgetName="VehicleYearQuestion"
/>
</div> </div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div> </div>
</div> </div>
</div> </div>
@ -99,3 +99,18 @@
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

71
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -1,43 +1,23 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit"
v-slot="{ meta }"
>
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<siteHeader <div class="fade-on-route-transition position-relative">
cmsWidgetName="SiteHeaderWidget" <siteHeader cmsWidgetName="SiteHeaderWidget" />
/> <div class="select-car">
<div class="px-4 overflow-scroll "> <div class="container-fluid pb-2">
<div class="fade-on-route-transition sub-container px-2"> <div class="row px-3">
<vehicleBanner <div class="col">
class="mb-3" <div class="select-car-form rounded">
cmsWidgetName="VehicleBannerWidget" <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
:displayGenericVehicleImage="false" <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
/> <vinLookupAlerts class="mt-5" :activeAlertType="activeVehicleLookupAlertType" />
<siteSubHeader <vinQuestion v-model="vin" :mask="vinMask" :isDisabled="vinPopulatedOnPageLoad" textPosition="left" />
cmsWidgetName="SiteSubHeaderWidget"
/>
<vinLookupAlerts
class="mt-5"
:activeAlertType="activeVehicleLookupAlertType"
/>
<vinQuestion
v-model="vin"
:mask="vinMask"
:isDisabled="vinPopulatedOnPageLoad"
/>
<vinLocationInformation /> <vinLocationInformation />
<siteFooter cmsWidgetName="SiteFooterWidget" :isForwardActionDisabled="!meta.valid" @backClicked="backButtonAction" @forwardClicked="forwardButtonAction" ref="siteFooter" />
<siteFooter </div>
cmsWidgetName="SiteFooterWidget" </div>
:isForwardActionDisabled="!meta.valid" </div>
@backClicked="backButtonAction" </div>
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div> </div>
</div> </div>
</div> </div>
@ -274,11 +254,18 @@ export default {
}, },
}; };
</script> </script>
<style>
.overflow-scroll { <style lang="scss" scoped>
height: calc(100% - 180px); .fade-on-route-transition {
overflow-X: hidden !important; margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
} }
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style> </style>

18
src/layouts/welcome-page/welcome-page.vue
View file

@ -1,11 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" > <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles welcome"> <div class="page-container-grouped-styles welcome">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="fade-on-route-transition overflow-scroll container">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="container-fluid pb-2">
<div class="row mt-4 px-3"> <div class="row mt-4 px-3">
<div class="col"> <div class="col">
<textboxQuestion <textboxQuestion
@ -136,6 +135,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</Form> </Form>
</template> </template>
@ -349,9 +349,15 @@
<style lang="scss"> <style lang="scss">
.overflow-scroll { .fade-on-route-transition {
height: calc(100% - 165px); height: calc(100% - 80px);
overflow-X: hidden !important; overflow: scroll;
}
.modal-open {
.fade-on-route-transition {
overflow: hidden;
}
} }
.my-2 .my-2
{ {

2
src/styles/common-styles.scss
View file

@ -46,7 +46,7 @@ body {
} }
.page-container-grouped-styles { .page-container-grouped-styles {
@extend .container-fluid, .shadow, .rounded-3, .p-0, .position-relative, .make-tall; @extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
} }
//Footer modal backdrop adjustments for positioning //Footer modal backdrop adjustments for positioning