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

WIP

Browse source
This commit is contained in:
Leah Schumann 2023-04-14 07:44:17 -04:00
parent 6fda9d71b5
commit 32d90ba74d
3 changed files with 102 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
View file

@ -8,10 +8,14 @@
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4"> class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
<div class="row-one"> <div class="row-one">
<span class="m-0 button-label-copy" :class="textPosition">{{ buttonLabel }}</span> <span class="m-0 button-label-copy" :class="textPosition">{{ buttonLabel }}</span>
<span class="m-0 button-label-sub-copy" :class="textPosition">{{ buttonLabelSubCopy }}</span> <span class="m-0 button-label-sub-copy" :class="textPosition">{{
<div class="availability-indicator" :class="availability === 'high' ? 'green' : 'red'"> buttonLabelSubCopy
<span class="m-0 button-auxillary-copy" >{{ buttonAuxillaryCopy }}</span> }}</span>
</div> <div
class="availability-indicator"
:class="availability === 'high' ? 'green' : 'red'">
<span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span>
</div>
</div> </div>
<span <span
v-if="buttonBodyCopy" v-if="buttonBodyCopy"
@ -118,4 +122,54 @@ export default {
} }
} }
} }
.button-content {
.row-one {
display: flex;
align-items: center;
margin-bottom: 0.25rem !important;
.button-label-copy {
flex-grow: 0;
line-height: 1.5rem;
font-weight: 500;
}
.button-label-sub-copy {
flex-grow: 1;
line-height: 1.25rem !important;
font-weight: 400;
font-size: 0.75rem;
color: #727676;
padding-left: 0.25rem;
}
.availability-indicator {
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0.125rem 1.5rem;
gap: 0.25rem;
background: #e3f2ea;
border-radius: 4.5rem;
.button-auxillary-copy {
justify-content: right;
line-height: 1.25rem !important;
font-weight: 400;
font-size: 0.75rem;
}
.green {
color: #006a36;
background: #e3f2ea;
}
.red {
color: #ac160b;
background: #e3f2ea;
}
}
}
}
</style> </style>

120
src/layouts/service-location/shop-question/shop-question.vue
View file

@ -12,7 +12,6 @@
buttonTypeString="shopListButton" buttonTypeString="shopListButton"
:buttonTypeObject="shopListButton" :buttonTypeObject="shopListButton"
class="radioQuestion" class="radioQuestion"
isOverflowScrollable
:questionText="questionText" :questionText="questionText"
:answers="answers" :answers="answers"
groupName="ChooseShop" groupName="ChooseShop"
@ -21,6 +20,7 @@
isRequired /> isRequired />
<textLink <textLink
ref="showMoreShopsLink" ref="showMoreShopsLink"
class="show-more-shops-link"
id="showMoreShopsId" id="showMoreShopsId"
cmsWidgetName="ShowMoreShopsLinkWidget" cmsWidgetName="ShowMoreShopsLinkWidget"
linkType="text" linkType="text"
@ -45,7 +45,7 @@ import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules"; import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from "@/constants/error-messages";
import baseMixin from "@/mixins/base-mixin.js"; import baseMixin from "@/mixins/base-mixin.js";
import textLink from '@/ux-components/text-link/text-link'; import textLink from "@/ux-components/text-link/text-link";
defineRule("option-required", required(errorMessages.OPTION_REQUIRED)); defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
@ -108,16 +108,16 @@ export default {
}); });
return result.data; return result.data;
}, },
shopIterator(array, n){ shopIterator(array, n) {
let l = array.length; let l = array.length;
return () => { return () => {
var end = this.shopIndex + n; var end = this.shopIndex + n;
var part = array.slice(this.shopIndex, end); var part = array.slice(this.shopIndex, end);
this.shopIndex = end < l ? end : this.shopIndex.length - 1; this.shopIndex = end < l ? end : this.shopIndex.length - 1;
return part; return part;
}; };
}, },
getNextShopsFromList() { async getNextShopsFromList() {
const nextShop = this.shopIterator(this.shops, 3); const nextShop = this.shopIterator(this.shops, 3);
// Map API result data // Map API result data
@ -134,12 +134,18 @@ export default {
if (this.answers.length === 0) { if (this.answers.length === 0) {
this.answers = mappedData; this.answers = mappedData;
} else { } else {
mappedData.forEach(shop => { mappedData.forEach((shop) => {
this.answers.push(shop); this.answers.push(shop);
}) });
} }
} await this.$nextTick();
window.scrollTo(0,document.body.scrollHeight);
// const shopQuestion = document.getElementsByClassName("shop-question")[0];
// shopQuestion.scrollIntoView({ behavior: "smooth", block: "end", inline: "end"});
},
}, },
watch: { watch: {
serviceZipCode: { serviceZipCode: {
@ -154,78 +160,38 @@ export default {
<style lang="scss"> <style lang="scss">
.shop-question { .shop-question {
margin-top: 1rem !important; margin-top: 1rem !important;
text-align: center !important;
//height: fit-content !important;
.question-text { .button-question {
margin-top: 0.5rem !important; .question-text {
} margin-top: 0.5rem !important;
.button-content {
.row-one {
display: flex;
align-items: center;
margin-bottom: 0.25rem !important;
.button-label-copy {
flex-grow: 0;
line-height: 1.5rem;
font-weight: 500;
}
.button-label-sub-copy {
flex-grow: 1;
line-height: 1.25rem !important;
font-weight: 400;
font-size: 0.75rem;
color: #727676;
padding-left: 0.25rem;
}
.availability-indicator {
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0.125rem 1.5rem;
gap: 0.25rem;
background: #E3F2EA;
border-radius: 4.5rem;
.button-auxillary-copy {
justify-content: right;
line-height: 1.25rem !important;
font-weight: 400;
font-size: 0.75rem;
}
.green {
color: #006A36;
background: #E3F2EA;
}
.red {
color: #AC160B;
background: #E3F2EA;
}
}
} }
// .button-question-overflow {
// height: 100% !important;
// .overflow-scroll {
// // Height will be determined by overall height of content above list
// height: max-content !important;
// overflow-x: hidden !important;
// -webkit-overflow-scrolling: touch;
// }
// }
} }
// .button-question-overflow {
// height: 60vh; //calc(100vh - 274px);
// // .overflow-scroll {
// // // Height will be determined by overall height of content above list
// // height: calc(100% - 314px);
// // overflow-x: hidden !important;
// // -webkit-overflow-scrolling: touch;
// // }
// }
} }
// .button-question-overflow {
// height: fit-content(100%) !important;
// .overflow-scroll {
// // Height will be determined by overall height of content above list
// height: inherit !important;
// overflow-x: scroll !important;
// -webkit-overflow-scrolling: touch;
// }
// }
.drop-off-alert { .drop-off-alert {
.alert-heading { .alert-heading {
text-align: left; text-align: left;

2
src/store/index.js
View file

@ -941,7 +941,7 @@ export const actions = {
return globalMethods.callMockHttpClient({ return globalMethods.callMockHttpClient({
method: endpoints.GetProviderLocations.method, method: endpoints.GetProviderLocations.method,
//TODO: Remove Mocky Endpoints //TODO: Remove Mocky Endpoints
endpoint: "https://run.mocky.io/v3/062bfed7-29a7-4001-b5e8-6135ec10494f", endpoint: "https://run.mocky.io/v3/abf2fa63-8287-4e46-b169-f5bec65c8dff",
}); });
}, },