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

Merge pull request #1396 from Safelite/CSR-1591-misc-desktop-adjustments

Browse source 
Csr 1591 misc desktop adjustments
This commit is contained in:
bmauger 2023-10-11 09:54:40 -04:00 committed by GitHub
commit 376a2b3640
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 43 additions and 34 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"; classes = "package-wrapper";
} }
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
classes += " two-list-card-width";
}
return classes; return classes;
}, },
buttonsInfo() { buttonsInfo() {
@ -304,18 +308,9 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.vehicle-damage { .two-list-card-width {
.button-question { width: 33.33333333%;
@include media-breakpoint-up(md) { flex: 0 0 auto;
.col-12 {
width: 66.66666667%;
}
.col {
width: 33.3333333%;
flex: 0 0 auto;
}
}
}
} }
.button-question-overflow { .button-question-overflow {
height: calc(100vh - 274px); 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> </div>
<div class="row justify-content-md-center"> <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"> <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
<questionChain <questionChain
ref="questionChain" ref="questionChain"

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

@ -7,7 +7,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <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" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
<textboxQuestion <textboxQuestion
class="mb-4" class="mb-4"

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

@ -8,7 +8,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <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" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<div v-if="!skipVin"> <div v-if="!skipVin">

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

@ -8,7 +8,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <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 <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />

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

@ -8,7 +8,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <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 <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />

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

@ -8,7 +8,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-center"> <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 <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />

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

@ -8,7 +8,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <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" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
<template v-if="ChangeShopLink.length"> <template v-if="ChangeShopLink.length">
<textBlock <textBlock

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

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

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

@ -24,13 +24,16 @@
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3"> <div class="col-md-6">
<damageLocationQuestion <damageLocationQuestion
ref="damageLocation" ref="damageLocation"
cmsWidgetName="DamageLocationQuestion" cmsWidgetName="DamageLocationQuestion"
v-model="selectedDamageLocations" v-model="selectedDamageLocations"
groupName="DamageLocationQuestion" /> groupName="DamageLocationQuestion" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4">
<windshieldOptions <windshieldOptions
class="windshield-options" class="windshield-options"
ref="windshieldOptions" ref="windshieldOptions"
@ -547,14 +550,10 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.vehicle-damage { .replace-options-question {
.windshield-options { .two-list-card-width {
@include media-breakpoint-up(md) { width: 100%;
.col { flex: 0 auto;
flex: 0 0 auto;
width: 33.33333333%;
}
}
} }
} }
</style> </style>

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

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

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

@ -7,7 +7,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-center"> <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" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
<vehicleQuestion <vehicleQuestion
ref="vehicleYearQuestion" ref="vehicleYearQuestion"

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

@ -8,7 +8,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <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 <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />

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

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