Merge pull request #280 from Safelite/feature/digital/SSR-445

Feature/digital/ssr 445
This commit is contained in:
katiekroell 2023-05-01 13:52:53 -04:00 committed by GitHub
commit 1d6df6cc82
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 30 additions and 46 deletions

View file

@ -8,7 +8,7 @@
<div class="row px-3"> <div class="row px-3">
<div class="col"> <div class="col">
<div class="select-car-form rounded"> <div class="select-car-form rounded">
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> <vehicleBanner class="mt-2 mb-4" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<alert <alert
ref="alertFewMoreQuestions" ref="alertFewMoreQuestions"
@ -16,7 +16,8 @@
alertClass="alert-warning" alertClass="alert-warning"
:manualHeadline="alertFewMoreQuestionsHeader" :manualHeadline="alertFewMoreQuestionsHeader"
:manualCopy="alertFewMoreQuestionsCopy" :manualCopy="alertFewMoreQuestionsCopy"
v-bind:isDismissible="false" /> v-bind:isDismissible="false"
class="mt-5"/>
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key"> <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
<questionChain <questionChain
ref="questionChain" ref="questionChain"

View file

@ -63,7 +63,7 @@ export default {
}, },
methods: { methods: {
show() { show() {
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72; this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
this.isActive = true; this.isActive = true;
document.querySelector('.fade-on-route-transition').scrollTo({ document.querySelector('.fade-on-route-transition').scrollTo({
top: 0, behavior: 'instant' top: 0, behavior: 'instant'
@ -123,8 +123,8 @@ export default {
&.menu-modal { &.menu-modal {
max-width: 576px; max-width: 576px;
left: auto; left: auto;
height: calc(100% - 72px); height: calc(100% - 56px);
top: 72px; top: 56px;
border-top: 1px solid $gray-300; border-top: 1px solid $gray-300;
overflow-x: visible; overflow-x: visible;
overflow-y: visible; overflow-y: visible;

View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="site-header d-flex justify-content-center align-items-center flex-column py-2 mb-4" :style="logoBackgroundStyle"> <div class="site-header d-flex justify-content-center align-items-center flex-column py-2" :style="logoBackgroundStyle">
<img id="siteHeaderImage" class="img-fluid" :src="imageSrc" :alt="altText" /> <img id="siteHeaderImage" class="img-fluid" :src="imageSrc" :alt="altText" />
<menuModal/> <menuModal/>
</div> </div>
@ -95,13 +95,12 @@ export default({
<style lang="scss" scoped> <style lang="scss" scoped>
.site-header { .site-header {
height: 72px; height: 56px;
} }
.alert { .alert {
left: 0; left: 0;
top: 72px; top: 72px;
} }
#siteHeaderImage { #siteHeaderImage {
height: 2.5rem; height: 2.5rem;
} }

View file

@ -9,11 +9,11 @@
<div class="col"> <div class="col">
<div class="select-car-form rounded"> <div class="select-car-form rounded">
<vehicleBanner <vehicleBanner
class="mb-3" class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
ref="vehicleBanner" ref="vehicleBanner"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" class="mb-5" />
<alert <alert
ref="alertVinNotFound" ref="alertVinNotFound"
v-if="displayVinNotFoundAlert" v-if="displayVinNotFoundAlert"

View file

@ -8,7 +8,7 @@
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <div class="fade-on-route-transition sub-container overflow-scroll px-5">
<vehicleBanner <vehicleBanner
class="mb-3" class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />

View file

@ -12,7 +12,7 @@
cmsWidgetName="verifyingCoverageStatement" cmsWidgetName="verifyingCoverageStatement"
typeStyle="h5" typeStyle="h5"
justifyText="center" justifyText="center"
class="mt-0 mb-4" class="mt-4 mb-4"
id="coverage-statement-text-block" id="coverage-statement-text-block"
/> />
<div> <div>

View file

@ -8,7 +8,7 @@
<div class="row px-3"> <div class="row px-3">
<div class="col"> <div class="col">
<div class="select-car-form rounded"> <div class="select-car-form rounded">
<vehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" /> <vehicleBanner class="mt-2 mb-4" 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"

View file

@ -17,6 +17,7 @@
disableAutoFill disableAutoFill
validationRules="first-name-required" /> validationRules="first-name-required" />
<textboxQuestion <textboxQuestion
class="mt-4"
inputId="lastNameField" inputId="lastNameField"
cmsWidgetName="PolicyholderLastNameQuestion" cmsWidgetName="PolicyholderLastNameQuestion"
v-model="customerQuestions.lastName" v-model="customerQuestions.lastName"
@ -167,11 +168,6 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.alert.alert-warning
{
margin-top: 20px;
}
#sub-header p { #sub-header p {
font-size: 16px; font-size: 16px;
line-height: 26px; line-height: 26px;

View file

@ -8,7 +8,7 @@
<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">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-2 mb-4" />
<policyVehiclesQuestion class="px-4" cmsWidgetName="PolicyVehiclesQuestion" :vehicles="VehiclesForQuestions"/> <policyVehiclesQuestion class="px-4" cmsWidgetName="PolicyVehiclesQuestion" :vehicles="VehiclesForQuestions"/>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" :isForwardActionDisabled="!meta.valid" @ForwardClicked="forwardButtonAction" @back-clicked="backButtonAction"/> <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" :isForwardActionDisabled="!meta.valid" @ForwardClicked="forwardButtonAction" @back-clicked="backButtonAction"/>
</div> </div>

View file

@ -6,7 +6,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" />
<siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" /> <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" class="mt-4"/>
<button v-on:click="forwardButtonAction">Temp Forward Button</button> <button v-on:click="forwardButtonAction">Temp Forward Button</button>
<div> <div>
<siteFooter <siteFooter

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" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" class="mt-5 mb-1" />
<div class="select-car"> <div class="select-car">
<div class="container-fluid pb-2"> <div class="container-fluid pb-2">
<div class="row px-3"> <div class="row px-3">
@ -28,8 +28,7 @@
buttonTypeString="listCard" buttonTypeString="listCard"
isRequired isRequired
v-model="selectedAppointmentType" v-model="selectedAppointmentType"
validationRules="selection-required" validationRules="selection-required" />
class="service-location-button-question"/>
<div class="select-car"> <div class="select-car">
<div class="container-fluid pb-2"> <div class="container-fluid pb-2">
<div class="row px-3"> <div class="row px-3">
@ -235,7 +234,7 @@ export default {
} }
.question-text { .question-text {
& > span { & > span {
line-height: 1.500rem; line-height: 1.5rem;
} }
} }
.list-card-content p { .list-card-content p {
@ -246,12 +245,6 @@ export default {
line-height: 1.250rem; line-height: 1.250rem;
} }
} }
.siteHeader{
.site-header{
margin-bottom: 1.25rem !important;
}
}
.choose-option{ .choose-option{
.button-question >div { .button-question >div {
&:first-of-type { &:first-of-type {
@ -262,13 +255,7 @@ export default {
} }
.button-question{ .button-question{
.row.form-test-error{ .row.form-test-error{
line-height:1.500rem; line-height:1.5rem;
padding-left: 0rem !important;
}
}
.service-location-button-question {
.question-text {
margin-top: 1.5rem;
} }
} }
</style> </style>

View file

@ -5,7 +5,8 @@
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
justification="left" justification="left"
issContainingPage="service-packages"/> issContainingPage="service-packages"
class="my-5"/>
<div class="fade-on-route-transition sub-container make-tall"> <div class="fade-on-route-transition sub-container make-tall">
<servicePackageQuestion ref="servicePackage" <servicePackageQuestion ref="servicePackage"
cmsWidgetName="ServicePackage" cmsWidgetName="ServicePackage"

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"/>
<div class="container-fluid pb-2"> <div class="container-fluid pb-2">
<div class="row mt-4 px-3"> <div class="row mt-2 px-3">
<div class="col"> <div class="col">
<alert <alert
ref="vehicleChangeAlert" ref="vehicleChangeAlert"
@ -14,7 +14,7 @@
alertClass="alert-warning" alertClass="alert-warning"
:isDismissible="false" /> :isDismissible="false" />
<vehicleBanner <vehicleBanner
class="mb-3" class="mb-4"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />

View file

@ -8,8 +8,8 @@
<div class="row px-3"> <div class="row px-3">
<div class="col"> <div class="col">
<div class="select-car-form rounded"> <div class="select-car-form rounded">
<VehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" /> <VehicleBanner class="mt-2 mb-4" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
<SiteSubHeader cms-widget-name="SiteSubHeaderWidget" /> <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" class="mt-5 mb-2" />
<VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" /> <VinLookupMethods 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" /> <SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" />
</div> </div>

View file

@ -9,7 +9,7 @@
<div class="col"> <div class="col">
<div class="select-car-form rounded"> <div class="select-car-form rounded">
<vehicleBanner <vehicleBanner
class="mb-3" class="mt-2 mb-4"
ref="vehicleBanner" ref="vehicleBanner"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />

View file

@ -8,7 +8,7 @@
<div class="row px-3"> <div class="row px-3">
<div class="col"> <div class="col">
<div class="select-car-form rounded"> <div class="select-car-form rounded">
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> <vehicleBanner class="mt-2 mb-4" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<vinLookupAlerts class="mt-5" :activeAlertType="activeVehicleLookupAlertType" /> <vinLookupAlerts class="mt-5" :activeAlertType="activeVehicleLookupAlertType" />
<vinQuestion v-model="vin" :mask="vinMask" :isDisabled="vinPopulatedOnPageLoad" textPosition="left" /> <vinQuestion v-model="vin" :mask="vinMask" :isDisabled="vinPopulatedOnPageLoad" textPosition="left" />

View file

@ -3,9 +3,9 @@
<div class="page-container-grouped-styles welcome"> <div class="page-container-grouped-styles welcome">
<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" class="mt-4"/>
<div class="container-fluid pb-2"> <div class="container-fluid pb-2">
<div class="row mt-4 px-3"> <div class="row mt-5 px-3">
<div class="col"> <div class="col">
<textboxQuestion <textboxQuestion
inputId="policyNumberField" inputId="policyNumberField"