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

CSR-1673 fix icon and text alignment and add back scroll to bottom feature.

Browse source
This commit is contained in:
Bryan Mauger 2023-09-22 10:44:55 -04:00
parent bce87ecf02
commit 9926126c67
15 changed files with 33 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div :class="`questions-page`"> <div :class="`questions-page`">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid"> <div class="container-fluid page-container-grouped-styles">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />

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

@ -5,7 +5,7 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
autocomplete="off"> autocomplete="off">
<div class="container-fluid"> <div class="container-fluid page-container-grouped-styles">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />

2
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -1,6 +1,6 @@
<template> <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="container-fluid"> <div class="container-fluid page-container-grouped-styles">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />

4
src/layouts/estimate/estimate.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"> <div class="container-fluid page-container-grouped-styles">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
@ -9,7 +9,7 @@
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" /> <ve page-container-grouped-styleshicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<div v-if="!skipVin"> <div v-if="!skipVin">
<div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div> <div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>

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

@ -1,6 +1,6 @@
<template> <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="container-fluid"> <div class="container-fluid page-container-grouped-styles">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />

2
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"> <div class="container-fluid page-container-grouped-styles">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />

2
src/layouts/schedule/schedule.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"> <div class="container-fluid page-container-grouped-styles">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />

4
src/layouts/service-location/appointment-type-question/appointment-type-question.vue
View file

@ -97,8 +97,8 @@ export default {
<style lang="scss"> <style lang="scss">
.appointment-type-question { .appointment-type-question {
.list-card img { .list-card img {
height: auto; height: 1.5rem;
width: 3.417rem; width: auto;
} }
} }
</style> </style>

2
src/layouts/service-location/service-location.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"> <div class="container-fluid page-container-grouped-styles">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />

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

@ -1,6 +1,6 @@
<template> <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="container-fluid"> <div class="container-fluid page-container-grouped-styles">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />

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

@ -2,7 +2,7 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="vehicle-parts small-question-text"> <div class="vehicle-parts small-question-text">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid"> <div class="container-fluid page-container-grouped-styles">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />

2
src/layouts/vin-lookup/vin-lookup.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"> <div class="container-fluid page-container-grouped-styles">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />

13
src/mixins/base-mixin.js
View file

@ -72,6 +72,7 @@ export default {
lineItem.partType != partTypeStrings.RAIN_DEFENSE lineItem.partType != partTypeStrings.RAIN_DEFENSE
); );
}); });
console.log("step one", lineItemsToPrice);
let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice); let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice);
return totalPrice; return totalPrice;
}, },
@ -93,18 +94,26 @@ export default {
lineItem.childParts lineItem.childParts
); );
} }
console.log(
"step two, lineItem name: ",
lineItem.partNumber,
" / totalPrice: ",
totalPrice
);
}); });
console.log("step three", totalPrice);
return totalPrice; return totalPrice;
}, },
getTotalLineItemPrice(lineItem) { getTotalLineItemPrice(lineItem) {
return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice; return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
}, },
scrollToPageTop() { scrollToPageTop() {
const container = document.getElementsByClassName("container-fluid")[0]; const container = document.getElementsByClassName("page-container-grouped-styles")[0];
container.scrollTo({ top: 0, left: 0, behavior: "smooth" }); container.scrollTo({ top: 0, left: 0, behavior: "smooth" });
}, },
scrollToPageBottom() { scrollToPageBottom() {
const container = document.getElementsByClassName("container-fluid")[0]; console.log("scroll to bottom");
const container = document.getElementsByClassName("page-container-grouped-styles")[0];
container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" }); container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
}, },
}, },

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

@ -10,6 +10,11 @@ body {
.prevent-squish { .prevent-squish {
overflow-x: unset; overflow-x: unset;
} }
&.page-container-grouped-styles{
height: 100vh;
display: flex;
flex-direction: column;
}
} }
.pointer { .pointer {
cursor: pointer; cursor: pointer;

6
src/ux-components/list-card/list-card.vue
View file

@ -82,8 +82,8 @@ export default {
img { img {
// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples. // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
height: auto; height: 2rem;
width: 6.5rem; width: auto;
margin-bottom: 2.2rem; margin-bottom: 2.2rem;
max-width: 100%; max-width: 100%;
} }
@ -96,7 +96,7 @@ export default {
outline: none; outline: none;
display: flex; display: flex;
position: relative; position: relative;
justify-content: space-between; justify-content: flex-start;
p { p {
color: $gray-600; color: $gray-600;