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";
break;
case "servicePackageRadio":
classes = "package-main d-md-flex justify-content-center";
classes = "package-main d-md-flex justify-content-md-center";
break;
}
return classes;
@ -255,7 +255,7 @@ export default {
buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
buttonImageId: answer.buttonImageId ?? answer.ImageId,
additionalButtonData: answer.additionalButtonData,
additionalButtonData: answer.additionalButtonData ?? answer.additionalButtonData,
groupName: this.formatString(this.groupName),
value:
answer.value ??

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

@ -1,7 +1,7 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<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="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@ -23,7 +23,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<div class="col-md-12 col-xl-8">
<servicePackageQuestion
ref="servicePackage"
cashCmsWidgetName="CashServicePackageQuestionWidget"
@ -49,13 +49,14 @@
:lineItems="lineItems" />
<recalDisclaimer
class="mb-0"
cmsWidgetName="RecalDisclaimerWidget"
v-if="isRecalibrationOnOrder"
v-on="{ textLinkClicked: openModalAction }"
alertClass="alert-info" />
<promoModalQuestion
class="small mt-4"
class="small mt-6 d-md-flex justify-content-md-center"
v-model="lineItems"
:addableVaps="addableVaps"
pageName="quote"
@ -67,7 +68,7 @@
cmsWidgetName="quoteDisclaimer"
justifyText="left"
typeStyle="caption"
class="mt-4" />
class="mt-6" />
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
<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">
<div class="package-specs">
<div
v-if="this.additionalButtonData.servicePackageDiscount"
class="row justify-content-between">
<div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
<div class="col md-6">
<p class="m-0">
<span v-html="this.buttonLabel"></span>
@ -140,18 +138,24 @@ export default {
<style lang="scss">
.package-main {
.package-wrapper {
margin: 1rem 0;
@include media-breakpoint-up(md) {
margin: 0.5rem 0;
}
position: relative;
margin: 0.5rem 0;
@include media-breakpoint-up(md) {
margin: 1rem 0.5rem;
display: flex;
flex-direction: column;
align-self: flex-end;
}
label {
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"] {
@ -172,21 +176,13 @@ export default {
border-radius: 0.5rem;
overflow: hidden;
min-height: 60px;
@include media-breakpoint-up(md) {
max-height: 500px;
height: 100%;
}
&.has-subheader {
min-height: 80px;
}
&.has-text {
border-radius: 0 0 0.5rem 0.5rem;
border: 1px solid #469d2a;
@include media-breakpoint-up(md) {
border-radius: 0.5rem;
padding-top: 3.75rem;
}
border: 1px solid #469d2a; //Temp color
}
&:before {
@ -283,6 +279,15 @@ export default {
&.pricing-info {
color: $green;
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 {
text-decoration: line-through;
font-size: 0.75rem;
@ -300,23 +305,30 @@ export default {
}
span {
&.service-package-discount {
color: #469d2a;
color: #469d2a; //Temp color
text-align: end;
font-weight: 500;
font-size: 13px;
div.strikethrough-discount-price {
text-decoration: line-through;
margin-right: 0;
font-weight: 500;
font-size: 14px;
font-weight: 400;
font-size: 0.875rem;
line-height: 20px;
color: $gray-550;
color: $gray-500;
padding-right: 2px;
}
div.discount-price {
color: #469d2a;
color: #469d2a; //Temp color
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 {
line-height: 36px;
height: 2rem;
display: flex;
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
background-color: #469d2a;
background-color: #469d2a; //Temp color
align-items: center;
justify-content: center;
padding: 5px;
width: 100%;
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%;
}
}
// Quote page desktop
&.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;
}
}
//Quote page max-width for service packages
.col-xl-8 {
max-width: 1200px;
}
//END set max-width on columns
}