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

@ -2,10 +2,12 @@
<swp-detail-grid>
<!-- Left column -->
<div>
<swp-card-column>
<!-- Basic Info Card -->
<swp-card>
<swp-section-label>@Model.LabelBasic</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelBasic</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>@Model.LabelServiceName</swp-edit-label>
@ -70,7 +72,9 @@
<!-- Booking Type Card -->
<swp-card>
<swp-section-label>@Model.LabelBookingType</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelBookingType</swp-card-title>
</swp-card-header>
<swp-toggle-row>
<div>
<swp-toggle-label>@Model.LabelCanBookAsMain</swp-toggle-label>
@ -92,13 +96,15 @@
</swp-toggle-slider>
</swp-toggle-row>
</swp-card>
</div>
</swp-card-column>
<!-- Right column -->
<div>
<swp-card-column>
<!-- Online Booking Card -->
<swp-card>
<swp-section-label>@Model.LabelOnlineBooking</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelOnlineBooking</swp-card-title>
</swp-card-header>
<swp-toggle-row>
<div>
<swp-toggle-label>@Model.LabelShowInOnlineBooking</swp-toggle-label>
@ -129,5 +135,5 @@
@Model.LabelUploadImage
</swp-add-button>
</swp-card>
</div>
</swp-card-column>
</swp-detail-grid>