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

WIP more pages updated to non-sticky header.

Browse source
This commit is contained in:
Bryan Mauger 2023-04-10 13:27:34 -04:00
parent 1f51638720
commit 4a3c61da1b
15 changed files with 1129 additions and 1062 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -78,7 +78,7 @@ export default {
show() { show() {
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72; this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
this.isActive = true; this.isActive = true;
document.querySelector('.fade-on-route-transition','.page-container-grouped-styles').scrollTo({ document.querySelector('.page-container-grouped-styles').scrollTo({
top: 0, behavior: 'instant' top: 0, behavior: 'instant'
}); });
}, },

38
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,18 @@ 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 {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
</style> </style>

49
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,19 @@ 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 {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
ol { ol {
margin-left: -1rem; margin-left: -1rem;

40
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,19 @@ export default {
}; };
</script> </script>
<style> <style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
//height: calc(100% - 80px);
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 {
/** /**

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

@ -3,7 +3,7 @@
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid"> <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">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>

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

@ -1,9 +1,13 @@
<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 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 v-html="ProviderPreferenceHeaderText" class="text-center mb-4 modal-link" ></div>
<div <div
v-html="ProviderPreferenceBodyText" v-html="ProviderPreferenceBodyText"
@ -29,6 +33,11 @@
/> />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
<script> <script>
@ -117,10 +126,19 @@ 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 {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
#sub-header span{ #sub-header span{
color: #000000; color: #000000;

35
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,19 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

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

@ -3,7 +3,7 @@
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid"> <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">
<alert <alert
@ -478,6 +478,7 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.fade-on-route-transition { .fade-on-route-transition {
margin-bottom: 100px; margin-bottom: 100px;

64
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,19 @@ 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 {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
</style> </style>

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

@ -1,8 +1,9 @@
<template> <template>
<div class="page-container-grouped-styles position-relative"> <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"> <div class="container-fluid pb-2">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
@ -16,6 +17,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>

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

@ -1,8 +1,9 @@
<template> <template>
<div class="page-container-grouped-styles position-relative"> <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"> <div class="container-fluid pb-2">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
@ -16,6 +17,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>

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

@ -1,8 +1,9 @@
<template> <template>
<div class="page-container-grouped-styles position-relative"> <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"> <div class="container-fluid pb-2">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
@ -16,6 +17,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>

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

@ -1,8 +1,9 @@
<template> <template>
<div class="page-container-grouped-styles position-relative"> <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"> <div class="container-fluid pb-2">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
@ -16,6 +17,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>

72
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,19 @@ 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 {
//height: calc(100% - 80px);
overflow: auto;
} }
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style> </style>

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

@ -4,7 +4,7 @@
<div class="fade-on-route-transition position-relative"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="container-fluid"> <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