maddo/WorkTracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: Implement sidebar toggle functionality and enhance Monthly Timesheet summary view

Browse source
This commit is contained in:
Marco 2026-04-20 17:23:54 +02:00
commit a7f8dfba01
13 changed files with 686 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

133
wwwroot/app.css
View file

@ -161,7 +161,8 @@ h1:focus {
top: 2rem;
left: 0.35rem;
z-index: 20;
width: min(18rem, calc(100vw - 3rem));
width: min(16rem, calc(100vw - 2rem));
max-width: calc(100vw - 2rem);
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.75rem;
@ -169,6 +170,16 @@ h1:focus {
padding: 0.75rem;
}
.calendar-popup-right {
left: auto;
right: 0.35rem;
}
.calendar-popup-left {
left: 0.35rem;
right: auto;
}
.calendar-popup-section {
display: flex;
flex-direction: column;
@ -228,4 +239,124 @@ h1:focus {
left: 0;
width: calc(100vw - 2rem);
}
}
/* Monthly timesheet summary */
.timesheet-summary-card {
overflow: hidden;
}
.timesheet-summary-table {
min-width: max-content;
}
.timesheet-summary-table thead th {
background-color: #f8f9fa;
white-space: nowrap;
}
.timesheet-summary-table th,
.timesheet-summary-table td {
min-width: 2.2rem;
padding: 0.25rem 0.12rem;
vertical-align: middle;
}
.timesheet-summary-sticky-column {
position: sticky;
left: 0;
z-index: 2;
min-width: 15rem !important;
background-color: #fff;
}
.timesheet-summary-table thead .timesheet-summary-sticky-column {
z-index: 3;
background-color: #f8f9fa;
}
.timesheet-summary-total-column {
background-color: #f8f9fa;
min-width: 3.3rem !important;
}
.timesheet-summary-table tbody tr:nth-child(odd) td,
.timesheet-summary-table tbody tr:nth-child(odd) .timesheet-summary-sticky-column {
background-color: #fcfcfd;
}
.timesheet-summary-table .timesheet-summary-day-danger {
background-color: #f8d7da !important;
}
.timesheet-summary-table .timesheet-summary-day-closure {
background-color: #e2e3e5 !important;
}
.timesheet-summary-day-header {
position: relative;
cursor: default;
}
.timesheet-summary-day-popup {
position: absolute;
top: calc(100% + 0.35rem);
left: 50%;
z-index: 15;
width: min(18rem, calc(100vw - 2rem));
max-width: calc(100vw - 2rem);
padding: 0.65rem 0.75rem;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 0.7rem;
background: #fff;
box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.18);
text-align: left;
transform: translateX(-50%);
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.timesheet-summary-day-header:hover .timesheet-summary-day-popup,
.timesheet-summary-day-header:focus-within .timesheet-summary-day-popup {
opacity: 1;
visibility: visible;
}
.timesheet-summary-day-popup-left .timesheet-summary-day-popup {
left: 0;
transform: none;
}
.timesheet-summary-day-popup-right .timesheet-summary-day-popup {
left: auto;
right: 0;
transform: none;
}
.timesheet-summary-day-popup-item {
font-size: 0.75rem;
line-height: 1.35;
color: #1f2937;
}
.timesheet-summary-day-popup-item + .timesheet-summary-day-popup-item {
margin-top: 0.35rem;
}
.timesheet-summary-day-popup-item-event {
color: #475569;
}
@media (max-width: 767.98px) {
.timesheet-summary-sticky-column {
min-width: 12rem !important;
}
.timesheet-summary-day-popup {
left: 0;
right: 0;
width: auto;
transform: none;
}
}