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);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<baseInputButton
|
<baseInputButton
|
||||||
v-bind="$props"
|
v-bind="$props"
|
||||||
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
|
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
|
<div
|
||||||
:aria-label="buttonLabel"
|
:aria-label="buttonLabel"
|
||||||
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">
|
||||||
|
|
@ -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