c1d2df9327
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
84 lines
5 KiB
Text
84 lines
5 KiB
Text
@model PlanTempus.Application.Features.Services.Components.ServiceDetailDurationViewModel
|
|
|
|
<swp-detail-grid>
|
|
<swp-card>
|
|
<swp-card-header>
|
|
<swp-card-title>@Model.LabelDurationVariants</swp-card-title>
|
|
</swp-card-header>
|
|
<swp-duration-list>
|
|
@foreach (var variant in Model.DurationVariants)
|
|
{
|
|
<swp-duration-item>
|
|
<swp-duration-name>@variant.Name</swp-duration-name>
|
|
<swp-duration-value>
|
|
<span contenteditable="true">@variant.Minutes</span>
|
|
<swp-duration-unit>@Model.LabelMinutes</swp-duration-unit>
|
|
</swp-duration-value>
|
|
<swp-duration-delete>
|
|
<i class="ph ph-x"></i>
|
|
</swp-duration-delete>
|
|
</swp-duration-item>
|
|
}
|
|
</swp-duration-list>
|
|
|
|
<swp-add-button>
|
|
<i class="ph ph-plus"></i>
|
|
@Model.LabelAddVariant
|
|
</swp-add-button>
|
|
</swp-card>
|
|
|
|
<swp-card>
|
|
<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>
|
|
<swp-select data-value="@Model.BufferBefore">
|
|
<button type="button" aria-expanded="false">
|
|
<swp-select-value>@(Model.BufferBefore == "0" ? "Ingen" : Model.BufferBefore + " minutter")</swp-select-value>
|
|
<i class="ph ph-caret-down"></i>
|
|
</button>
|
|
<swp-select-dropdown>
|
|
<swp-select-option data-value="0" class="@(Model.BufferBefore == "0" ? "selected" : "")">Ingen</swp-select-option>
|
|
<swp-select-option data-value="5" class="@(Model.BufferBefore == "5" ? "selected" : "")">5 minutter</swp-select-option>
|
|
<swp-select-option data-value="10" class="@(Model.BufferBefore == "10" ? "selected" : "")">10 minutter</swp-select-option>
|
|
<swp-select-option data-value="15" class="@(Model.BufferBefore == "15" ? "selected" : "")">15 minutter</swp-select-option>
|
|
<swp-select-option data-value="30" class="@(Model.BufferBefore == "30" ? "selected" : "")">30 minutter</swp-select-option>
|
|
</swp-select-dropdown>
|
|
</swp-select>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelBufferAfter</swp-edit-label>
|
|
<swp-select data-value="@Model.BufferAfter">
|
|
<button type="button" aria-expanded="false">
|
|
<swp-select-value>@(Model.BufferAfter == "0" ? "Ingen" : Model.BufferAfter + " minutter")</swp-select-value>
|
|
<i class="ph ph-caret-down"></i>
|
|
</button>
|
|
<swp-select-dropdown>
|
|
<swp-select-option data-value="0" class="@(Model.BufferAfter == "0" ? "selected" : "")">Ingen</swp-select-option>
|
|
<swp-select-option data-value="5" class="@(Model.BufferAfter == "5" ? "selected" : "")">5 minutter</swp-select-option>
|
|
<swp-select-option data-value="10" class="@(Model.BufferAfter == "10" ? "selected" : "")">10 minutter</swp-select-option>
|
|
<swp-select-option data-value="15" class="@(Model.BufferAfter == "15" ? "selected" : "")">15 minutter</swp-select-option>
|
|
<swp-select-option data-value="30" class="@(Model.BufferAfter == "30" ? "selected" : "")">30 minutter</swp-select-option>
|
|
</swp-select-dropdown>
|
|
</swp-select>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelCleanupTime</swp-edit-label>
|
|
<swp-select data-value="@Model.CleanupTime">
|
|
<button type="button" aria-expanded="false">
|
|
<swp-select-value>@(Model.CleanupTime == "0" ? "Ingen" : Model.CleanupTime + " minutter")</swp-select-value>
|
|
<i class="ph ph-caret-down"></i>
|
|
</button>
|
|
<swp-select-dropdown>
|
|
<swp-select-option data-value="0" class="@(Model.CleanupTime == "0" ? "selected" : "")">Ingen</swp-select-option>
|
|
<swp-select-option data-value="5" class="@(Model.CleanupTime == "5" ? "selected" : "")">5 minutter</swp-select-option>
|
|
<swp-select-option data-value="10" class="@(Model.CleanupTime == "10" ? "selected" : "")">10 minutter</swp-select-option>
|
|
<swp-select-option data-value="15" class="@(Model.CleanupTime == "15" ? "selected" : "")">15 minutter</swp-select-option>
|
|
</swp-select-dropdown>
|
|
</swp-select>
|
|
</swp-edit-row>
|
|
</swp-edit-section>
|
|
</swp-card>
|
|
</swp-detail-grid>
|