Add services feature with mock data and components
Introduces comprehensive services management module with: - Dynamic service and category tables - Localization support for services section - Mock data for services and categories - Responsive UI components for services listing - Menu navigation and styling updates Enhances application's service management capabilities
This commit is contained in:
Janus C. H. Knudsen
parent
408e590922
commit
4cf30e1f27
20 changed files with 951 additions and 0 deletions
236
PlanTempus.Application/wwwroot/css/services.css
Normal file
236
PlanTempus.Application/wwwroot/css/services.css
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
/**
|
||||
* Services List Styles
|
||||
*
|
||||
* Feature-specific styling only.
|
||||
* Reuses: swp-stat-card (stats.css), swp-data-table (components.css),
|
||||
* swp-sticky-header (page.css), swp-row-toggle (employees.css),
|
||||
* swp-btn (components.css)
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
SERVICES HEADER (Search + Button)
|
||||
=========================================== */
|
||||
|
||||
swp-services-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--section-gap);
|
||||
}
|
||||
|
||||
swp-search-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
min-width: 280px;
|
||||
|
||||
i {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
width: 100%;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SERVICES LIST TABLE
|
||||
=========================================== */
|
||||
|
||||
swp-card.services-list {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Table columns: Service(1fr) | Varighed(100px) | Pris(100px) | Caret(40px) */
|
||||
swp-card.services-list swp-data-table {
|
||||
grid-template-columns: 1fr 100px 100px 40px;
|
||||
}
|
||||
|
||||
swp-card.services-list swp-data-table-header,
|
||||
swp-card.services-list swp-data-table-row,
|
||||
swp-card.services-list swp-category-row {
|
||||
padding: 0 var(--spacing-10);
|
||||
}
|
||||
|
||||
swp-card.services-list swp-data-table-header swp-data-table-cell {
|
||||
padding-top: var(--spacing-5);
|
||||
padding-bottom: var(--spacing-5);
|
||||
}
|
||||
|
||||
swp-card.services-list swp-data-table-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-card.services-list swp-data-table-cell {
|
||||
padding: var(--spacing-5) 0;
|
||||
|
||||
&:last-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mono font for duration and price columns */
|
||||
swp-card.services-list swp-data-table-row swp-data-table-cell:nth-child(2),
|
||||
swp-card.services-list swp-data-table-row swp-data-table-cell:nth-child(3) {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
CATEGORY ROW
|
||||
=========================================== */
|
||||
|
||||
swp-category-row {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
background: var(--bg-blue-subtle);
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-left: 4px solid var(--color-blue);
|
||||
}
|
||||
|
||||
swp-category-row:hover {
|
||||
background: var(--bg-blue-medium);
|
||||
}
|
||||
|
||||
swp-category-row swp-data-table-cell {
|
||||
padding: var(--spacing-5) 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
swp-category-row swp-data-table-cell:first-child {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: var(--font-size-base);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-category-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--color-blue);
|
||||
background: var(--bg-blue-medium);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
swp-category-row:hover swp-category-toggle {
|
||||
background: var(--bg-blue-strong);
|
||||
}
|
||||
|
||||
swp-category-toggle i {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
swp-category-row[data-expanded="false"] swp-category-toggle i {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.category-name {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.category-count {
|
||||
color: var(--color-text-tertiary);
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-size: var(--font-size-xs);
|
||||
margin-left: var(--spacing-2);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SERVICE ROW (indented under category)
|
||||
=========================================== */
|
||||
|
||||
swp-card.services-list swp-data-table-row swp-data-table-cell:first-child {
|
||||
padding-left: 56px;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SERVICE ROW HOVER
|
||||
=========================================== */
|
||||
|
||||
swp-card.services-list swp-data-table-row:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
swp-card.services-list swp-data-table-row:hover swp-row-toggle {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
CATEGORIES LIST TABLE
|
||||
=========================================== */
|
||||
|
||||
swp-card.categories-list {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Table columns: Category(1fr) | ServiceCount(120px) | Caret(40px) */
|
||||
swp-card.categories-list swp-data-table {
|
||||
grid-template-columns: 1fr 120px 40px;
|
||||
}
|
||||
|
||||
swp-card.categories-list swp-data-table-header,
|
||||
swp-card.categories-list swp-data-table-row {
|
||||
padding: 0 var(--spacing-10);
|
||||
}
|
||||
|
||||
swp-card.categories-list swp-data-table-header swp-data-table-cell {
|
||||
padding-top: var(--spacing-5);
|
||||
padding-bottom: var(--spacing-5);
|
||||
}
|
||||
|
||||
swp-card.categories-list swp-data-table-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-card.categories-list swp-data-table-cell {
|
||||
padding: var(--spacing-5) 0;
|
||||
|
||||
&:last-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mono font for service count */
|
||||
swp-card.categories-list swp-data-table-row swp-data-table-cell:nth-child(2) {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
swp-card.categories-list swp-data-table-row:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
swp-card.categories-list swp-data-table-row:hover swp-row-toggle {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue