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">
<div class="row-one">
<span class="m-0 button-label-copy" :class="textPosition">{{ buttonLabel }}</span>
<span class="m-0 button-label-sub-copy" :class="textPosition">{{ buttonLabelSubCopy }}</span>
<div class="availability-indicator" :class="availability === 'high' ? 'green' : 'red'">
<span class="m-0 button-auxillary-copy" >{{ buttonAuxillaryCopy }}</span>
</div>
<span class="m-0 button-label-sub-copy" :class="textPosition">{{
buttonLabelSubCopy
}}</span>
<div
class="availability-indicator"
:class="availability === 'high' ? 'green' : 'red'">
<span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span>
</div>
</div>
<span
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>

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

@ -12,7 +12,6 @@
buttonTypeString="shopListButton"
:buttonTypeObject="shopListButton"
class="radioQuestion"
isOverflowScrollable
:questionText="questionText"
:answers="answers"
groupName="ChooseShop"
@ -21,6 +20,7 @@
isRequired />
<textLink
ref="showMoreShopsLink"
class="show-more-shops-link"
id="showMoreShopsId"
cmsWidgetName="ShowMoreShopsLinkWidget"
linkType="text"
@ -45,7 +45,7 @@ import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
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));
@ -108,16 +108,16 @@ export default {
});
return result.data;
},
shopIterator(array, n){
let l = array.length;
shopIterator(array, n) {
let l = array.length;
return () => {
var end = this.shopIndex + n;
var part = array.slice(this.shopIndex, end);
this.shopIndex = end < l ? end : this.shopIndex.length - 1;
return part;
};
};
},
getNextShopsFromList() {
async getNextShopsFromList() {
const nextShop = this.shopIterator(this.shops, 3);
// Map API result data
@ -134,12 +134,18 @@ export default {
if (this.answers.length === 0) {
this.answers = mappedData;
} else {
mappedData.forEach(shop => {
mappedData.forEach((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: {
serviceZipCode: {
@ -154,78 +160,38 @@ export default {
<style lang="scss">
.shop-question {
margin-top: 1rem !important;
text-align: center !important;
//height: fit-content !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 {
.question-text {
margin-top: 0.5rem !important;
}
// .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 {
.alert-heading {
text-align: left;

2
src/store/index.js
View file

@ -941,7 +941,7 @@ export const actions = {
return globalMethods.callMockHttpClient({
method: endpoints.GetProviderLocations.method,
//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",
});
},