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

WIP update availability badge markup and css.

Browse source
This commit is contained in:
Bryan Mauger 2023-05-24 09:26:52 -04:00
parent e7e9d18ce4
commit 9a353913da
1 changed files with 18 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,13 +11,13 @@
<span class="m-0 button-label-copy" :class="textPosition">{{
buttonLabel
}}</span>
<span class="m-0 button-label-sub-copy" :class="textPosition">{{
<span class="m-0 caption ms-1" :class="textPosition">{{
buttonLabelSubCopy
}}</span>
<div
class="availability-indicator rounded-pill"
:class="availabilityRating === 'Good' ? 'green' : 'red'">
<div class="badge">&nbsp;</div>
<div class="availability-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>
@ -57,7 +57,7 @@ export default {
.then((data) => {
this.availabilityRating = data;
//this.isLoaderDisplayed = false;
})
})
},
data() {
return {
@ -137,50 +137,26 @@ export default {
.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: 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;
display: flex;
align-items: center;
margin-left: auto;
padding: .125rem .5rem;
.badge {
.availability-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-image: url("data:image/svg+xml,%3Csvg 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");
width: 13px;
height: 12px;
background-position: center;
background-repeat: no-repeat;
margin: 0 0.25rem 0 0;
}
@ -205,7 +181,7 @@ export default {
// 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;
@ -219,13 +195,13 @@ export default {
}
&.green {
color: #006a36;
background-color: #E3F2EA;
color: $green-700;
background-color: $green-100;
}
&.red {
color: #ac160b;
background-color: #FFE6E4;
color: $red-600;
background-color: $red-100;
}
}
}