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

Enhances service details with employees and addon sections

Browse source 
Adds new components for service employees and addons
Introduces detailed views with selectable employees and add-ons
Updates localization translations for new sections
Implements time range slider functionality for availability
This commit is contained in:
Janus C. H. Knudsen 2026-01-17 15:36:15 +01:00
parent 5e3811347c
commit 7643a6ab82
20 changed files with 830 additions and 336 deletions
Download patch file Download diff file Expand all files Collapse all files

141
PlanTempus.Application/wwwroot/css/components.css
View file

@ -544,6 +544,7 @@ swp-card {
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: var(--card-padding);
margin-top: var(--section-gap);
}
/* Section label - simple card header */
@ -1295,7 +1296,6 @@ swp-detail-grid {
> div {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
}
@ -1304,3 +1304,142 @@ swp-detail-grid {
grid-template-columns: 1fr;
}
}
/* ===========================================
SELECTABLE LIST (Checkbox + Info pattern)
Used for employee lists, addon lists, etc.
=========================================== */
swp-selectable-list {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
}
swp-selectable-item {
display: grid;
grid-template-columns: 24px auto 1fr auto;
gap: var(--spacing-4);
align-items: center;
padding: var(--spacing-4);
background: var(--color-background-alt);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition-fast);
&:hover {
background: var(--color-background-hover);
}
&.selected {
background: var(--bg-teal-subtle);
}
&.disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Variant without avatar (for addons) */
&.no-avatar {
grid-template-columns: 24px 1fr auto;
}
}
swp-selectable-checkbox {
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
svg {
width: 14px;
height: 14px;
fill: white;
opacity: 0;
transition: opacity var(--transition-fast);
}
.selected & {
background: var(--color-teal);
border-color: var(--color-teal);
svg {
opacity: 1;
}
}
}
swp-selectable-info {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
min-width: 0;
}
swp-selectable-name {
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
swp-selectable-warning {
font-size: var(--font-size-xs);
color: var(--color-amber);
font-weight: var(--font-weight-normal);
}
swp-selectable-meta {
display: flex;
align-items: center;
gap: var(--spacing-3);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
span {
font-family: var(--font-mono);
}
}
swp-selectable-type {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
&.required {
color: var(--color-amber);
font-weight: var(--font-weight-medium);
}
}
swp-selectable-override {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-align: right;
}
swp-selectable-override-value {
font-family: var(--font-mono);
color: var(--color-text);
}
/* See all / Select all link */
swp-see-all {
display: block;
margin-top: var(--spacing-4);
padding-top: var(--spacing-4);
border-top: 1px solid var(--color-border);
font-size: var(--font-size-sm);
color: var(--color-teal);
cursor: pointer;
text-align: center;
&:hover {
text-decoration: underline;
}
}