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

Merge pull request #1903 from Safelite/CSR-2140-qa-fixes

Browse source 
CSR-2140 Format quote page service packages for desktop horizontal layout.
This commit is contained in:
bmauger 2024-07-15 15:20:30 -04:00 committed by GitHub
commit c6ba5cb97f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 48 additions and 57 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 d-md-flex justify-content-center"; classes = "package-main d-md-flex justify-content-md-center";
break; break;
} }
return classes; return classes;
@ -255,7 +255,7 @@ export default {
buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy, buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl, buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
buttonImageId: answer.buttonImageId ?? answer.ImageId, buttonImageId: answer.buttonImageId ?? answer.ImageId,
additionalButtonData: answer.additionalButtonData, additionalButtonData: answer.additionalButtonData ?? answer.additionalButtonData,
groupName: this.formatString(this.groupName), groupName: this.formatString(this.groupName),
value: value:
answer.value ?? answer.value ??

9
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 quote"> <div class="container-fluid page-container-grouped-styles">
<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" />
@ -23,7 +23,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 col-lg-4"> <div class="col-md-12 col-xl-8">
<servicePackageQuestion <servicePackageQuestion
ref="servicePackage" ref="servicePackage"
cashCmsWidgetName="CashServicePackageQuestionWidget" cashCmsWidgetName="CashServicePackageQuestionWidget"
@ -49,13 +49,14 @@
:lineItems="lineItems" /> :lineItems="lineItems" />
<recalDisclaimer <recalDisclaimer
class="mb-0"
cmsWidgetName="RecalDisclaimerWidget" cmsWidgetName="RecalDisclaimerWidget"
v-if="isRecalibrationOnOrder" v-if="isRecalibrationOnOrder"
v-on="{ textLinkClicked: openModalAction }" v-on="{ textLinkClicked: openModalAction }"
alertClass="alert-info" /> alertClass="alert-info" />
<promoModalQuestion <promoModalQuestion
class="small mt-4" class="small mt-6 d-md-flex justify-content-md-center"
v-model="lineItems" v-model="lineItems"
:addableVaps="addableVaps" :addableVaps="addableVaps"
pageName="quote" pageName="quote"
@ -67,7 +68,7 @@
cmsWidgetName="quoteDisclaimer" cmsWidgetName="quoteDisclaimer"
justifyText="left" justifyText="left"
typeStyle="caption" typeStyle="caption"
class="mt-4" /> class="mt-6" />
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" /> <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" /> <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />

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

@ -12,9 +12,7 @@
]" ]"
for="testradio"> for="testradio">
<div class="package-specs"> <div class="package-specs">
<div <div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
v-if="this.additionalButtonData.servicePackageDiscount"
class="row justify-content-between">
<div class="col md-6"> <div class="col md-6">
<p class="m-0"> <p class="m-0">
<span v-html="this.buttonLabel"></span> <span v-html="this.buttonLabel"></span>
@ -140,18 +138,24 @@ export default {
<style lang="scss"> <style lang="scss">
.package-main { .package-main {
.package-wrapper { .package-wrapper {
margin: 1rem 0; margin: 0.5rem 0;
@include media-breakpoint-up(md) {
margin: 0.5rem 0;
}
position: relative;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
margin: 1rem 0.5rem; margin: 1rem 0.5rem;
display: flex;
flex-direction: column;
align-self: flex-end;
} }
label { label {
display: block; display: block;
height: 100%; @include media-breakpoint-up(md) {
display: flex;
min-height: 320px;
}
@include media-breakpoint-up(xl) {
display: flex;
min-height: 276px;
}
} }
input[type="radio"] { input[type="radio"] {
@ -172,21 +176,13 @@ export default {
border-radius: 0.5rem; border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
min-height: 60px; min-height: 60px;
@include media-breakpoint-up(md) {
max-height: 500px;
height: 100%;
}
&.has-subheader { &.has-subheader {
min-height: 80px; min-height: 80px;
} }
&.has-text { &.has-text {
border-radius: 0 0 0.5rem 0.5rem; border-radius: 0 0 0.5rem 0.5rem;
border: 1px solid #469d2a; border: 1px solid #469d2a; //Temp color
@include media-breakpoint-up(md) {
border-radius: 0.5rem;
padding-top: 3.75rem;
}
} }
&:before { &:before {
@ -283,6 +279,15 @@ export default {
&.pricing-info { &.pricing-info {
color: $green; color: $green;
font-size: 0.875rem; font-size: 0.875rem;
@include media-breakpoint-up(md) {
position: absolute;
bottom: 0.75rem;
left: 0;
width: 100%;
text-align: center;
font-size: 1.125rem;
color: $gray-500;
}
span.strikethrough-price { span.strikethrough-price {
text-decoration: line-through; text-decoration: line-through;
font-size: 0.75rem; font-size: 0.75rem;
@ -300,23 +305,30 @@ export default {
} }
span { span {
&.service-package-discount { &.service-package-discount {
color: #469d2a; color: #469d2a; //Temp color
text-align: end; text-align: end;
font-weight: 500; font-weight: 500;
font-size: 13px; font-size: 13px;
div.strikethrough-discount-price { div.strikethrough-discount-price {
text-decoration: line-through; text-decoration: line-through;
margin-right: 0; margin-right: 0;
font-weight: 500; font-weight: 400;
font-size: 14px; font-size: 0.875rem;
line-height: 20px; line-height: 20px;
color: $gray-550; color: $gray-500;
padding-right: 2px; padding-right: 2px;
} }
div.discount-price { div.discount-price {
color: #469d2a; color: #469d2a; //Temp color
font-weight: 600; font-weight: 600;
font-size: 26px; font-size: 1.625rem;
}
@include media-breakpoint-up(md) {
position: absolute;
bottom: 0.75rem;
left: 0;
width: 100%;
text-align: center;
} }
} }
} }
@ -353,28 +365,15 @@ export default {
} }
} }
.discount-text { .discount-text {
line-height: 36px; height: 2rem;
display: flex; display: flex;
border-top-right-radius: 0.5rem; border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem; border-top-left-radius: 0.5rem;
background-color: #469d2a; background-color: #469d2a; //Temp color
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 5px;
width: 100%; width: 100%;
color: white; color: white;
height: 2.875rem;
@include media-breakpoint-up(md) {
position: absolute;
z-index: 1;
~ label {
.package-label {
&:after {
top: 68px;
}
}
}
}
} }
} }
} }

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

@ -37,18 +37,9 @@ body {
max-width: 100%; max-width: 100%;
} }
} }
// Quote page desktop //Quote page max-width for service packages
&.quote { .col-xl-8 {
.col-md-6, max-width: 1200px;
.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
} }