Skip to content

Commit

Permalink
Fixes optional competencies page markup and styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevwhitt-hee
kevwhitt-hee committed Oct 21, 2024
1 parent 39c6442 commit e952060
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 67 deletions.
8 changes: 4 additions & 4 deletions DigitalLearningSolutions.Web/Styles/learningPortal/selfAssessment.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,6 @@ details.nhsuk-details {
}
}

.nhsuk-details__summary-text {
text-decoration: none;
}

.score {
margin-left: 48px;
color: $color_nhsuk-black;
Expand Down Expand Up @@ -247,3 +243,7 @@ details.nhsuk-details {
.text-area-edit-90 {
height: 90px
}

.heading-checkboxes__label {
padding: 4px 12px 4px;
}
121 changes: 58 additions & 63 deletions ...rningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,7 @@
ViewData["SelfAssessmentTitle"] = @Model.SelfAssessment.Name;
var backLinkData = Html.GetRouteValues();
}
<style>
.nhsuk-details__summary-text {
padding: 10px;
}
</style>

@if (ViewBag.FromAddOptionalPage != null)
{
@section breadcrumbs {
Expand Down Expand Up @@ -62,14 +58,12 @@ else
}

<link rel="stylesheet" href="@Url.Content("~/css/learningPortal/selfAssessment.css")" asp-append-version="true">
<h1>Choose optional @Model.VocabPlural().ToLower()</h1>
<h1>Optional @Model.VocabPlural().ToLower()</h1>
@if (errorHasOccurred)
{
<vc:error-summary order-of-property-names="@(new[] { nameof(Model.IncludedSelfAssessmentStructureIds) })" />
}
<h2>
<small>Which optional @Model.VocabPlural().ToLower() would you like to include in your self-assessment?</small>
</h2>

@if (Model.SelfAssessment.ManageOptionalCompetenciesPrompt != null)
{
<div class="nhsuk-warning-callout">
Expand All @@ -82,68 +76,68 @@ else
<div>@Html.Raw(Model.SelfAssessment.ManageOptionalCompetenciesPrompt)</div>
</div>
}
<h2>
Select your optional @Model.VocabPlural().ToLower()
</h2>
<form method="post">
<nhs-form-group nhs-validation-for="IncludedSelfAssessmentStructureIds">
@foreach (var competencyGroup in Model.CompetencyGroups)
{
<fieldset class="nhsuk-fieldset nhsuk-u-margin-bottom-4">

@if (competencyGroup.Count() > 1)

@if (competencyGroup.Count() > 1)
{
@if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
{
@if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
{

<div class="nhsuk-checkboxes__item">
<input data-group="@competencyGroup.Key" class="nhsuk-checkboxes__input" id="[email protected]" name="groupOptionalCompetenciesChecked" checked="@(competencyGroup.Any(x => x.IncludedInSelfAssessment == true) ? true : false)" type="checkbox" value="@competencyGroup.Key">
<label class="nhsuk-label nhsuk-checkboxes__label nhsuk-u-font-size-16" for="[email protected]">
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
<span class="nhsuk-fieldset__heading">
@competencyGroup.Key

<div class="nhsuk-checkboxes__item nhsuk-u-margin-bottom-6">
<input data-group="@competencyGroup.Key" class="nhsuk-checkboxes__input" id="[email protected]" name="groupOptionalCompetenciesChecked" checked="@(competencyGroup.Any(x => x.IncludedInSelfAssessment == true) ? true : false)" type="checkbox" value="@competencyGroup.Key">
<label class="nhsuk-label nhsuk-checkboxes__label heading-checkboxes__label" for="[email protected]" aria-details="@competencyGroup.Key-details">
<h3>
@competencyGroup.Key
</h3>
</label>
<div class="nhsuk-checkboxes__description" id="@competencyGroup.Key-details">
<details class="nhsuk-details">
<summary class="nhsuk-details__summary">
<span class="nhsuk-details__summary-text">
What&rsquo;s included in the <span class="nhsuk-u-visually-hidden"> @competencyGroup.Key </span>group
</span>
</legend>
</label>
</summary>

<div class="nhsuk-details__text">
<ul>

@foreach (var competency in competencyGroup)
{
<li>


@foreach (var flag in competency.CompetencyFlags)
{
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
<strong class="nhsuk-tag @flag.FlagTagClass">
@flag.FlagName
</strong>
</span>
}
@competency.Name
</li>
}
</ul>
</div>
</details>
</div>
<details class="nhsuk-details">
<summary class="nhsuk-details__summary nhsuk-u-padding-0">
<h3 class="nhsuk-details__summary-text nhsuk-u-margin-bottom-0">
<span class="nhsuk-u-margin-bottom-0">
<span class="nhsuk-details__summary-text" id="@competencyGroup.Key">
What&rsquo;s included in the @competencyGroup.Key
</span>
</span>
</div>

</h3>
</summary>

<div class="nhsuk-details__text nhsuk-card">
<dl class="nhsuk-summary-list">

@foreach (var competency in competencyGroup)
{ <div class="nhsuk-summary-list__row">

<dd class="nhsuk-summary-list__value">
@foreach (var flag in competency.CompetencyFlags)
{
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
<strong class="nhsuk-tag @flag.FlagTagClass">
@flag.FlagName
</strong>
</span>
}
@competency.Name
</dd>
</div>
}
</dl>
</div>
</details>
}
else
{
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
<span class="nhsuk-fieldset__heading">
}
else
{
<fieldset class="nhsuk-fieldset nhsuk-u-margin-bottom-6">
<legend class="nhsuk-fieldset__legend">
<h3>
@competencyGroup.Key
</span>
</h3>
</legend>
<div class="nhsuk-checkboxes">
@foreach (var competency in competencyGroup)
Expand All @@ -166,9 +160,10 @@ else

}
</div>
}
</fieldset>
}
</fieldset>
}

}
</nhs-form-group>
<button class="nhsuk-button" type="submit">Submit</button>
Expand Down

0 comments on commit e952060

Please sign in to comment.