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

Merge branch 'develop' into feature/digital/SSR-390

Browse source
This commit is contained in:
Kroell 2023-04-11 14:15:00 -04:00
commit 8c2649135d
18 changed files with 137 additions and 290 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -233,16 +233,6 @@ export default {
</script>
<style lang="scss">
// .button-question-overflow {
// height: calc(100vh - 274px);
//
// .overflow-scroll {
// // Height will be determined by overall height of content above list
// height: calc(100% - 400px);
// overflow-x: hidden !important;
// -webkit-overflow-scrolling: touch;
// }
// }
.button-question {
color: $black;

14
src/iss-components/questions-page-layout/questions-page-layout.vue
View file

@ -103,19 +103,7 @@ export default {
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
<style lang="scss">
.questions-page {
.question-text {
margin-bottom: 0.5rem;

14
src/layouts/address-lookup/address-lookup.vue
View file

@ -352,17 +352,3 @@ components: {
},
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

14
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -149,19 +149,7 @@ export default {
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
<style lang="scss">
ol {
margin-left: -1rem;
li {

14
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -316,19 +316,7 @@ export default {
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
<style lang="scss">
#license-plate-question-wrapper .form-test-error {
/**
Override extra margin-bottom in the error message in TextboxQuestion

11
src/layouts/policy-holder-details/policy-holder-details.vue
View file

@ -135,17 +135,6 @@ export default {
}
</script>
<style lang="scss">
.fade-on-route-transition {
height: calc(100% - 120px);
overflow: scroll;
overflow-x: hidden;
}
.modal-open {
.fade-on-route-transition {
overflow: hidden;
}
}
.alert.alert-warning
{
margin-top: 20px;

35
src/layouts/provider-preference/provider-preference.vue
View file

@ -3,12 +3,13 @@
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
<div class="select-car">
<div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<div v-html="ProviderPreferenceHeaderText" class="text-center mb-4 modal-link" ></div>
<div v-html="ProviderPreferenceHeaderText" class="text-center mb-5 modal-link" ></div>
<div
v-html="ProviderPreferenceBodyText"
class="mt-0 body-text"
@ -125,33 +126,21 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
<style lang="scss">
#sub-header span{
color: $black;
color: $black;
}
.body-text {
color: $darker-gray;
p, li {
margin-bottom: 0.5rem;
}
color: $darker-gray;
p, li {
margin-bottom: 0.5rem;
}
}
.modal-link a{
color: $blue-700;
font-size: 14px;
line-height: 24px;
font-weight: 500;
color: $blue-700;
font-size: 14px;
line-height: 24px;
font-weight: 500;
}
.question-text {
margin-top: 0;

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

@ -1,14 +1,23 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" class="siteHeader"/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" />
<div class="fade-on-route-transition position-relative px-5 choose-option">
<buttonQuestion
cmsWidgetName="ServiceTypeQuestionWidget"
:questionText="questionText"
:answers="answersFromCms"
buttonTypeString="listCard"
isRequired
v-model="selectedValues"
validationRules="selection-required"/>
<div class="select-car">
<div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<p>Placeholder for service-location page</p>
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ -26,22 +35,30 @@
</Form>
</template>
<script>
// Import Supporting Files
// Import Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import buttonQuestion from "@/digital-components/button-question/button-question";
// Import Component
import baseFormMixin from "@/mixins/base-form-mixin";
import { Form } from "vee-validate";
import { Form, defineRule } from "vee-validate";
import siteFooter from "@/iss-components/site-footer/site-footer.vue";
import siteHeader from "@/iss-components/site-header/site-header.vue";
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
// DEFINE VALIDATION RULES
defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
export default {
name: "provider-preference",
name: "service-location",
mixins: [baseFormMixin],
components: {
siteFooter,
siteHeader,
siteSubHeader,
buttonQuestion,
Form,
},
data() {
@ -50,25 +67,31 @@ export default {
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const promiseResultMap = [{
resultKey: "cmsContent",
promise: cmsContentPromise,
}, ];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
computed: {
questionText() {
return this.getCmsContent("ServiceTypeQuestionWidget", "QuestionText");
},
answersFromCms() {
return this.getCmsContent("ServiceTypeQuestionWidget", "Answers");
},
},
methods: {
arePagePrerequisiteValid() {
return true;
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {},
@ -77,7 +100,7 @@ export default {
};
</script>
<style lang="scss" scoped>
<style lang="scss">
.fade-on-route-transition {
margin-bottom: 100px;
}
@ -90,4 +113,40 @@ export default {
overflow: hidden;
}
}
</style>
#sub-header span {
color: $black;
}
.question-text {
& > span {
line-height: 1.500rem;
}
}
.list-card-content p {
&:first-of-type {
line-height: 1.5rem;
}
&:not(:nth-of-type(1)){
line-height: 1.250rem;
}
}
.siteHeader{
.site-header{
margin-bottom: 1.25rem !important;
}
}
.choose-option{
.button-question >div {
&:first-of-type {
margin-bottom: 0.95rem;
line-height: 1.500rem;
}
}
}
.button-question{
.row.form-test-error{
line-height:1.500rem;
padding-left: 0rem !important;
}
}
</style>

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

@ -478,18 +478,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

15
src/layouts/vehicle-lookup/vehicle-lookup.vue
View file

@ -106,18 +106,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

15
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -100,18 +100,3 @@ export default {
}
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

18
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -109,21 +109,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.container-fluid {
margin-bottom: 80px;
}
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

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

@ -232,20 +232,7 @@ components: {
},
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
<style lang="scss">
#vehicle-parts-alert {
.alert-heading {
margin-top: 0.25rem !important;

18
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -122,21 +122,3 @@ export default {
}
};
</script>
<style lang="scss" scoped>
.container-fluid {
margin-bottom: 80px;
}
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

15
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -99,18 +99,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

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

@ -254,18 +254,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

14
src/layouts/welcome-page/welcome-page.vue
View file

@ -348,19 +348,7 @@ export default {
</script>
<style lang="scss">
.fade-on-route-transition {
height: calc(100% - 80px);
overflow: scroll;
}
.modal-open {
.fade-on-route-transition {
overflow: hidden;
}
}
.my-2
{
.my-2 {
margin-bottom: 0rem !important;
}
@-moz-document url-prefix() {

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

@ -5,56 +5,62 @@ body {
background-color: #fff;
color: #4D5151;
.container-fluid {
max-width: 576px; //Remove once desktop app is complete
&.container-shadow {
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
}
&.make-tall {
height: 100vh;
display: flex;
flex-direction: column;
}
.prevent-squish{
overflow-x: unset;
}
max-width: 576px; //Remove once desktop app is complete
&.container-shadow {
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
}
&.make-tall {
height: 100vh;
display: flex;
flex-direction: column;
}
.prevent-squish{
overflow-x: unset;
}
}
.pointer {
cursor: pointer;
cursor: pointer;
}
.container,
.container-fluid {
overflow: hidden;
overflow: hidden;
}
.sub-container{
&.make-tall {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
&.make-tall {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
}
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.page-container-grouped-styles {
@extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
@extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
}
//Footer modal backdrop adjustments for positioning
.modal-backdrop {
left: 50%;
transform: translateX(-50%);
max-width: 576px;
height: calc(100% - 72px);
left: 50%;
transform: translateX(-50%);
max-width: 576px;
height: calc(100% - 72px);
}
}
// Scroll page when modal isn't open
.fade-on-route-transition {
height: calc(100% - 80px);
overflow: auto;
}
// Prevent scroll when modal is open
.modal-open {
.fade-on-route-transition {
overflow: hidden;
}
}
}