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:
parent
33c338345e
commit
c1d2df9327
31 changed files with 250 additions and 149 deletions
|
|
@ -2,10 +2,12 @@
|
|||
|
||||
<swp-detail-grid>
|
||||
<!-- Left column -->
|
||||
<div>
|
||||
<swp-card-column>
|
||||
<!-- Contact Card -->
|
||||
<swp-card>
|
||||
<swp-section-label>@Model.LabelContact</swp-section-label>
|
||||
<swp-card-header>
|
||||
<swp-card-title>@Model.LabelContact</swp-card-title>
|
||||
</swp-card-header>
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>@Model.LabelFullName</swp-edit-label>
|
||||
|
|
@ -32,7 +34,9 @@
|
|||
|
||||
<!-- Personal Card -->
|
||||
<swp-card>
|
||||
<swp-section-label>@Model.LabelPersonal</swp-section-label>
|
||||
<swp-card-header>
|
||||
<swp-card-title>@Model.LabelPersonal</swp-card-title>
|
||||
</swp-card-header>
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>@Model.LabelBirthDate</swp-edit-label>
|
||||
|
|
@ -48,13 +52,15 @@
|
|||
</swp-edit-row>
|
||||
</swp-edit-section>
|
||||
</swp-card>
|
||||
</div>
|
||||
</swp-card-column>
|
||||
|
||||
<!-- Right column -->
|
||||
<div>
|
||||
<swp-card-column>
|
||||
<!-- Employment Card -->
|
||||
<swp-card>
|
||||
<swp-section-label>@Model.LabelEmployment</swp-section-label>
|
||||
<swp-card-header>
|
||||
<swp-card-title>@Model.LabelEmployment</swp-card-title>
|
||||
</swp-card-header>
|
||||
<swp-edit-section>
|
||||
<swp-edit-row>
|
||||
<swp-edit-label>@Model.LabelEmploymentDate</swp-edit-label>
|
||||
|
|
@ -77,7 +83,9 @@
|
|||
|
||||
<!-- Settings Card -->
|
||||
<swp-card>
|
||||
<swp-section-label>@Model.LabelSettings</swp-section-label>
|
||||
<swp-card-header>
|
||||
<swp-card-title>@Model.LabelSettings</swp-card-title>
|
||||
</swp-card-header>
|
||||
<swp-toggle-row>
|
||||
<div>
|
||||
<swp-toggle-label>@Model.SettingShowInBooking</swp-toggle-label>
|
||||
|
|
@ -102,7 +110,9 @@
|
|||
|
||||
<!-- Notifications Card -->
|
||||
<swp-card>
|
||||
<swp-section-label>@Model.LabelNotifications</swp-section-label>
|
||||
<swp-card-header>
|
||||
<swp-card-title>@Model.LabelNotifications</swp-card-title>
|
||||
</swp-card-header>
|
||||
<swp-notification-intro>@Model.NotificationsIntro</swp-notification-intro>
|
||||
<swp-toggle-row>
|
||||
<swp-toggle-label>@Model.SettingSmsReminders</swp-toggle-label>
|
||||
|
|
@ -147,5 +157,5 @@
|
|||
</swp-toggle-slider>
|
||||
</swp-toggle-row>
|
||||
</swp-card>
|
||||
</div>
|
||||
</swp-card-column>
|
||||
</swp-detail-grid>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue