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

Functionality mostly complete, need Bryan to take a stab at remaining styling

Browse source
This commit is contained in:
Leah Schumann 2023-04-14 15:57:49 -04:00
parent 96cb744a7c
commit 86d7760d77
3 changed files with 44 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/layouts/service-location/service-location.vue
View file

@ -66,7 +66,9 @@
modalWidgetName="MobileLocationModalWidget" />
<shopQuestion
ref="shopQuestion"
v-show="selectedAppointmentType === 'Dropoff' || selectedAppointmentType === 'Inshop'"
v-show="
selectedAppointmentType === 'Dropoff' || selectedAppointmentType === 'Inshop'
"
:isDropoff="isDropoff"
:serviceZipCode="zipCode"
:selectedAppointmentType="selectedAppointmentType"

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

@ -1,35 +1,37 @@
<template>
<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">
<div
:aria-label="buttonLabel"
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>
<transition name="fade" mode="out-in">
<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">
<div
:aria-label="buttonLabel"
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>
</div>
<span
v-if="buttonBodyCopy"
class="m-0 button-label-sub-copy small"
:class="textPosition"
v-html="buttonBodyCopy"></span>
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed && selectingInitiatesLoad"
:class="[this.loaderColor, this.loaderPosition]" />
</div>
<span
v-if="buttonBodyCopy"
class="m-0 button-label-sub-copy small"
:class="textPosition"
v-html="buttonBodyCopy"></span>
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed && selectingInitiatesLoad"
:class="[this.loaderColor, this.loaderPosition]" />
</div>
</baseInputButton>
</baseInputButton>
</transition>
</template>
<script>

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

@ -33,7 +33,6 @@
</template>
<script>
// Components
import alert from "@/ux-components/alert/alert";
import buttonQuestion from "@/digital-components/button-question/button-question";
@ -142,9 +141,9 @@ export default {
}
await this.$nextTick();
const container = document.getElementsByClassName("page-container-grouped-styles")[0];
container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
},
},
@ -157,12 +156,14 @@ export default {
selectedAppointmentType: {
async handler() {
await this.$nextTick();
const container = document.getElementsByClassName("page-container-grouped-styles")[0];
console.log(container.scrollHeight + 200)
container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
}
}
const container = document.getElementsByClassName(
"page-container-grouped-styles"
)[0];
console.log(container.scrollHeight + 200);
container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
},
},
},
};
</script>
@ -176,7 +177,6 @@ export default {
.question-text {
margin-top: 0.5rem !important;
}
}
}
@ -191,5 +191,4 @@ export default {
padding-left: 1.5rem !important;
padding-right: 0.5rem !important;
}
</style>