From 8b2a6308618de613ce15627d48c360198dd90577 Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Wed, 14 Jan 2026 17:37:53 +0100 Subject: [PATCH] Refactor UI components and update stylesheets Standardizes markup structure for invoice history, employee table, and salary history components Simplifies HTML markup by removing unnecessary wrapper elements Applies consistent CSS class naming and styling approach Improves component readability and maintainability --- .../Components/InvoiceHistory/Default.cshtml | 201 +++++++++--------- .../EmployeeDetailSalary/Default.cshtml | 34 ++- .../Components/EmployeeTable/Default.cshtml | 32 ++- .../wwwroot/css/account.css | 99 +-------- .../wwwroot/css/employees.css | 29 ++- 5 files changed, 144 insertions(+), 251 deletions(-) diff --git a/PlanTempus.Application/Features/Account/Components/InvoiceHistory/Default.cshtml b/PlanTempus.Application/Features/Account/Components/InvoiceHistory/Default.cshtml index 915919b..8ec4b75 100644 --- a/PlanTempus.Application/Features/Account/Components/InvoiceHistory/Default.cshtml +++ b/PlanTempus.Application/Features/Account/Components/InvoiceHistory/Default.cshtml @@ -1,108 +1,101 @@ - - - Faktura-historik - + + Faktura-historik + + + Dato + Fakturanr. + Beløb + Status + + + + 1. jan 2026 + INV-2026-0001 + 599,00 kr + + + + + + + PDF + + + - - - - Dato - Fakturanr. - Beløb - Status - - - - - - 1. jan 2026 - INV-2026-0001 - 599,00 kr - - - - - - - PDF - - - + + 1. dec 2025 + INV-2025-0012 + 599,00 kr + + + + + + + PDF + + + - - 1. dec 2025 - INV-2025-0012 - 599,00 kr - - - - - - - PDF - - - + + 1. nov 2025 + INV-2025-0011 + 599,00 kr + + + + + + + PDF + + + - - 1. nov 2025 - INV-2025-0011 - 599,00 kr - - - - - - - PDF - - - + + 1. okt 2025 + INV-2025-0010 + 599,00 kr + + + + + + + PDF + + + - - 1. okt 2025 - INV-2025-0010 - 599,00 kr - - - - - - - PDF - - - - - - 1. sep 2025 - INV-2025-0009 - 599,00 kr - - - - - - - PDF - - - - - - + + 1. sep 2025 + INV-2025-0009 + 599,00 kr + + + + + + + PDF + + + + + diff --git a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml index ef42ff4..7560c6d 100644 --- a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml +++ b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml @@ -87,25 +87,23 @@ - + @Model.LabelSalaryHistory -
- - - @Model.LabelPeriod - @Model.LabelGrossSalary - - - @foreach (var item in Model.SalaryHistory) - { - - @item.Period - @item.GrossSalary - - - } - -
+ + + @Model.LabelPeriod + @Model.LabelGrossSalary + + + @foreach (var item in Model.SalaryHistory) + { + + @item.Period + @item.GrossSalary + + + } + diff --git a/PlanTempus.Application/Features/Employees/Components/EmployeeTable/Default.cshtml b/PlanTempus.Application/Features/Employees/Components/EmployeeTable/Default.cshtml index f0b3e3e..3b11e43 100644 --- a/PlanTempus.Application/Features/Employees/Components/EmployeeTable/Default.cshtml +++ b/PlanTempus.Application/Features/Employees/Components/EmployeeTable/Default.cshtml @@ -13,20 +13,18 @@ - -
- - - @Model.ColumnUser - @Model.ColumnRole - @Model.ColumnStatus - @Model.ColumnLastActive - - - @foreach (var employeeKey in Model.EmployeeKeys) - { - @await Component.InvokeAsync("EmployeeRow", employeeKey) - } - -
- + + + + @Model.ColumnUser + @Model.ColumnRole + @Model.ColumnStatus + @Model.ColumnLastActive + + + @foreach (var employeeKey in Model.EmployeeKeys) + { + @await Component.InvokeAsync("EmployeeRow", employeeKey) + } + + diff --git a/PlanTempus.Application/wwwroot/css/account.css b/PlanTempus.Application/wwwroot/css/account.css index 830a7ef..7c587f6 100644 --- a/PlanTempus.Application/wwwroot/css/account.css +++ b/PlanTempus.Application/wwwroot/css/account.css @@ -155,35 +155,9 @@ swp-payment-value { } /* =========================================== - INVOICES CARD + INVOICE HISTORY (uses swp-data-table from components.css) =========================================== */ -swp-invoices-card { - display: block; - background: var(--color-surface); - border-radius: var(--radius-lg); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); - overflow: hidden; -} - -swp-invoices-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--card-padding); - border-bottom: 1px solid var(--color-border); -} - -swp-invoices-title { - font-size: var(--font-size-base); - font-weight: var(--font-weight-semibold); - color: var(--color-text); -} - -/* =========================================== - INVOICE TABLE (Grid + Subgrid) - =========================================== */ -swp-invoice-table { - display: grid; +swp-card.invoice-history swp-data-table { grid-template-columns: 100px minmax(120px, 1fr) 100px 100px 80px; @media (max-width: 768px) { @@ -191,75 +165,8 @@ swp-invoice-table { } } -swp-invoice-table-header { - display: grid; - grid-column: 1 / -1; - grid-template-columns: subgrid; - background: var(--color-background-alt); - - swp-invoice-cell { - font-size: var(--font-size-xs); - font-weight: var(--font-weight-semibold); - text-transform: uppercase; - letter-spacing: 0.5px; - color: var(--color-text-secondary); - padding-top: var(--spacing-4); - padding-bottom: var(--spacing-4); - } -} - -swp-invoice-table-body { - display: grid; - grid-column: 1 / -1; - grid-template-columns: subgrid; - - swp-invoice-row:hover { - background: var(--color-background-hover); - } -} - -swp-invoice-row { - display: grid; - grid-column: 1 / -1; - grid-template-columns: subgrid; - align-items: center; - border-bottom: 1px solid var(--color-border); - transition: background var(--transition-fast); - - &:last-child { - border-bottom: none; - } -} - -swp-invoice-cell { - padding: var(--spacing-4) var(--spacing-4); +swp-card.invoice-history swp-data-table-cell { font-size: var(--font-size-sm); - color: var(--color-text); - - &:first-child { - padding-left: var(--card-padding); - } - - &:last-child { - padding-right: var(--card-padding); - } - - &.mono { - font-family: var(--font-mono); - font-size: var(--font-size-xs); - } - - @media (max-width: 768px) { - padding: var(--spacing-3) var(--spacing-3); - - &:first-child { - padding-left: var(--spacing-5); - } - - &:last-child { - padding-right: var(--spacing-5); - } - } } /* =========================================== diff --git a/PlanTempus.Application/wwwroot/css/employees.css b/PlanTempus.Application/wwwroot/css/employees.css index 99c6993..205dd75 100644 --- a/PlanTempus.Application/wwwroot/css/employees.css +++ b/PlanTempus.Application/wwwroot/css/employees.css @@ -56,35 +56,32 @@ swp-users-progress { } /* =========================================== - EMPLOYEE TABLE (uses swp-data-table from components.css) + EMPLOYEE TABLE (uses swp-data-table + swp-card from components.css) =========================================== */ -swp-employee-table-card { - display: block; - background: var(--color-surface); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-lg); +swp-card.employees-list { + padding: 0; overflow: hidden; } -.employees-list swp-data-table { +swp-card.employees-list swp-data-table { grid-template-columns: minmax(220px, 1fr) 120px 140px 120px 40px; } -.employees-list swp-data-table-header, -.employees-list swp-data-table-row { +swp-card.employees-list swp-data-table-header, +swp-card.employees-list swp-data-table-row { padding: 0 var(--spacing-10); } -.employees-list swp-data-table-header swp-data-table-cell { +swp-card.employees-list swp-data-table-header swp-data-table-cell { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); } -.employees-list swp-data-table-row { +swp-card.employees-list swp-data-table-row { cursor: pointer; } -.employees-list swp-data-table-cell { +swp-card.employees-list swp-data-table-cell { padding: var(--spacing-5) 0; &:last-child { @@ -663,16 +660,16 @@ swp-notes-area { /* =========================================== SALARY TABLE (uses swp-data-table from components.css) =========================================== */ -.salary-history swp-data-table { +swp-card.salary-history swp-data-table { grid-template-columns: 1fr 120px 60px; } -.salary-history swp-data-table-header { +swp-card.salary-history swp-data-table-header { background: transparent; border-bottom: 1px solid var(--color-border); } -.salary-history swp-data-table-row { +swp-card.salary-history swp-data-table-row { cursor: pointer; &:hover swp-data-table-cell i { @@ -680,7 +677,7 @@ swp-notes-area { } } -.salary-history swp-data-table-cell { +swp-card.salary-history swp-data-table-cell { padding: var(--spacing-4) var(--spacing-2); &:first-child {