Refactors UI components with new card header structure

Replaces `swp-section-label` with standardized `swp-card-header` and `swp-card-title`

Improves component consistency across multiple features:
- Adds structured card headers
- Introduces more semantic HTML elements
- Enhances layout and readability of card components

Updates CSS and component styles to support new structure
This commit is contained in:
Janus C. H. Knudsen 2026-01-19 14:23:41 +01:00
parent 33c338345e
commit c1d2df9327
31 changed files with 250 additions and 149 deletions

View file

@ -1,13 +1,13 @@
@model PlanTempus.Application.Features.Employees.Components.EmployeeDetailSalaryViewModel
<swp-detail-grid>
<div>
<swp-card-column>
<!-- Satser (Grundsatser) -->
<swp-card>
<swp-section-header>
<swp-section-label>@Model.LabelRates</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelRates</swp-card-title>
<swp-section-action data-drawer-trigger="rates-drawer">@Model.LabelEdit</swp-section-action>
</swp-section-header>
</swp-card-header>
<swp-edit-section>
<swp-edit-row id="card-normal">
<swp-edit-label>@Model.LabelNormalRate</swp-edit-label>
@ -54,7 +54,9 @@
<!-- Tillæg -->
<swp-card>
<swp-section-label>@Model.LabelSupplements</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelSupplements</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row id="card-weekday">
<swp-edit-label>@Model.LabelWeekdaySupplement</swp-edit-label>
@ -73,7 +75,9 @@
<!-- Provision -->
<swp-card>
<swp-section-label>@Model.LabelCommission</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelCommission</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row id="card-productcommission">
<swp-edit-label>@Model.LabelProductCommission</swp-edit-label>
@ -85,10 +89,12 @@
</swp-edit-row>
</swp-edit-section>
</swp-card>
</div>
</swp-card-column>
<swp-card class="salary-history">
<swp-section-label>@Model.LabelSalaryHistory</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelSalaryHistory</swp-card-title>
</swp-card-header>
<swp-data-table>
<swp-data-table-header>
<swp-data-table-cell>@Model.LabelPeriod</swp-data-table-cell>