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" /> modalWidgetName="MobileLocationModalWidget" />
<shopQuestion <shopQuestion
ref="shopQuestion" ref="shopQuestion"
v-show="selectedAppointmentType === 'Dropoff' || selectedAppointmentType === 'Inshop'" v-show="
selectedAppointmentType === 'Dropoff' || selectedAppointmentType === 'Inshop'
"
:isDropoff="isDropoff" :isDropoff="isDropoff"
:serviceZipCode="zipCode" :serviceZipCode="zipCode"
:selectedAppointmentType="selectedAppointmentType" :selectedAppointmentType="selectedAppointmentType"

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

@ -1,35 +1,37 @@
<template> <template>
<baseInputButton <transition name="fade" mode="out-in">
v-bind="$props" <baseInputButton
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2" v-bind="$props"
v-model="selectedValue"> buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
<div v-model="selectedValue">
:aria-label="buttonLabel" <div
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4"> :aria-label="buttonLabel"
<div class="row-one"> class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0 button-label-copy" :class="textPosition">{{ buttonLabel }}</span> <div class="row-one">
<span class="m-0 button-label-sub-copy" :class="textPosition">{{ <span class="m-0 button-label-copy" :class="textPosition">{{ buttonLabel }}</span>
buttonLabelSubCopy <span class="m-0 button-label-sub-copy" :class="textPosition">{{
}}</span> buttonLabelSubCopy
<div }}</span>
class="availability-indicator" <div
:class="availability === 'high' ? 'green' : 'red'"> class="availability-indicator"
<span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span> :class="availability === 'high' ? 'green' : 'red'">
<span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span>
</div>
</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> </div>
<span </baseInputButton>
v-if="buttonBodyCopy" </transition>
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>
</template> </template>
<script> <script>

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

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