From 6a2bc71ea0e2c3826c779e4ad34f40a217c2ca71 Mon Sep 17 00:00:00 2001 From: Bill Richardson Date: Wed, 14 Jan 2026 13:42:10 -0500 Subject: [PATCH] update --- .../date-picker/date-picker.vue | 293 +----------------- 1 file changed, 2 insertions(+), 291 deletions(-) diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 7c9bacc2..80a19ab6 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -389,9 +389,10 @@ export default { const dateInView = this.getDateToShow(initialDayIndex); const dateInViewString = convertDateToDateString(dateInView); if (dateInViewString === myDateString) { - const isAfternoonSlot = isAfternoon(myDateString); const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === dateInViewString); if (selectableDateObj) { + const initialTimeSlot = this.mainStore.order.schedule; + const isAfternoonSlot = isAfternoon(initialTimeSlot?.startTime); if (isAfternoonSlot) { this.showAfternoonTimes(initialDayIndex); this.findInitialTimeByStore(selectableDateObj.afternoonTimeSlots); @@ -898,239 +899,6 @@ export default { flex-grow: 1; position: relative; } - .calendar-grid-container { - margin: 0 auto 2rem auto; - max-width: 414px; - position: relative; - transition: height ease 2s, opacity ease 2s; - display: grid; - grid-template-columns: repeat(7, 1fr); - justify-content: center; - align-items: center; - padding: 0 0.75rem; - opacity: 1; - - .grid-item { - text-align: center; - margin: 10px 3px; - font-size: 0.875rem; - line-height: 1.5; - - &.first-day-, - &.first-day-0 { - grid-column-start: 1; - } - &.first-day-1 { - grid-column-start: 2; - } - &.first-day-2 { - grid-column-start: 3; - } - &.first-day-3 { - grid-column-start: 4; - } - &.first-day-4 { - grid-column-start: 5; - } - &.first-day-5 { - grid-column-start: 6; - } - &.first-day-6 { - grid-column-start: 7; - } - } - - .separator-line { - grid-area: 2/1/2/8; - border-top: 1px solid $gray-500; - margin: 0.5rem 0; - } - - .month-year { - grid-area: 1 / 1 / 2 / 5; - text-transform: uppercase; - font-weight: 300; - } - .legend { - grid-area: 1 / 5 / 2 / 8; - .legend-circle { - border-radius: 50%; - width: 16px; - height: 16px; - background-color: $blue-100; - border: 1px solid $blue; - } - } - .nav-back, - .nav-forward { - display: none; - } - - .radio-wrapper { - position: relative; - display: flex; - justify-content: center; - align-items: center; - outline: none; - height: 1.5rem; - opacity: 1; - transition: height ease 250ms, opacity ease 250ms; - - input[type='radio'] { - position: absolute; //override bootstrap - height: 0; - opacity: 0; - - &:focus-visible + label { - box-shadow: 0 0 0 2.5px $blue; - } - - &:focus + label, - &:checked:focus + label { - box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1; - background-color: $blue; - color: $white; - &.current-day { - &:after { - background-color: $white; - } - .first-day { - color: $white; - } - } - } - - &:checked + label { - color: $white; - background: $blue; - &:after { - background-color: $white; - } - .first-day { - color: $white; - } - } - } - - .first-day { - position: absolute; - font-size: 9px; - font-weight: 500; - color: $gray-600; - top: 0; - z-index: 1; - } - - label { - position: relative; - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - min-width: 2.5rem; - width: 2.5rem; - height: 2.5rem; - - span { - &.small { - font-size: 0.75rem; - color: $gray-550; - } - } - - &:hover, - &:checked { - @include media-breakpoint-up(sm) { - box-shadow: 0 0 0 4px transparent; - background-color: $blue; - color: $white; - &:after { - background-color: $white; - } - } - cursor: pointer; - &.current-day { - + .first-day { - color: $white; - } - } - .first-day { - color: $white; - } - } - + p { - display: none; - } - } - - &.selectable-day { - label { - color: $blue; - background-color: $blue-100; - border: 1px solid $blue; - min-width: 2.5rem; - width: 2.5rem; - border-radius: 50%; - } - } - &.unavailable-day { - label { - color: $gray-500; - background-color: $gray-100; - border: none; - pointer-events: none; - } - } - &.unavailable-day:not(&.sunday) { - label { - &::before { - content: ''; - display: inline-block; - position: absolute; - left: -1rem; - width: 1rem; - height: 2.5rem; - background: $gray-100; - } - } - } - &.current-day { - label { - font-weight: 500; - color: $black; - - &:after { - content: ''; - width: 0.25rem; - height: 0.25rem; - border-radius: 50%; - background-color: $black; - position: absolute; - top: 28px; - } - .first-day { - color: $blue; - } - } - } - } - - &.partial-month-initial-view { - .day-hidden { - opacity: 0; - overflow: hidden; - display: flex; - margin: 0; - max-height: 0; - } - } - &.month-hidden { - opacity: 0; - max-height: 0; - margin-bottom: 0; - overflow: hidden; - } - } .btn-link { font-weight: 500; @@ -1140,63 +908,6 @@ export default { box-shadow: none; } } - - .past { - .calendar-grid-container { - .month-year { - grid-area: 1 / 1 / 2 / 6; - } - .nav-forward { - grid-area: 1 / 7 / 2 / 8; - display: flex; - justify-content: flex-end; - button { - &:after { - content: ''; - position: absolute; - width: 7px; - height: 12px; - background-image: url($svg-date-picker-forward-button); - } - } - } - .nav-back { - grid-area: 1 / 6 / 2 / 7; - display: flex; - justify-content: flex-end; - button { - &:after { - content: ''; - position: absolute; - width: 7px; - height: 12px; - background-image: url($svg-date-picker-nav-back-button); - } - } - } - .nav-back, - .nav-forward { - button { - position: relative; - border-radius: 50%; - width: 28px; - height: 28px; - background-color: $blue-100; - border: 1px solid $blue; - display: flex; - justify-content: center; - align-items: center; - &:focus, - &:focus-visible { - border: 2.5px solid $blue; - box-shadow: none; - background-color: $blue-100; - color: $white; - } - } - } - } - } } .btn-link { display: block;