Skip to content

Commit e952060

Browse files
kevwhitt-heekevwhitt-hee
committed
Fixes optional competencies page markup and styling
1 parent 39c6442 commit e952060

File tree

2 files changed

+62
-67
lines changed

2 files changed

+62
-67
lines changed

‎DigitalLearningSolutions.Web/Styles/learningPortal/selfAssessment.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,6 @@ details.nhsuk-details {
5454
}
5555
}
5656

57-
.nhsuk-details__summary-text {
58-
text-decoration: none;
59-
}
60-
6157
.score {
6258
margin-left: 48px;
6359
color: $color_nhsuk-black;
@@ -247,3 +243,7 @@ details.nhsuk-details {
247243
.text-area-edit-90 {
248244
height: 90px
249245
}
246+
247+
.heading-checkboxes__label {
248+
padding: 4px 12px 4px;
249+
}

‎DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/ManageOptionalCompetencies.cshtml‎

Lines changed: 58 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,7 @@
88
ViewData["SelfAssessmentTitle"] = @Model.SelfAssessment.Name;
99
var backLinkData = Html.GetRouteValues();
1010
}
11-
<style>
12-
.nhsuk-details__summary-text {
13-
padding: 10px;
14-
}
15-
</style>
11+
1612
@if (ViewBag.FromAddOptionalPage != null)
1713
{
1814
@section breadcrumbs {
@@ -62,14 +58,12 @@ else
6258
}
6359

6460
<link rel="stylesheet" href="@Url.Content("~/css/learningPortal/selfAssessment.css")" asp-append-version="true">
65-
<h1>Choose optional @Model.VocabPlural().ToLower()</h1>
61+
<h1>Optional @Model.VocabPlural().ToLower()</h1>
6662
@if (errorHasOccurred)
6763
{
6864
<vc:error-summary order-of-property-names="@(new[] { nameof(Model.IncludedSelfAssessmentStructureIds) })" />
6965
}
70-
<h2>
71-
<small>Which optional @Model.VocabPlural().ToLower() would you like to include in your self-assessment?</small>
72-
</h2>
66+
7367
@if (Model.SelfAssessment.ManageOptionalCompetenciesPrompt != null)
7468
{
7569
<div class="nhsuk-warning-callout">
@@ -82,68 +76,68 @@ else
8276
<div>@Html.Raw(Model.SelfAssessment.ManageOptionalCompetenciesPrompt)</div>
8377
</div>
8478
}
79+
<h2>
80+
Select your optional @Model.VocabPlural().ToLower()
81+
</h2>
8582
<form method="post">
8683
<nhs-form-group nhs-validation-for="IncludedSelfAssessmentStructureIds">
8784
@foreach (var competencyGroup in Model.CompetencyGroups)
8885
{
89-
<fieldset class="nhsuk-fieldset nhsuk-u-margin-bottom-4">
9086

91-
@if (competencyGroup.Count() > 1)
87+
88+
@if (competencyGroup.Count() > 1)
89+
{
90+
@if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
9291
{
93-
@if (competencyGroup.Any(x => x.GroupOptionalCompetencies))
94-
{
95-
96-
<div class="nhsuk-checkboxes__item">
97-
<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">
98-
<label class="nhsuk-label nhsuk-checkboxes__label nhsuk-u-font-size-16" for="[email protected]">
99-
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
100-
<span class="nhsuk-fieldset__heading">
101-
@competencyGroup.Key
92+
93+
<div class="nhsuk-checkboxes__item nhsuk-u-margin-bottom-6">
94+
<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">
95+
<label class="nhsuk-label nhsuk-checkboxes__label heading-checkboxes__label" for="[email protected]" aria-details="@competencyGroup.Key-details">
96+
<h3>
97+
@competencyGroup.Key
98+
</h3>
99+
</label>
100+
<div class="nhsuk-checkboxes__description" id="@competencyGroup.Key-details">
101+
<details class="nhsuk-details">
102+
<summary class="nhsuk-details__summary">
103+
<span class="nhsuk-details__summary-text">
104+
What&rsquo;s included in the <span class="nhsuk-u-visually-hidden"> @competencyGroup.Key </span>group
102105
</span>
103-
</legend>
104-
</label>
106+
</summary>
107+
108+
<div class="nhsuk-details__text">
109+
<ul>
110+
111+
@foreach (var competency in competencyGroup)
112+
{
113+
<li>
114+
115+
116+
@foreach (var flag in competency.CompetencyFlags)
117+
{
118+
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
119+
<strong class="nhsuk-tag @flag.FlagTagClass">
120+
@flag.FlagName
121+
</strong>
122+
</span>
123+
}
124+
@competency.Name
125+
</li>
126+
}
127+
</ul>
128+
</div>
129+
</details>
105130
</div>
106-
<details class="nhsuk-details">
107-
<summary class="nhsuk-details__summary nhsuk-u-padding-0">
108-
<h3 class="nhsuk-details__summary-text nhsuk-u-margin-bottom-0">
109-
<span class="nhsuk-u-margin-bottom-0">
110-
<span class="nhsuk-details__summary-text" id="@competencyGroup.Key">
111-
What&rsquo;s included in the @competencyGroup.Key
112-
</span>
113-
</span>
131+
</div>
114132

115-
</h3>
116-
</summary>
117-
118-
<div class="nhsuk-details__text nhsuk-card">
119-
<dl class="nhsuk-summary-list">
120-
121-
@foreach (var competency in competencyGroup)
122-
{ <div class="nhsuk-summary-list__row">
123-
124-
<dd class="nhsuk-summary-list__value">
125-
@foreach (var flag in competency.CompetencyFlags)
126-
{
127-
<span class="nhsuk-u-padding-right-2 @(ViewData["cssClass"]?.ToString())">
128-
<strong class="nhsuk-tag @flag.FlagTagClass">
129-
@flag.FlagName
130-
</strong>
131-
</span>
132-
}
133-
@competency.Name
134-
</dd>
135-
</div>
136-
}
137-
</dl>
138-
</div>
139-
</details>
140-
}
141-
else
142-
{
143-
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
144-
<span class="nhsuk-fieldset__heading">
133+
}
134+
else
135+
{
136+
<fieldset class="nhsuk-fieldset nhsuk-u-margin-bottom-6">
137+
<legend class="nhsuk-fieldset__legend">
138+
<h3>
145139
@competencyGroup.Key
146-
</span>
140+
</h3>
147141
</legend>
148142
<div class="nhsuk-checkboxes">
149143
@foreach (var competency in competencyGroup)
@@ -166,9 +160,10 @@ else
166160

167161
}
168162
</div>
169-
}
163+
</fieldset>
170164
}
171-
</fieldset>
165+
}
166+
172167
}
173168
</nhs-form-group>
174169
<button class="nhsuk-button" type="submit">Submit</button>

0 commit comments

Comments
 (0)