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

CSR-1591 radio button width adjustments, misc css tweaks.

Browse source
This commit is contained in:
Bryan Mauger 2023-10-11 09:42:36 -04:00
parent ec9d6b8e82
commit 15dbe4c592
14 changed files with 103 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -223,6 +223,10 @@ export default {
classes = "package-wrapper";
}
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
classes += " bryan-class";
}
return classes;
},
buttonsInfo() {
@ -304,18 +308,9 @@ export default {
</script>
<style lang="scss">
.vehicle-damage {
.button-question {
@include media-breakpoint-up(md) {
.col-12 {
width: 66.66666667%;
}
.col {
width: 33.3333333%;
flex: 0 0 auto;
}
}
}
.bryan-class {
width: 33.33333333%;
flex: 0 0 auto;
}
.button-question-overflow {
height: calc(100vh - 274px);

2
src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
View file

@ -26,7 +26,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
<questionChain
ref="questionChain"

2
src/layouts/customer-details/customer-details.vue
View file

@ -7,7 +7,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
<textboxQuestion
class="mb-4"

2
src/layouts/estimate/estimate.vue
View file

@ -8,7 +8,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<div v-if="!skipVin">

2
src/layouts/payment-method/payment-method.vue
View file

@ -8,7 +8,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />

2
src/layouts/quote/quote.vue
View file

@ -8,7 +8,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />

2
src/layouts/review/review.vue
View file

@ -8,7 +8,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />

2
src/layouts/schedule/schedule.vue
View file

@ -8,7 +8,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
<template v-if="ChangeShopLink.length">
<textBlock

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

@ -60,7 +60,7 @@
</div>
</div>
<div class="row justify-content-md-center appointment-type">
<div class="col-md-6 col-xxl-4">
<div class="col-md-6">
<appointmentTypeQuestion
v-model="selectedAppointmentType"
v-show="isAppointmentTypeDisplayed"
@ -74,7 +74,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<mobileLocationModalQuestions
customComponentId="mobileLocationQuestions"
v-if="selectedAppointmentType === 'Mobile'"
@ -532,6 +532,20 @@ export default {
</script>
<style lang="scss">
.appointment-type-question {
.button-question {
.col {
padding: 0 .5rem;
@include media-breakpoint-up(md) {
padding: 0 .75rem;
}
@include media-breakpoint-up(xl) {
width: 33.3333333%;
flex: 0 0 auto;
}
}
}
}
.question-text {
& > span {
text-align: center;

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

@ -9,68 +9,71 @@
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<alert
ref="vehicleChangeAlert"
v-if="shouldDisplayVehicleChangeAlert"
class="mt-5 mb-0"
cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning"
:isDismissible="false" />
ref="vehicleChangeAlert"
v-if="shouldDisplayVehicleChangeAlert"
class="mt-5 mb-0"
cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning"
:isDismissible="false" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6">
<damageLocationQuestion
ref="damageLocation"
cmsWidgetName="DamageLocationQuestion"
v-model="selectedDamageLocations"
groupName="DamageLocationQuestion" />
ref="damageLocation"
cmsWidgetName="DamageLocationQuestion"
v-model="selectedDamageLocations"
groupName="DamageLocationQuestion" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4">
<windshieldOptions
class="windshield-options"
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations" />
class="windshield-options"
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations" />
<alert
v-if="hasRepairReplaceConflict"
class="my-5"
cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger"
:isDismissible="false" />
v-if="hasRepairReplaceConflict"
class="my-5"
cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger"
:isDismissible="false" />
<sideDoorOptions
ref="sideDoorOptions"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData"
v-show="!hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations" />
ref="sideDoorOptions"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData"
v-show="!hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations" />
<replaceOptionsQuestion
ref="backGlassOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required" />
ref="backGlassOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4">
<navbar
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isBackButtonHidden="shouldHideBackButton"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isBackButtonHidden="shouldHideBackButton"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
@ -241,7 +244,7 @@ export default {
})
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.SINGLE
);
@ -256,7 +259,7 @@ export default {
})
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.DRIVER
);
@ -271,7 +274,7 @@ export default {
})
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.PASSENGER
);
@ -341,7 +344,7 @@ export default {
isWindshieldRepair: this.isWindshieldRepair,
selectedGlassToReplace: this.selectedGlassToReplace(),
selectedWindshieldChipCount:
this.selectedWindshieldOptions.selectedWindshieldChipCount,
this.selectedWindshieldOptions.selectedWindshieldChipCount,
},
false
);
@ -366,9 +369,9 @@ export default {
const payment = this.$store.getters.payment;
const vehicleChangedDuringPolicyLookupInHeritage =
payment.isInsurance &&
payment.insuranceCoverage.coverageStatus &&
payment.insuranceCoverage.coverageStatus !== "";
payment.isInsurance &&
payment.insuranceCoverage.coverageStatus &&
payment.insuranceCoverage.coverageStatus !== "";
if (vehicleChangedDuringPolicyLookupInHeritage) {
if (store.getters.damage.isRepair) {
this.$router.navigateWithSaving(
@ -378,7 +381,7 @@ export default {
} else {
this.$router.navigateWithSaving(
this.navigationScenarios
.CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE,
.CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE,
this.$route
);
}
@ -438,7 +441,7 @@ export default {
}
return selectedGlassToReplace;
},
}
},
computed: {
isWindshieldDamageLocation() {
@ -460,7 +463,7 @@ export default {
return (
this.isWindshieldDamageLocation &&
this.selectedWindshieldOptions.selectedWindshieldDamageType ===
damageLocationsSelected.REPAIR
damageLocationsSelected.REPAIR
);
},
isDriverSideReplace() {
@ -488,10 +491,10 @@ export default {
if (
!this.selectedDamageLocations?.includes("Windshield") ||
this.selectedWindshieldOptions.selectedWindshieldDamageType ===
damageLocationsSelected.REPAIR ||
damageLocationsSelected.REPAIR ||
!this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
)
return false;
return false;
return (
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
@ -510,14 +513,14 @@ export default {
);
}
) ||
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedPassengerWindshield) => {
return (
selectedPassengerWindshield.toUpperCase() ===
damageLocationsSelected.PASSENGER.toUpperCase()
);
}
))
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedPassengerWindshield) => {
return (
selectedPassengerWindshield.toUpperCase() ===
damageLocationsSelected.PASSENGER.toUpperCase()
);
}
))
);
},
shouldDisplayVehicleChangeAlert() {
@ -547,14 +550,10 @@ export default {
</script>
<style lang="scss">
.vehicle-damage {
.windshield-options {
@include media-breakpoint-up(md) {
.col {
flex: 0 0 auto;
width: 33.33333333%;
}
}
.replace-options-question {
.bryan-class {
width: 100%;
flex: 0 auto;
}
}
</style>

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

@ -31,7 +31,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<div v-for="(item, i) in PartsOrQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" />

2
src/layouts/vehicle/vehicle.vue
View file

@ -7,7 +7,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
<vehicleQuestion
ref="vehicleYearQuestion"

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

@ -8,7 +8,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />

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

@ -5,6 +5,7 @@ body {
background-color: #fff;
color: #4d5151;
.container-fluid {
padding: 0 1.5rem;
.prevent-squish {
overflow-x: unset;
}