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,5 +1,7 @@
<swp-card>
<swp-section-label localize="cash.approval.title">Afslut dagen</swp-section-label>
<swp-card-header>
<swp-card-title localize="cash.approval.title">Afslut dagen</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-approval-grid>
<swp-form-field>

View file

@ -1,5 +1,7 @@
<swp-card>
<swp-section-label localize="cash.balance.title">Kontanter i kassen</swp-section-label>
<swp-card-header>
<swp-card-title localize="cash.balance.title">Kontanter i kassen</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-calc-row>
<swp-calc-label>

View file

@ -1,5 +1,7 @@
<swp-card>
<swp-section-label localize="cash.period.title">Periodeoplysninger</swp-section-label>
<swp-card-header>
<swp-card-title localize="cash.period.title">Periodeoplysninger</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-period-display>
<swp-period-label localize="cash.period.dateRange">Periode</swp-period-label>

View file

@ -1,5 +1,7 @@
<swp-card>
<swp-section-label localize="cash.revenue.title">Periodens omsætning</swp-section-label>
<swp-card-header>
<swp-card-title localize="cash.revenue.title">Periodens omsætning</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-data-table>
<swp-data-header>

View file

@ -1,5 +1,7 @@
<swp-card>
<swp-section-label localize="cash.note.title">Note til afstemning</swp-section-label>
<swp-card-header>
<swp-card-title localize="cash.note.title">Note til afstemning</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-note-field>
<textarea placeholder="Beskriv evt. årsag til difference..."></textarea>

View file

@ -1,5 +1,5 @@
<!-- Action Bar -->
<swp-action-bar>
<swp-action-bar class="grid-top">
<swp-selection-info>
<span id="selectionCount" localize="cash.table.noneSelected">0 valgt</span>
</swp-selection-info>

View file

@ -74,19 +74,19 @@
<!-- Tab Content: Kasseafstemning -->
<swp-tab-content data-tab="afstemning">
<swp-page-container>
<swp-cash-grid>
<swp-cash-column>
<swp-two-column-grid>
<swp-card-column>
@await Component.InvokeAsync("PeriodRevenue")
@await Component.InvokeAsync("CashBalance")
@await Component.InvokeAsync("CashDifference")
</swp-cash-column>
</swp-card-column>
<swp-cash-column>
<swp-card-column>
@await Component.InvokeAsync("PeriodInfo")
@await Component.InvokeAsync("ReconciliationNote")
@await Component.InvokeAsync("CashApproval")
</swp-cash-column>
</swp-cash-grid>
</swp-card-column>
</swp-two-column-grid>
<swp-system-note localize="cash.systemNote">Systemet gemmer hvornår og af hvem der er godkendt enkelt kontrolspor.</swp-system-note>
</swp-page-container>