Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactors employee details and UI controls

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

57
PlanTempus.Application/wwwroot/css/controls.css
View file

@ -35,7 +35,7 @@ swp-toggle-slider {
display: inline-flex;
width: fit-content;
background: var(--color-background);
border-radius: var(--radius-md);
border-radius: 6px;
border: 1px solid var(--color-border);
overflow: hidden;
position: relative;
@ -48,36 +48,71 @@ swp-toggle-slider::before {
left: 2px;
width: calc(50% - 4px);
height: calc(100% - 4px);
background: var(--bg-green-strong);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--color-green) 18%, white);
border-radius: 4px;
transition: transform 200ms ease, background 200ms ease;
}
swp-toggle-slider[data-value="no"]::before {
transform: translateX(100%);
background: var(--bg-red-strong);
transform: translateX(calc(100% + 4px));
background: color-mix(in srgb, var(--color-red) 18%, white);
}
swp-toggle-option {
position: relative;
z-index: 1;
padding: var(--spacing-2) var(--spacing-5);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
padding: 5px 16px;
font-size: 12px;
font-weight: 500;
color: var(--color-text-secondary);
cursor: pointer;
transition: color var(--transition-fast);
transition: color 150ms ease;
user-select: none;
}
swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
color: var(--color-green);
font-weight: var(--font-weight-semibold);
font-weight: 600;
}
swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
color: var(--color-red);
font-weight: var(--font-weight-semibold);
font-weight: 600;
}
/* ===========================================
TOGGLE OPTIONS (Tab-style selector)
=========================================== */
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;
}
}
}
/* ===========================================