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