Merge pull request #1234 from Safelite/bugfix/CSR-1484
CSR-1484: UI bug fixes
This commit is contained in:
commit
55e4623128
2 changed files with 38 additions and 22 deletions
|
|
@ -508,20 +508,23 @@ export default {
|
|||
("0" + i).slice(-2);
|
||||
|
||||
if (offset === 0 && i === this.todayDateNum) {
|
||||
dayClasses += "current-day";
|
||||
dayClasses += " current-day";
|
||||
}
|
||||
if (offset === 0 && i < this.todayDateNum && calendarViewDirection === "future") {
|
||||
dayClasses += "unavailable-day";
|
||||
dayClasses += " unavailable-day";
|
||||
}
|
||||
if (offset === 0 && i > this.todayDateNum && calendarViewDirection === "past") {
|
||||
dayClasses += "unavailable-day";
|
||||
dayClasses += " unavailable-day";
|
||||
}
|
||||
if (convertDateStringToDate(dateString).getDay() === 0) {
|
||||
dayClasses += " sunday";
|
||||
}
|
||||
if (
|
||||
this.hideSomeDaysForInitialView &&
|
||||
convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum &&
|
||||
convertDateStringToDate(initialViewEndDate).getDate() < i
|
||||
) {
|
||||
dayClasses += "day-hidden";
|
||||
dayClasses += " day-hidden";
|
||||
isMonthThatHidesSomeDaysForInitialView = true;
|
||||
}
|
||||
const dateObject = {
|
||||
|
|
@ -695,6 +698,8 @@ export default {
|
|||
.grid-item {
|
||||
text-align: center;
|
||||
margin: 10px 3px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
|
||||
&.first-day-,
|
||||
&.first-day-0 {
|
||||
|
|
@ -723,7 +728,7 @@ export default {
|
|||
.separator-line {
|
||||
grid-area: 2/1/2/8;
|
||||
border-top: 1px solid $gray-500;
|
||||
margin: 0.75rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.month-year {
|
||||
|
|
@ -753,7 +758,7 @@ export default {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
height: 1.35rem;
|
||||
height: 1.5rem;
|
||||
opacity: 1;
|
||||
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;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
&.past-day {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
color: $gray-500;
|
||||
font-weight: normal;
|
||||
}
|
||||
&.current-day {
|
||||
&:after {
|
||||
background-color: $white;
|
||||
|
|
@ -790,7 +789,6 @@ export default {
|
|||
&:checked + label {
|
||||
color: $white;
|
||||
background: $blue;
|
||||
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue;
|
||||
&:after {
|
||||
background-color: $white;
|
||||
}
|
||||
|
|
@ -815,10 +813,9 @@ export default {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
min-width: 36px;
|
||||
border-radius: 50%;
|
||||
width: 3rem;
|
||||
height: 2.5rem;
|
||||
min-width: 3rem;
|
||||
|
||||
span {
|
||||
&.small {
|
||||
|
|
@ -857,21 +854,35 @@ export default {
|
|||
color: $blue;
|
||||
background-color: $blue-100;
|
||||
border: 1px solid $blue;
|
||||
min-width: 2.5rem;
|
||||
width: 2.5rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&.past-day,
|
||||
&.future-day,
|
||||
&.unavailable-day {
|
||||
label {
|
||||
color: $gray-500;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
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: 700;
|
||||
font-weight: 500;
|
||||
color: $black;
|
||||
|
||||
&:after {
|
||||
|
|
|
|||
|
|
@ -497,4 +497,9 @@ export default {
|
|||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.funnel-sub-header {
|
||||
h5.dark-header {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue