Refactors employee details and UI controls

Enhances employee hours view with dynamic weekly schedule rendering
Updates toggle slider and theme switch components with improved interactions
Adds more flexible notification and settings configurations for employees

Improves user experience by streamlining UI controls and schedule display
This commit is contained in:
Janus C. H. Knudsen 2026-01-15 16:59:56 +01:00
parent 6746e876d7
commit 545d6606a6
18 changed files with 506 additions and 206 deletions

View file

@ -889,11 +889,10 @@ swp-schedule-scroll {
overflow-x: auto;
}
/* Når drawer er åben: page-container styles (animation via JS) */
/* Når drawer er åben: page-container styles (padding animeres via JS) */
body.schedule-drawer-open swp-tab-content[data-tab="schedule"] swp-page-container {
max-width: none;
margin: 0;
padding-right: var(--drawer-width, 420px);
}
/* ===========================================
@ -975,7 +974,7 @@ swp-schedule-cell.day.closed-day {
border-left: 2px solid #f59e0b;
border-right: 2px solid #f59e0b;
swp-time-display {
swp-time-badge {
opacity: 0.5;
}
}
@ -1011,13 +1010,13 @@ swp-day-date {
}
/* Time display variants */
swp-time-display {
swp-time-badge {
font-family: var(--font-mono);
font-size: 12px;
font-weight: var(--font-weight-medium);
font-weight: 500;
padding: 4px 8px;
border-radius: 4px;
background: var(--bg-teal-light);
background: color-mix(in srgb, var(--color-teal) 10%, white);
color: var(--color-text);
white-space: nowrap;
min-width: 90px;
@ -1025,22 +1024,22 @@ swp-time-display {
display: inline-block;
}
swp-time-display.off {
swp-time-badge.off {
background: transparent;
color: var(--color-text-muted);
}
swp-time-display.off.off-override {
swp-time-badge.off.off-override {
background: color-mix(in srgb, #7c3aed 12%, white);
color: #6d28d9;
}
swp-time-display.vacation {
swp-time-badge.vacation {
background: color-mix(in srgb, #f59e0b 15%, white);
color: #b45309;
}
swp-time-display.sick {
swp-time-badge.sick {
background: color-mix(in srgb, #ef4444 15%, white);
color: #dc2626;
}
@ -1222,38 +1221,6 @@ swp-time-range-duration {
white-space: nowrap;
}
/* Toggle options (Enkelt/Gentagelse) */
swp-toggle-options {
display: flex;
gap: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
overflow: hidden;
}
swp-toggle-option {
flex: 1;
padding: 10px 16px;
text-align: center;
font-size: var(--font-size-sm);
cursor: pointer;
background: var(--color-surface);
border-right: 1px solid var(--color-border);
transition: all var(--transition-fast);
&:last-child {
border-right: none;
}
&:hover {
background: var(--color-background-alt);
}
&.selected {
background: var(--color-teal);
color: white;
}
}
/* Schedule drawer employee display */
swp-employee-display {