Enhance calendar layout and duty list rendering

- Introduced a sticky header for the calendar to improve navigation.
- Updated the duty list display to highlight today's date with a distinct style.
- Added new CSS styles for better visual presentation of duty days and improved layout consistency.
This commit is contained in:
2026-02-17 23:44:43 +03:00
parent 8a7057a23f
commit 1a8ee72b8e
3 changed files with 65 additions and 9 deletions

View File

@@ -73,6 +73,19 @@ body {
text-align: center;
}
.calendar-sticky {
position: sticky;
top: 0;
z-index: 10;
background: var(--bg);
padding-bottom: 12px;
margin-bottom: 4px;
}
.calendar-sticky.is-scrolled {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
@@ -215,6 +228,26 @@ body {
margin: 0 0 8px 0;
}
.duty-list-day {
margin-bottom: 16px;
}
.duty-list-day--today .duty-list-day-title {
color: var(--today);
font-weight: 700;
}
.duty-list-day--today .duty-list-day-title::before {
content: "";
display: inline-block;
width: 4px;
height: 1em;
background: var(--today);
border-radius: 2px;
margin-right: 8px;
vertical-align: middle;
}
.duty-item {
display: grid;
grid-template-columns: 5.5em 1fr;