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

WIP desktop updates of service packages on quote page.

Browse source
This commit is contained in:
Bryan Mauger 2024-07-03 14:02:37 -04:00
parent aefa44c33f
commit ed9f85c18a
4 changed files with 35 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -213,7 +213,7 @@ export default {
classes = "ui-checkbox d-flex"; classes = "ui-checkbox d-flex";
break; break;
case "servicePackageRadio": case "servicePackageRadio":
classes = "package-main"; classes = "package-main d-md-flex justify-content-center";
break; break;
} }
return classes; return classes;
@ -226,7 +226,7 @@ export default {
if (this.buttonTypeString == "radio") { if (this.buttonTypeString == "radio") {
classes += " radio-button-container"; classes += " radio-button-container";
} else if (this.buttonTypeString == "servicePackageRadio") { } else if (this.buttonTypeString == "servicePackageRadio") {
classes = "package-wrapper"; classes = "package-wrapper col-md-4";
} }
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) { if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {

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

@ -1,7 +1,7 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <div class="container-fluid page-container-grouped-styles quote">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6"> <div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@ -20,7 +20,10 @@
cmsWidgetName="CashOrInsuranceQuestionWidget" cmsWidgetName="CashOrInsuranceQuestionWidget"
v-model="isInsuranceSelected" v-model="isInsuranceSelected"
groupName="CashOrInsuranceQuestion" /> groupName="CashOrInsuranceQuestion" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<servicePackageQuestion <servicePackageQuestion
ref="servicePackage" ref="servicePackage"
cashCmsWidgetName="CashServicePackageQuestionWidget" cashCmsWidgetName="CashServicePackageQuestionWidget"
@ -34,7 +37,10 @@
v-on="{ 'buttonEvent.openModal': openModalAction }" v-on="{ 'buttonEvent.openModal': openModalAction }"
validationRules="option-required" validationRules="option-required"
isRequired /> isRequired />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<afterpayModalBanner <afterpayModalBanner
v-if="!isInsuranceSelected && !isRecalibrationOnOrder" v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
cmsWidgetName="AfterpayModalWidget" cmsWidgetName="AfterpayModalWidget"

13
src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
View file

@ -151,6 +151,9 @@ export default {
.package-main { .package-main {
.package-wrapper { .package-wrapper {
margin: 0.5rem 0; margin: 0.5rem 0;
@include media-breakpoint-up(md) {
margin: .5rem;
}
label { label {
display: block; display: block;
@ -173,7 +176,9 @@ export default {
0px 4px 24px -8px rgba(0, 0, 0, 0.2); 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
border-radius: 0.5rem; border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
min-height: 60px; @include media-breakpoint-up(md) {
max-height: 500px;
}
&.has-subheader { &.has-subheader {
min-height: 80px; min-height: 80px;
@ -265,6 +270,9 @@ export default {
width: 100%; width: 100%;
max-height: 0; max-height: 0;
transition: all 0.5s ease; transition: all 0.5s ease;
@include media-breakpoint-up(md) {
max-height: 500px;
}
p { p {
font-weight: 500; font-weight: 500;
@ -337,6 +345,9 @@ export default {
.hide-when-closed { .hide-when-closed {
display: none; display: none;
@include media-breakpoint-up(md) {
display: flex;
}
} }
} }
} }

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

@ -37,6 +37,18 @@ body {
max-width: 100%; max-width: 100%;
} }
} }
&.quote {
.col-md-6,
.col-lg-4 {
max-width: 1200px;
}
.col-md-6.col-lg-4 {
@include media-breakpoint-up(lg) {
width: 100%;
max-width: 910px;
}
}
}
//END set max-width on columns //END set max-width on columns
} }
.pointer { .pointer {