style fixes

This commit is contained in:
Jason Wheeler 2023-05-22 17:08:54 -04:00
parent a1eeb4e733
commit 9e5845014c
2 changed files with 54 additions and 30 deletions

View file

@ -170,7 +170,7 @@
},
getPackagePriceString(packageName) {
const formattedPriceFloat = parseFloat(this.getPackagePrice(packageName)).toFixed(2);
return '$' + formattedPriceFloat;
return '$' + formattedPriceFloat + '*';
},
getPackagePrice(packageName) {
let priceFloat = 0;

View file

@ -1,36 +1,40 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles">
<loadingModal ref="loadingModal" />
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
justification="left"
issContainingPage="service-packages"
class="my-5"/>
<div class="fade-on-route-transition sub-container make-tall">
<servicePackageQuestion ref="servicePackage"
cmsWidgetName="ServicePackage"
groupName="ServicePackageQuestion"
:availableLineItems="availableLineItems"
@vapsItemsSelected="vapsItemsSelectedAction"
v-on:link-event="openModalAction"
validationRules="option-required"
isRequired />
<textBlock cmsWidgetName="PriceDisclaimerWidget"
justifyText="left"
typeStyle="caption"
style="margin-bottom: 6rem;"
class="mt-2 mx-6" />
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
<contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
<siteFooter cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
justification="left"
issContainingPage="service-packages"
/>
<div class="mx-5">
<servicePackageQuestion ref="servicePackage"
cmsWidgetName="ServicePackage"
groupName="ServicePackageQuestion"
:availableLineItems="availableLineItems"
@vapsItemsSelected="vapsItemsSelectedAction"
v-on:link-event="openModalAction"
validationRules="option-required"
isRequired
/>
<p class="caption disclaimer" v-html="PriceDisclaimerText"></p>
<siteFooter cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
<loadingModal ref="loadingModal" />
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
<contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
</Form>
</template>
@ -113,6 +117,11 @@
pricedGlassParts: []
};
},
computed: {
PriceDisclaimerText() {
return this.getCmsContent("PriceDisclaimerWidget", "Text");
},
},
methods: {
openModalAction(modalName) {
this.$refs[modalName.args].openModal();
@ -158,4 +167,19 @@
contentGroupModal
}
};
</script>
</script>
<style lang="scss">
.subheader-secondary {
margin-top: .5rem;
padding: 0px;
}
.disclaimer {
margin-top: 1.3rem;
a {
color: #4D5151;
font-weight: 400;
}
}
</style>