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

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 {
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);
}
}
}
/* ===========================================

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 {
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 {