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

Pre-styling help on badges

Browse source
This commit is contained in:
Leah Schumann 2023-05-24 08:53:39 -04:00
parent 0494bdc148
commit e7e9d18ce4
3 changed files with 90 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
View file

@ -82,5 +82,4 @@ export async function getAvailabilityRating(providerNumber, startDate, endDate,
const shopStatus = isGoodAvailability ? "Good" : "Low";
return Promise.resolve(shopStatus);
}

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

@ -3,7 +3,7 @@
<baseInputButton
v-bind="$props"
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
v-model="selectedValue" >
v-model="selectedValue">
<div
:aria-label="buttonLabel"
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
@ -15,9 +15,11 @@
buttonLabelSubCopy
}}</span>
<div
class="availability-indicator"
:class="availability === 'high' ? 'green' : 'red'">
<span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span>
class="availability-indicator rounded-pill"
:class="availabilityRating === 'Good' ? 'green' : 'red'">
<div class="badge">&nbsp;</div>
<span class="m-0 button-auxillary-copy">{{ availabilityRating == 'Good' ? "Appts available" : "Appts low" }}</span>
<loader v-if="isLoaderDisplayed" :class="[this.loaderColor, this.loaderPosition]" />
</div>
</div>
<span
@ -28,9 +30,7 @@
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed"
:class="[this.loaderColor, this.loaderPosition]" />
<!-- <loader v-if="isLoaderDisplayed" :class="[this.loaderColor, this.loaderPosition]" /> -->
</div>
</baseInputButton>
</transition>
@ -53,14 +53,17 @@ export default {
},
mounted() {
this.displayLoader();
console.log(this.additionalButtonData)
},
updated() {
this.isLoaderDisplayed = false
this.additionalButtonData.availabilityRatingCallback(this.modelValue)
.then((data) => {
this.availabilityRating = data;
//this.isLoaderDisplayed = false;
})
},
data() {
return {
isLoaderDisplayed: false,
badgeText: "",
availabilityRating: ""
};
},
methods: {
@ -81,9 +84,7 @@ export default {
</script>
<style lang="scss" scoped>
.loader {
position: absolute;
}
.list-button {
outline: none;
input[type="radio"],
@ -154,30 +155,77 @@ export default {
}
.availability-indicator {
display: block;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0.125rem 1.5rem;
gap: 0.25rem;
background: #e3f2ea;
border-radius: 4.5rem;
/* display: inline; */
background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
/* background-size: 0.75rem; */
/* line-height: 1rem; */
background-position: left;
position: absolute;
width: 12px;
height: 12px;
margin: 0 0.5rem;
left: 0;
.badge {
display: inline;
background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 0.75rem;
line-height: 1rem;
// height: 0.75rem !important;
// width: 0.75rem !important;
//width: 1rem;
//padding-left: 0.5rem;
// margin-right: 0.25rem !important;
// padding-right: 0rem;
// margin-left: 0rem;
background-position: center;
}
.button-auxillary-copy {
box-sizing: border-box;
justify-content: right;
line-height: 1.25rem !important;
font-weight: 400;
font-weight: 500;
font-size: 0.75rem;
align-items: center;
//padding-right: 0.5rem;
// background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
// background-repeat: no-repeat;
// background-size: 0.75rem;
// background-position: left;
}
.green {
// .button-auxillary-copy::before {
// display: inline-flex;
// //content: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
// height: 1.25rem;
// padding: 4px;
// width: 1.25rem;
// background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
// background-repeat: no-repeat;
// background-size: 0.75rem;
// background-position: left;
// }
.loader {
display: none;
padding: 0.25rem 0.5rem;
//position: absolute;
}
&.green {
color: #006a36;
background: #e3f2ea;
background-color: #E3F2EA;
}
.red {
&.red {
color: #ac160b;
background: #e3f2ea;
background-color: #FFE6E4;
}
}
}

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

@ -19,7 +19,8 @@
textPosition="text-start"
v-model="selectedProviderNumber"
isRequired
validationRules="option-required" />
validationRules="option-required"
:additionalButtonData="additionalButtonData"/>
<textLink
v-show="displaySeeMoreLocationsLink"
ref="showMoreShopsLink"
@ -104,6 +105,11 @@ export default {
showMoreShopsLinkText() {
return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
},
additionalButtonData() {
return {
availabilityRatingCallback: getAvailabilityRating
}
}
},
methods: {
loadInitialData(serviceZipCode) {
@ -143,15 +149,12 @@ export default {
const state = shopProvider.address.state;
const zipCode = shopProvider.address.zipCode;
const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
const availabilityRatingCallback = getAvailabilityRating;
return {
buttonLabel: city,
buttonLabelSubCopy: `${distanceInMiles} mi`,
buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
//buttonAuxillaryCopy: availabilityRating,
value: shopProvider.providerNumber,
additionalButtonData: availabilityRatingCallback,
};
});
@ -163,9 +166,14 @@ export default {
});
}
for (let i = 0; i < this.answers.length; i++) {
this.answers[i].buttonAuxillaryCopy = await this.answers[i].additionalButtonData(this.answers[i].value);
}
// for (let i = 0; i < this.answers.length; i++) {
// const availabilityRating = await this.answers[i].getAvailabilityRating(
// this.answers[i].value
// );
// this.answers[i].buttonAuxillaryCopy = availabilityRating ? "Appts available" : "Appts low";
// }
await this.$nextTick();