44 lines
1.3 KiB
Plaintext
44 lines
1.3 KiB
Plaintext
@model OnboardingJourneyHeaderViewModel
|
|
@{
|
|
var steps = new[]
|
|
{
|
|
new { Label = "Welcome", Order = 1 },
|
|
new { Label = "Writing Preferences", Order = 2 },
|
|
new { Label = "Project", Order = 3 },
|
|
new { Label = "Book", Order = 4 },
|
|
new { Label = "Connect Word", Order = 5 },
|
|
new { Label = "Scan Manuscript", Order = 6 },
|
|
new { Label = "Review Chapters", Order = 7 },
|
|
new { Label = "Analyse Manuscript", Order = 8 },
|
|
new { Label = "Complete", Order = 9 }
|
|
};
|
|
}
|
|
|
|
<div class="onboarding-progress" aria-label="@Model.AriaLabel">
|
|
<span>Step @Model.CurrentStep of @Model.TotalSteps</span>
|
|
<div class="onboarding-progress-track">
|
|
<span style="width:@((Model.CurrentStep * 100) / Model.TotalSteps)%"></span>
|
|
</div>
|
|
</div>
|
|
<ol class="onboarding-stepper" aria-label="Manuscript import journey">
|
|
@foreach (var step in steps)
|
|
{
|
|
<li class="@StepClass(step.Order, Model.CurrentStep)">
|
|
<span>@step.Order</span>
|
|
<strong>@step.Label</strong>
|
|
</li>
|
|
}
|
|
</ol>
|
|
|
|
@functions {
|
|
private static string StepClass(int order, int currentStep)
|
|
{
|
|
if (order < currentStep)
|
|
{
|
|
return "is-complete";
|
|
}
|
|
|
|
return order == currentStep ? "is-current" : "is-upcoming";
|
|
}
|
|
}
|