update
This commit is contained in:
Bill Richardson
parent
b15ea179b9
commit
6a2bc71ea0
1 changed files with 2 additions and 291 deletions
|
|
@ -389,9 +389,10 @@ export default {
|
||||||
const dateInView = this.getDateToShow(initialDayIndex);
|
const dateInView = this.getDateToShow(initialDayIndex);
|
||||||
const dateInViewString = convertDateToDateString(dateInView);
|
const dateInViewString = convertDateToDateString(dateInView);
|
||||||
if (dateInViewString === myDateString) {
|
if (dateInViewString === myDateString) {
|
||||||
const isAfternoonSlot = isAfternoon(myDateString);
|
|
||||||
const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === dateInViewString);
|
const selectableDateObj = this.selectableDatesData.find((dateObj) => dateObj.date === dateInViewString);
|
||||||
if (selectableDateObj) {
|
if (selectableDateObj) {
|
||||||
|
const initialTimeSlot = this.mainStore.order.schedule;
|
||||||
|
const isAfternoonSlot = isAfternoon(initialTimeSlot?.startTime);
|
||||||
if (isAfternoonSlot) {
|
if (isAfternoonSlot) {
|
||||||
this.showAfternoonTimes(initialDayIndex);
|
this.showAfternoonTimes(initialDayIndex);
|
||||||
this.findInitialTimeByStore(selectableDateObj.afternoonTimeSlots);
|
this.findInitialTimeByStore(selectableDateObj.afternoonTimeSlots);
|
||||||
|
|
@ -898,239 +899,6 @@ export default {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
position: relative;
|
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 {
|
.btn-link {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -1140,63 +908,6 @@ export default {
|
||||||
box-shadow: none;
|
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 {
|
.btn-link {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue