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

CSR-1484: UI bug fixes

Browse source
This commit is contained in:
Adam Caouette 2023-07-16 15:30:11 -04:00
parent 206e5d2d26
commit 1ac432bd61
2 changed files with 38 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -508,20 +508,23 @@ export default {
("0" + i).slice(-2); ("0" + i).slice(-2);
if (offset === 0 && i === this.todayDateNum) { if (offset === 0 && i === this.todayDateNum) {
dayClasses += "current-day"; dayClasses += " current-day";
} }
if (offset === 0 && i < this.todayDateNum && calendarViewDirection === "future") { if (offset === 0 && i < this.todayDateNum && calendarViewDirection === "future") {
dayClasses += "unavailable-day"; dayClasses += " unavailable-day";
} }
if (offset === 0 && i > this.todayDateNum && calendarViewDirection === "past") { if (offset === 0 && i > this.todayDateNum && calendarViewDirection === "past") {
dayClasses += "unavailable-day"; dayClasses += " unavailable-day";
}
if (convertDateStringToDate(dateString).getDay() === 0) {
dayClasses += " sunday";
} }
if ( if (
this.hideSomeDaysForInitialView && this.hideSomeDaysForInitialView &&
convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum && convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum &&
convertDateStringToDate(initialViewEndDate).getDate() < i convertDateStringToDate(initialViewEndDate).getDate() < i
) { ) {
dayClasses += "day-hidden"; dayClasses += " day-hidden";
isMonthThatHidesSomeDaysForInitialView = true; isMonthThatHidesSomeDaysForInitialView = true;
} }
const dateObject = { const dateObject = {
@ -695,6 +698,8 @@ export default {
.grid-item { .grid-item {
text-align: center; text-align: center;
margin: 10px 3px; margin: 10px 3px;
font-size: 0.875rem;
line-height: 1.5;
&.first-day-, &.first-day-,
&.first-day-0 { &.first-day-0 {
@ -723,7 +728,7 @@ export default {
.separator-line { .separator-line {
grid-area: 2/1/2/8; grid-area: 2/1/2/8;
border-top: 1px solid $gray-500; border-top: 1px solid $gray-500;
margin: 0.75rem 0; margin: 0.5rem 0;
} }
.month-year { .month-year {
@ -753,7 +758,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
outline: none; outline: none;
height: 1.35rem; height: 1.5rem;
opacity: 1; opacity: 1;
transition: height ease 250ms, opacity ease 250ms; transition: height ease 250ms, opacity ease 250ms;
@ -771,12 +776,6 @@ export default {
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1; box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
background-color: $blue; background-color: $blue;
color: $white; color: $white;
&.past-day {
box-shadow: none;
background-color: transparent;
color: $gray-500;
font-weight: normal;
}
&.current-day { &.current-day {
&:after { &:after {
background-color: $white; background-color: $white;
@ -790,7 +789,6 @@ export default {
&:checked + label { &:checked + label {
color: $white; color: $white;
background: $blue; background: $blue;
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue;
&:after { &:after {
background-color: $white; background-color: $white;
} }
@ -815,10 +813,9 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 36px; width: 3rem;
height: 36px; height: 2.5rem;
min-width: 36px; min-width: 3rem;
border-radius: 50%;
span { span {
&.small { &.small {
@ -857,21 +854,35 @@ export default {
color: $blue; color: $blue;
background-color: $blue-100; background-color: $blue-100;
border: 1px solid $blue; border: 1px solid $blue;
min-width: 2.5rem;
width: 2.5rem;
border-radius: 50%;
} }
} }
&.past-day,
&.future-day,
&.unavailable-day { &.unavailable-day {
label { label {
color: $gray-500; color: $gray-500;
background-color: transparent; background-color: $gray-100;
border: 1px solid transparent; border: none;
pointer-events: 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 { &.current-day {
label { label {
font-weight: 700; font-weight: 500;
color: $black; color: $black;
&:after { &:after {

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

@ -497,4 +497,9 @@ export default {
line-height: 1.5; line-height: 1.5;
} }
} }
.funnel-sub-header {
h5.dark-header {
margin-bottom: .25rem;
}
}
</style> </style>