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

CASH-464: final styling changes

Browse source
This commit is contained in:
Adam Caouette 2025-04-24 11:17:50 -04:00
parent 0add6bd7ac
commit 5500ced694
4 changed files with 103 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/digital-components/button-question/button-question.vue
View file

@ -31,7 +31,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
: "Select an option below."
}}
</legend>
<div :class="getComponentLoopWrapperClasses">
<div :class="getComponentLoopWrapperClasses" class="button-inner-wrapper">
<div
:class="getComponentWrapperClasses"
v-for="answer in buttonsInfo"

59
src/digital-components/date-picker/date-picker.vue
View file

@ -13,7 +13,7 @@
hideSomeDaysForInitialView ? 'partial-month-initial-view' : '',
month.monthClass,
]">
<div class="month-year body-small d-flex align-items-center small">
<div class="month-year body-small d-flex align-items-center">
{{ month.monthLabel }} {{ month.yearNum?.toString() }}
</div>
<div
@ -22,36 +22,35 @@
<span class="legend-circle me-1"></span>
&equals; Available
</div>
<div class="separator-line"></div>
<div class="nav-back ps-3"><button></button></div>
<div class="nav-forward pe-3"><button></button></div>
<div class="grid-item caption">
<span class="sr-only">Sunday</span>
S
SUN
</div>
<div class="grid-item caption">
<span class="sr-only">Monday</span>
M
MON
</div>
<div class="grid-item caption">
<span class="sr-only">Tuesday</span>
T
TUE
</div>
<div class="grid-item caption">
<span class="sr-only">Wednesday</span>
W
WED
</div>
<div class="grid-item caption">
<span class="sr-only">Thursday</span>
T
THU
</div>
<div class="grid-item caption">
<span class="sr-only">Friday</span>
F
FRI
</div>
<div class="grid-item caption">
<span class="sr-only">Saturday</span>
S
SAT
</div>
<div
v-for="date in month.dates"
@ -93,7 +92,7 @@
<button
v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
type="button"
class="btn btn-link"
class="btn btn-link view-more-dates"
id="viewMoreDates"
:disabled="isLoading"
@click="showAnotherMonth">
@ -112,11 +111,11 @@
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
:selectedDate="selectedDate"
:appointmentType="appointmentType"
:premiumAppointmentFee="mobilePremiumAppointmentFee"
:premiumAppointmentFee="premiumAppointmentFee"
:displayWaitList="displayWaitList"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
:estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
:estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
:estimatedServiceMinutesMinimum="estimatedServiceMinutesMinimum"
:estimatedServiceMinutesMaximum="estimatedServiceMinutesMaximum"
@waitListRequested="handleWaitListRequested"
@time-slot-modal-closed="timeSlotModalClosed" />
</fieldset>
@ -198,6 +197,11 @@ export default {
pricingByDayUpcharge: Number,
isPricingByDayExperiment: Boolean,
timeSlotsForSelectedDate: Object,
appointmentType: String,
premiumAppointmentFee: Object,
estimatedServiceMinutesMinimum: Number,
estimatedServiceMinutesMaximum: Number,
displayWaitList: Boolean,
},
setup(props) {
const uuid = uuidv4();
@ -792,6 +796,9 @@ export default {
getSupportingItems() {
return store.getters.lineItems.supportingItems;
},
handleWaitListRequested(value) {
this.$emit("waitListRequested", value);
},
},
watch: {
modelValue(newValue) {
@ -831,6 +838,10 @@ export default {
fieldset {
flex-grow: 1;
position: relative;
.view-more-dates {
color: $blue;
}
}
.loader {
height: 2rem;
@ -858,9 +869,13 @@ export default {
.grid-item {
text-align: center;
margin: 10px 3px;
font-size: 0.875rem;
font-size: 0.75rem;
line-height: 1.5;
&.caption {
color: $gray-550;
}
&.first-day-,
&.first-day-0 {
grid-column-start: 1;
@ -893,9 +908,11 @@ export default {
.month-year {
grid-area: 1 / 1 / 2 / 5;
text-transform: uppercase;
font-weight: 300;
font-family: AvertaBold;
letter-spacing: 0.75px;
color: $black;
justify-content: center;
margin-bottom: 0.5rem;
}
.legend {
grid-area: 1 / 5 / 2 / 8;
@ -1241,6 +1258,16 @@ export default {
}
}
}
:deep(.button-inner-wrapper) {
display: flex;
max-width: 100%;
flex-wrap: wrap;
gap: 0 0.5rem;
& > div {
flex: 0 0 calc(50% - 0.25rem);
}
}
}
.btn-link {

59
src/layouts/schedule/schedule.vue
View file

@ -1,7 +1,7 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="container-fluid page-container-grouped-styles page-schedule">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@ -14,7 +14,7 @@
<textBlock
cmsWidgetName="ChangeShopLink"
justifyText="center"
class="mb-3 text-link-small"
class="mb-5 text-link-small change-location"
marginTopSizeOverride="1" />
</template>
<locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
@ -26,13 +26,23 @@
class="text-link-small"
:customSelectableDatesCallback="getAvailableDatesMethod"
validationRules="date-required"
@date-clicked="handleDateClicked"
:pricingByDayBasePrice="pricingByDayBasePrice"
:pricingByDayUpcharge="pricingByDayUpcharge"
:showPricingByDay="showPricingByDay"
:isPricingByDayExperiment="isPricingByDayExperiment"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
:appointmentType="appointmentType"
:premiumAppointmentFee="mobilePremiumAppointmentFee"
:estimatedServiceMinutesMinimum="
selectableDatesData.estimatedServiceMinutesMinimum
"
:estimatedServiceMinutesMaximum="
selectableDatesData.estimatedServiceMinutesMaximum
"
@TimeSlotSelected="updateTimeSlot"
@date-clicked="handleDateClicked" />
:displayWaitList="displayWaitList"
@waitListRequested="handleWaitListRequested" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
@ -717,27 +727,32 @@ export default {
</script>
<style lang="scss">
.text-link-small {
a,
.btn-link {
width: auto;
margin: 0 auto;
height: auto;
font-size: 0.875rem;
line-height: 1.5;
padding: 0;
border-radius: 0;
&:focus {
outline: 1px solid $blue;
}
@include media-breakpoint-up(md) {
font-size: 1rem;
.page-schedule {
.text-link-small {
a,
.btn-link {
width: auto;
margin: 0 auto;
height: auto;
font-size: 0.875rem;
line-height: 1.75;
padding: 0;
border-radius: 0;
&:focus {
outline: 1px solid $blue;
}
@include media-breakpoint-up(md) {
font-size: 1rem;
}
}
}
}
.funnel-sub-header {
h5.dark-header {
margin-bottom: 0.25rem;
.funnel-sub-header {
h5.dark-header {
margin-bottom: 0.25rem;
}
}
.change-location a {
font-family: AvertaSemibold;
}
}
</style>

47
src/layouts/schedule/time-slot-question/time-slot-question.vue
View file

@ -1,5 +1,6 @@
<template>
<div class="time-slots-modal">
<div class="time-slots-question">
<textBlock customText="Select a time:" justifyText="center" class="time-slot-header" />
<textBlock
v-show="durationTextBlockCopy"
:customText="durationTextBlockCopy"
@ -10,7 +11,7 @@
ref="buttonQuestion"
buttonTypeString="timeSlotModalListButton"
:buttonTypeObject="timeSlotModalListButton"
class="mt-5"
class="mt-4"
:answers="availableTimeSlots"
groupName="chooseTimeSlot"
textPosition="text-center"
@ -20,8 +21,16 @@
<div
v-if="hasWaitListExperiment && displayWaitListFeature"
class="mt-5 bg-light rounded waitlist">
<textBlock marginTopSizeOverride="0" />
<checkboxQuestion class="mt-3" v-model="waitListRequested" @click="waitListChecked" />
<textBlock
cmsWidgetName="WaitListLabelWidget"
typeStyle="medium"
fontWeight="600"
marginTopSizeOverride="0" />
<checkboxQuestion
class="mt-3"
cmsWidgetName="WaitListQuestionWidget"
v-model="waitListRequested"
@click="waitListChecked" />
</div>
<div
v-if="waitListRequested"
@ -88,7 +97,6 @@ defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));
export default {
name: "time-slot-no-modal-question",
// Removed 'modal' emits
emits: ["update:modelValue", "TimeSlotSelected", "click-event"],
props: {
modelValue: {
@ -295,22 +303,9 @@ export default {
}
},
isSameDay() {
console.log(
"%c TSQ - calculating isSameDay; this.selectedDate ",
"color: beige;",
this.selectedDate
);
console.log(
"%c TSQ - calculating isSameDay; IS THIS WORKING OK? ",
"color: beige;"
);
debugger; // eslint-disable-line no-debugger
if (!this.timeSlotsForSelectedDate) {
return false;
}
// const selectedDate = this.timeSlotsForSelectedDate.date;
const todaysDate = new Date().toISOString().split("T")[0];
return this.selectedDate === todaysDate;
},
@ -554,13 +549,16 @@ export default {
</script>
<style lang="scss">
.time-slots-modal {
.modal-header {
padding-bottom: 0;
margin-bottom: 0 !important;
.time-slots-question {
border-top: 1px solid $gray-500;
margin-top: 1.5rem;
.time-slot-header {
font-family: AvertaBold;
margin-top: 1.5rem;
}
.text-block.duration-text-block {
margin-top: 4px !important;
margin-top: 0;
}
.supplemental-information {
line-height: 1.5rem;
@ -577,8 +575,7 @@ export default {
border-radius: 8px;
font-size: 1rem;
padding: 16px;
margin-top: 16px;
margin-bottom: -8px;
.ui-checkbox {
padding-left: 0px;
input {