Pre-styling help on badges
This commit is contained in:
Leah Schumann
parent
0494bdc148
commit
e7e9d18ce4
3 changed files with 90 additions and 35 deletions
|
|
@ -82,5 +82,4 @@ export async function getAvailabilityRating(providerNumber, startDate, endDate,
|
||||||
const shopStatus = isGoodAvailability ? "Good" : "Low";
|
const shopStatus = isGoodAvailability ? "Good" : "Low";
|
||||||
|
|
||||||
return Promise.resolve(shopStatus);
|
return Promise.resolve(shopStatus);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,11 @@
|
||||||
buttonLabelSubCopy
|
buttonLabelSubCopy
|
||||||
}}</span>
|
}}</span>
|
||||||
<div
|
<div
|
||||||
class="availability-indicator"
|
class="availability-indicator rounded-pill"
|
||||||
:class="availability === 'high' ? 'green' : 'red'">
|
:class="availabilityRating === 'Good' ? 'green' : 'red'">
|
||||||
<span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span>
|
<div class="badge"> </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>
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
|
|
@ -28,9 +30,7 @@
|
||||||
<span v-if="screenReaderOnlyText" class="sr-only">
|
<span v-if="screenReaderOnlyText" class="sr-only">
|
||||||
{{ screenReaderOnlyText }}
|
{{ screenReaderOnlyText }}
|
||||||
</span>
|
</span>
|
||||||
<loader
|
<!-- <loader v-if="isLoaderDisplayed" :class="[this.loaderColor, this.loaderPosition]" /> -->
|
||||||
v-if="isLoaderDisplayed"
|
|
||||||
:class="[this.loaderColor, this.loaderPosition]" />
|
|
||||||
</div>
|
</div>
|
||||||
</baseInputButton>
|
</baseInputButton>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
@ -53,14 +53,17 @@ export default {
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.displayLoader();
|
this.displayLoader();
|
||||||
console.log(this.additionalButtonData)
|
this.additionalButtonData.availabilityRatingCallback(this.modelValue)
|
||||||
},
|
.then((data) => {
|
||||||
updated() {
|
this.availabilityRating = data;
|
||||||
this.isLoaderDisplayed = false
|
//this.isLoaderDisplayed = false;
|
||||||
|
})
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isLoaderDisplayed: false,
|
isLoaderDisplayed: false,
|
||||||
|
badgeText: "",
|
||||||
|
availabilityRating: ""
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -81,9 +84,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.loader {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.list-button {
|
.list-button {
|
||||||
outline: none;
|
outline: none;
|
||||||
input[type="radio"],
|
input[type="radio"],
|
||||||
|
|
@ -154,30 +155,77 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.availability-indicator {
|
.availability-indicator {
|
||||||
display: block;
|
/* display: inline; */
|
||||||
flex-direction: row;
|
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");
|
||||||
justify-content: center;
|
background-repeat: no-repeat;
|
||||||
align-items: center;
|
/* background-size: 0.75rem; */
|
||||||
padding: 0.125rem 1.5rem;
|
/* line-height: 1rem; */
|
||||||
gap: 0.25rem;
|
background-position: left;
|
||||||
background: #e3f2ea;
|
position: absolute;
|
||||||
border-radius: 4.5rem;
|
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 {
|
.button-auxillary-copy {
|
||||||
|
box-sizing: border-box;
|
||||||
justify-content: right;
|
justify-content: right;
|
||||||
line-height: 1.25rem !important;
|
line-height: 1.25rem !important;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
font-size: 0.75rem;
|
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;
|
color: #006a36;
|
||||||
background: #e3f2ea;
|
background-color: #E3F2EA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.red {
|
&.red {
|
||||||
color: #ac160b;
|
color: #ac160b;
|
||||||
background: #e3f2ea;
|
background-color: #FFE6E4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,8 @@
|
||||||
textPosition="text-start"
|
textPosition="text-start"
|
||||||
v-model="selectedProviderNumber"
|
v-model="selectedProviderNumber"
|
||||||
isRequired
|
isRequired
|
||||||
validationRules="option-required" />
|
validationRules="option-required"
|
||||||
|
:additionalButtonData="additionalButtonData"/>
|
||||||
<textLink
|
<textLink
|
||||||
v-show="displaySeeMoreLocationsLink"
|
v-show="displaySeeMoreLocationsLink"
|
||||||
ref="showMoreShopsLink"
|
ref="showMoreShopsLink"
|
||||||
|
|
@ -104,6 +105,11 @@ export default {
|
||||||
showMoreShopsLinkText() {
|
showMoreShopsLinkText() {
|
||||||
return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
|
return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
|
||||||
},
|
},
|
||||||
|
additionalButtonData() {
|
||||||
|
return {
|
||||||
|
availabilityRatingCallback: getAvailabilityRating
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
loadInitialData(serviceZipCode) {
|
loadInitialData(serviceZipCode) {
|
||||||
|
|
@ -143,15 +149,12 @@ export default {
|
||||||
const state = shopProvider.address.state;
|
const state = shopProvider.address.state;
|
||||||
const zipCode = shopProvider.address.zipCode;
|
const zipCode = shopProvider.address.zipCode;
|
||||||
const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
|
const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
|
||||||
const availabilityRatingCallback = getAvailabilityRating;
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
buttonLabel: city,
|
buttonLabel: city,
|
||||||
buttonLabelSubCopy: `${distanceInMiles} mi`,
|
buttonLabelSubCopy: `${distanceInMiles} mi`,
|
||||||
buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
|
buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
|
||||||
//buttonAuxillaryCopy: availabilityRating,
|
|
||||||
value: shopProvider.providerNumber,
|
value: shopProvider.providerNumber,
|
||||||
additionalButtonData: availabilityRatingCallback,
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -163,9 +166,14 @@ export default {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let i = 0; i < this.answers.length; i++) {
|
// for (let i = 0; i < this.answers.length; i++) {
|
||||||
this.answers[i].buttonAuxillaryCopy = await this.answers[i].additionalButtonData(this.answers[i].value);
|
// const availabilityRating = await this.answers[i].getAvailabilityRating(
|
||||||
}
|
// this.answers[i].value
|
||||||
|
// );
|
||||||
|
|
||||||
|
// this.answers[i].buttonAuxillaryCopy = availabilityRating ? "Appts available" : "Appts low";
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
await this.$nextTick();
|
await this.$nextTick();
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue