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

5
PlanTempus.Application/Features/Services/Components/ServiceDetailAddons/Default.cshtml
View file

@ -1,8 +1,9 @@
@model PlanTempus.Application.Features.Services.Components.ServiceDetailAddonsViewModel
<swp-card>
<swp-section-label>@Model.LabelAddonsForService</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelAddonsForService</swp-card-title>
</swp-card-header>
<swp-selectable-list>
@foreach (var addon in Model.Addons)
{

9
PlanTempus.Application/Features/Services/Components/ServiceDetailDuration/Default.cshtml
View file

@ -2,8 +2,9 @@
<swp-detail-grid>
<swp-card>
<swp-section-label>@Model.LabelDurationVariants</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelDurationVariants</swp-card-title>
</swp-card-header>
<swp-duration-list>
@foreach (var variant in Model.DurationVariants)
{
@ -27,7 +28,9 @@
</swp-card>
<swp-card>
<swp-section-label>@Model.LabelBufferTimes</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelBufferTimes</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>@Model.LabelBufferBefore</swp-edit-label>

18
PlanTempus.Application/Features/Services/Components/ServiceDetailEmployees/Default.cshtml
View file

@ -1,10 +1,11 @@
@model PlanTempus.Application.Features.Services.Components.ServiceDetailEmployeesViewModel
<swp-detail-grid>
<div>
<swp-card-column>
<swp-card>
<swp-section-label>@Model.LabelEmployeesForService</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelEmployeesForService</swp-card-title>
</swp-card-header>
<swp-selectable-list>
@foreach (var employee in Model.Employees)
{
@ -32,12 +33,13 @@
<swp-see-all>@Model.LabelSelectAll</swp-see-all>
</swp-card>
</div>
</swp-card-column>
<div>
<swp-card-column>
<swp-card>
<swp-section-label>@Model.LabelAvailability</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelAvailability</swp-card-title>
</swp-card-header>
<swp-availability-list>
@foreach (var day in Model.Availability)
{
@ -62,5 +64,5 @@
}
</swp-availability-list>
</swp-card>
</div>
</swp-card-column>
</swp-detail-grid>

20
PlanTempus.Application/Features/Services/Components/ServiceDetailGeneral/Default.cshtml
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>

13
PlanTempus.Application/Features/Services/Components/ServiceDetailPrices/Default.cshtml
View file

@ -1,8 +1,9 @@
@model PlanTempus.Application.Features.Services.Components.ServiceDetailPricesViewModel
<swp-card>
<swp-section-label>@Model.LabelPriceStructure</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelPriceStructure</swp-card-title>
</swp-card-header>
<swp-price-mode>
<swp-price-mode-btn data-mode="simple" class="@(Model.PriceMode == PlanTempus.Application.Features.Services.Components.PriceMode.Simple ? "active" : "")">@Model.LabelSimplePrice</swp-price-mode-btn>
<swp-price-mode-btn data-mode="matrix" class="@(Model.PriceMode == PlanTempus.Application.Features.Services.Components.PriceMode.Matrix ? "active" : "")">@Model.LabelMatrixPrice</swp-price-mode-btn>
@ -49,7 +50,9 @@
<swp-detail-grid>
<swp-card>
<swp-section-label>@Model.LabelEconomy</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelEconomy</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>@Model.LabelVatRate</swp-edit-label>
@ -86,7 +89,9 @@
</swp-card>
<swp-card>
<swp-section-label>@Model.LabelDiscounts</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelDiscounts</swp-card-title>
</swp-card-header>
<swp-toggle-row>
<swp-toggle-label>@Model.LabelMemberDiscount</swp-toggle-label>
<swp-toggle-slider data-value="@(Model.MemberDiscount ? "yes" : "no")">

12
PlanTempus.Application/Features/Services/Components/ServiceDetailRules/Default.cshtml
View file

@ -2,7 +2,9 @@
<swp-detail-grid>
<swp-card>
<swp-section-label>@Model.LabelBookingRules</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelBookingRules</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>@Model.LabelMinNotice</swp-edit-label>
@ -73,7 +75,9 @@
</swp-card>
<swp-card>
<swp-section-label>@Model.LabelRequirements</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelRequirements</swp-card-title>
</swp-card-header>
<swp-toggle-row>
<div>
<swp-toggle-label>@Model.LabelRequiresConsultation</swp-toggle-label>
@ -108,7 +112,9 @@
</swp-detail-grid>
<swp-card>
<swp-section-label>@Model.LabelOnlineBookingSettings</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelOnlineBookingSettings</swp-card-title>
</swp-card-header>
<swp-toggle-row>
<swp-toggle-label>@Model.LabelShowInOnlineBooking</swp-toggle-label>
<swp-toggle-slider data-value="@(Model.ShowInOnlineBooking ? "yes" : "no")">