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

Refactor UI components and update stylesheets

Browse source 
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
This commit is contained in:
Janus C. H. Knudsen 2026-01-14 17:37:53 +01:00
parent 679c3fb3a6
commit 8b2a630861
5 changed files with 144 additions and 251 deletions
Download patch file Download diff file Expand all files Collapse all files

121
PlanTempus.Application/Features/Account/Components/InvoiceHistory/Default.cshtml
View file

@ -1,108 +1,101 @@
<swp-invoices-card> <swp-card class="invoice-history">
<swp-invoices-header> <swp-section-label localize="account.invoices.title">Faktura-historik</swp-section-label>
<swp-invoices-title localize="account.invoices.title">Faktura-historik</swp-invoices-title> <swp-data-table>
</swp-invoices-header> <swp-data-table-header>
<swp-data-table-cell localize="account.invoices.date">Dato</swp-data-table-cell>
<swp-invoice-table> <swp-data-table-cell localize="account.invoices.invoiceNumber">Fakturanr.</swp-data-table-cell>
<swp-invoice-table-header> <swp-data-table-cell localize="account.invoices.amount">Beløb</swp-data-table-cell>
<swp-invoice-row> <swp-data-table-cell localize="common.status">Status</swp-data-table-cell>
<swp-invoice-cell localize="account.invoices.date">Dato</swp-invoice-cell> <swp-data-table-cell></swp-data-table-cell>
<swp-invoice-cell localize="account.invoices.invoiceNumber">Fakturanr.</swp-invoice-cell> </swp-data-table-header>
<swp-invoice-cell localize="account.invoices.amount">Beløb</swp-invoice-cell> <swp-data-table-row>
<swp-invoice-cell localize="common.status">Status</swp-invoice-cell> <swp-data-table-cell>1. jan 2026</swp-data-table-cell>
<swp-invoice-cell></swp-invoice-cell> <swp-data-table-cell class="mono">INV-2026-0001</swp-data-table-cell>
</swp-invoice-row> <swp-data-table-cell>599,00 kr</swp-data-table-cell>
</swp-invoice-table-header> <swp-data-table-cell>
<swp-invoice-table-body>
<swp-invoice-row>
<swp-invoice-cell>1. jan 2026</swp-invoice-cell>
<swp-invoice-cell class="mono">INV-2026-0001</swp-invoice-cell>
<swp-invoice-cell>599,00 kr</swp-invoice-cell>
<swp-invoice-cell>
<swp-invoice-status class="paid"> <swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i> <i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span> <span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status> </swp-invoice-status>
</swp-invoice-cell> </swp-data-table-cell>
<swp-invoice-cell> <swp-data-table-cell>
<swp-download-btn> <swp-download-btn>
<i class="ph ph-download"></i> <i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span> <span localize="account.invoices.download">PDF</span>
</swp-download-btn> </swp-download-btn>
</swp-invoice-cell> </swp-data-table-cell>
</swp-invoice-row> </swp-data-table-row>
<swp-invoice-row> <swp-data-table-row>
<swp-invoice-cell>1. dec 2025</swp-invoice-cell> <swp-data-table-cell>1. dec 2025</swp-data-table-cell>
<swp-invoice-cell class="mono">INV-2025-0012</swp-invoice-cell> <swp-data-table-cell class="mono">INV-2025-0012</swp-data-table-cell>
<swp-invoice-cell>599,00 kr</swp-invoice-cell> <swp-data-table-cell>599,00 kr</swp-data-table-cell>
<swp-invoice-cell> <swp-data-table-cell>
<swp-invoice-status class="paid"> <swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i> <i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span> <span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status> </swp-invoice-status>
</swp-invoice-cell> </swp-data-table-cell>
<swp-invoice-cell> <swp-data-table-cell>
<swp-download-btn> <swp-download-btn>
<i class="ph ph-download"></i> <i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span> <span localize="account.invoices.download">PDF</span>
</swp-download-btn> </swp-download-btn>
</swp-invoice-cell> </swp-data-table-cell>
</swp-invoice-row> </swp-data-table-row>
<swp-invoice-row> <swp-data-table-row>
<swp-invoice-cell>1. nov 2025</swp-invoice-cell> <swp-data-table-cell>1. nov 2025</swp-data-table-cell>
<swp-invoice-cell class="mono">INV-2025-0011</swp-invoice-cell> <swp-data-table-cell class="mono">INV-2025-0011</swp-data-table-cell>
<swp-invoice-cell>599,00 kr</swp-invoice-cell> <swp-data-table-cell>599,00 kr</swp-data-table-cell>
<swp-invoice-cell> <swp-data-table-cell>
<swp-invoice-status class="paid"> <swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i> <i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span> <span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status> </swp-invoice-status>
</swp-invoice-cell> </swp-data-table-cell>
<swp-invoice-cell> <swp-data-table-cell>
<swp-download-btn> <swp-download-btn>
<i class="ph ph-download"></i> <i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span> <span localize="account.invoices.download">PDF</span>
</swp-download-btn> </swp-download-btn>
</swp-invoice-cell> </swp-data-table-cell>
</swp-invoice-row> </swp-data-table-row>
<swp-invoice-row> <swp-data-table-row>
<swp-invoice-cell>1. okt 2025</swp-invoice-cell> <swp-data-table-cell>1. okt 2025</swp-data-table-cell>
<swp-invoice-cell class="mono">INV-2025-0010</swp-invoice-cell> <swp-data-table-cell class="mono">INV-2025-0010</swp-data-table-cell>
<swp-invoice-cell>599,00 kr</swp-invoice-cell> <swp-data-table-cell>599,00 kr</swp-data-table-cell>
<swp-invoice-cell> <swp-data-table-cell>
<swp-invoice-status class="paid"> <swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i> <i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span> <span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status> </swp-invoice-status>
</swp-invoice-cell> </swp-data-table-cell>
<swp-invoice-cell> <swp-data-table-cell>
<swp-download-btn> <swp-download-btn>
<i class="ph ph-download"></i> <i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span> <span localize="account.invoices.download">PDF</span>
</swp-download-btn> </swp-download-btn>
</swp-invoice-cell> </swp-data-table-cell>
</swp-invoice-row> </swp-data-table-row>
<swp-invoice-row> <swp-data-table-row>
<swp-invoice-cell>1. sep 2025</swp-invoice-cell> <swp-data-table-cell>1. sep 2025</swp-data-table-cell>
<swp-invoice-cell class="mono">INV-2025-0009</swp-invoice-cell> <swp-data-table-cell class="mono">INV-2025-0009</swp-data-table-cell>
<swp-invoice-cell>599,00 kr</swp-invoice-cell> <swp-data-table-cell>599,00 kr</swp-data-table-cell>
<swp-invoice-cell> <swp-data-table-cell>
<swp-invoice-status class="paid"> <swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i> <i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span> <span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status> </swp-invoice-status>
</swp-invoice-cell> </swp-data-table-cell>
<swp-invoice-cell> <swp-data-table-cell>
<swp-download-btn> <swp-download-btn>
<i class="ph ph-download"></i> <i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span> <span localize="account.invoices.download">PDF</span>
</swp-download-btn> </swp-download-btn>
</swp-invoice-cell> </swp-data-table-cell>
</swp-invoice-row> </swp-data-table-row>
</swp-invoice-table-body> </swp-data-table>
</swp-invoice-table> </swp-card>
</swp-invoices-card>

4
PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml
View file

@ -87,9 +87,8 @@
</swp-card> </swp-card>
</div> </div>
<swp-card> <swp-card class="salary-history">
<swp-section-label>@Model.LabelSalaryHistory</swp-section-label> <swp-section-label>@Model.LabelSalaryHistory</swp-section-label>
<div class="salary-history">
<swp-data-table> <swp-data-table>
<swp-data-table-header> <swp-data-table-header>
<swp-data-table-cell>@Model.LabelPeriod</swp-data-table-cell> <swp-data-table-cell>@Model.LabelPeriod</swp-data-table-cell>
@ -105,7 +104,6 @@
</swp-data-table-row> </swp-data-table-row>
} }
</swp-data-table> </swp-data-table>
</div>
</swp-card> </swp-card>
</swp-detail-grid> </swp-detail-grid>

6
PlanTempus.Application/Features/Employees/Components/EmployeeTable/Default.cshtml
View file

@ -13,8 +13,7 @@
</swp-btn> </swp-btn>
</swp-users-header> </swp-users-header>
<swp-employee-table-card> <swp-card class="employees-list">
<div class="employees-list">
<swp-data-table> <swp-data-table>
<swp-data-table-header> <swp-data-table-header>
<swp-data-table-cell>@Model.ColumnUser</swp-data-table-cell> <swp-data-table-cell>@Model.ColumnUser</swp-data-table-cell>
@ -28,5 +27,4 @@
@await Component.InvokeAsync("EmployeeRow", employeeKey) @await Component.InvokeAsync("EmployeeRow", employeeKey)
} }
</swp-data-table> </swp-data-table>
</div> </swp-card>
</swp-employee-table-card>

99
PlanTempus.Application/wwwroot/css/account.css
View file

@ -155,35 +155,9 @@ swp-payment-value {
} }
/* =========================================== /* ===========================================
INVOICES CARD INVOICE HISTORY (uses swp-data-table from components.css)
=========================================== */ =========================================== */
swp-invoices-card { swp-card.invoice-history swp-data-table {
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;
grid-template-columns: 100px minmax(120px, 1fr) 100px 100px 80px; grid-template-columns: 100px minmax(120px, 1fr) 100px 100px 80px;
@media (max-width: 768px) { @media (max-width: 768px) {
@ -191,75 +165,8 @@ swp-invoice-table {
} }
} }
swp-invoice-table-header { swp-card.invoice-history swp-data-table-cell {
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);
font-size: var(--font-size-sm); 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);
}
}
} }
/* =========================================== /* ===========================================

29
PlanTempus.Application/wwwroot/css/employees.css
View file

@ -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 { swp-card.employees-list {
display: block; padding: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
overflow: hidden; overflow: hidden;
} }
.employees-list swp-data-table { swp-card.employees-list swp-data-table {
grid-template-columns: minmax(220px, 1fr) 120px 140px 120px 40px; grid-template-columns: minmax(220px, 1fr) 120px 140px 120px 40px;
} }
.employees-list swp-data-table-header, swp-card.employees-list swp-data-table-header,
.employees-list swp-data-table-row { swp-card.employees-list swp-data-table-row {
padding: 0 var(--spacing-10); 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-top: var(--spacing-5);
padding-bottom: var(--spacing-5); padding-bottom: var(--spacing-5);
} }
.employees-list swp-data-table-row { swp-card.employees-list swp-data-table-row {
cursor: pointer; cursor: pointer;
} }
.employees-list swp-data-table-cell { swp-card.employees-list swp-data-table-cell {
padding: var(--spacing-5) 0; padding: var(--spacing-5) 0;
&:last-child { &:last-child {
@ -663,16 +660,16 @@ swp-notes-area {
/* =========================================== /* ===========================================
SALARY TABLE (uses swp-data-table from components.css) 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; grid-template-columns: 1fr 120px 60px;
} }
.salary-history swp-data-table-header { swp-card.salary-history swp-data-table-header {
background: transparent; background: transparent;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
} }
.salary-history swp-data-table-row { swp-card.salary-history swp-data-table-row {
cursor: pointer; cursor: pointer;
&:hover swp-data-table-cell i { &: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); padding: var(--spacing-4) var(--spacing-2);
&:first-child { &:first-child {