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

Refactors UI components with new card header structure

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

55
PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md
View file

@ -75,29 +75,58 @@ Standard icon wrapper (40×40px cirkel):
| `swp-page-title` | Titel-wrapper med h1 og p | h1 + subtitle |
| `swp-page-actions` | Action buttons i header | Flex gap |
| `swp-card` | Standard card wrapper | Border, padding, rounded |
| `swp-section-label` | Card section label | Uppercase, 11px, border-bottom |
| `swp-section-header` | Wrapper for label + action | Flex, space-between |
| `swp-section-action` | Action link i section header | Teal, clickable |
| `swp-card-header` | Card header wrapper | Flex, space-between, border-bottom |
| `swp-card-title` | Card title med ikon | Flex, icon + text |
| `swp-section-action` | Action link i header | Teal, clickable |
| `swp-section-label` | Subsection label (inde i card) | Uppercase, 11px, border-bottom |
| `swp-card-content` | Card indhold | Block |
### Card Header Eksempler
**Simpel label (uden action):**
**Standard card header (ANBEFALET):**
```html
<swp-card>
<swp-section-label>Kontakter</swp-section-label>
<swp-card-content>...</swp-card-content>
<swp-card-header>
<swp-card-title>Kontakter</swp-card-title>
</swp-card-header>
<!-- content -->
</swp-card>
```
**Label med action:**
**Card header med ikon:**
```html
<swp-card>
<swp-section-header>
<swp-section-label>Dagens bookinger</swp-section-label>
<swp-card-header>
<swp-card-title>
<i class="ph ph-envelope"></i>
Email
</swp-card-title>
</swp-card-header>
<!-- content -->
</swp-card>
```
**Card header med action:**
```html
<swp-card>
<swp-card-header>
<swp-card-title>Dagens bookinger</swp-card-title>
<swp-section-action>Se alle</swp-section-action>
</swp-section-header>
<swp-card-content>...</swp-card-content>
</swp-card-header>
<!-- content -->
</swp-card>
```
**Subsection label (inde i card):**
```html
<swp-card>
<swp-card-header>
<swp-card-title>Grundlæggende</swp-card-title>
</swp-card-header>
<!-- first section content -->
<swp-section-label class="spaced">Interne noter</swp-section-label>
<!-- second section content -->
</swp-card>
```
@ -434,7 +463,9 @@ Bruger `swp-data-table` med `.salary-history` context class.
```html
<swp-card class="salary-history">
<swp-section-label>Lønhistorik</swp-section-label>
<swp-card-header>
<swp-card-title>Lønhistorik</swp-card-title>
</swp-card-header>
<swp-data-table>
<swp-data-table-header>
<swp-data-table-cell>Periode</swp-data-table-cell>