From 52fa3a416a7b7f5b392e4c9b19faab5cd696d18a Mon Sep 17 00:00:00 2001
From: Daniel Clarke <daniel.clarke@education.gov.uk>
Date: Wed, 3 Jul 2024 13:41:20 +0100
Subject: [PATCH] formatting changes to question pages - brings them more in
 line with prototype designs

---
 .../Views/Questions/Date.cshtml               | 25 +++++-----
 .../Views/Questions/Dropdown.cshtml           | 46 +++++++++----------
 .../Views/Questions/Radio.cshtml              | 24 +++++-----
 3 files changed, 46 insertions(+), 49 deletions(-)

diff --git a/src/Dfe.EarlyYearsQualification.Web/Views/Questions/Date.cshtml b/src/Dfe.EarlyYearsQualification.Web/Views/Questions/Date.cshtml
index 5bd380cb..115be1e2 100644
--- a/src/Dfe.EarlyYearsQualification.Web/Views/Questions/Date.cshtml
+++ b/src/Dfe.EarlyYearsQualification.Web/Views/Questions/Date.cshtml
@@ -10,10 +10,10 @@
 
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-      <div class="govuk-form-group @(Model.HasErrors ? "govuk-form-group--error" : "")">
         @using (Html.BeginForm(Model.ActionName, Model.ControllerName, FormMethod.Post))
-            {
-                <fieldset class="govuk-fieldset govuk-!-margin-bottom-4">
+        {
+            <fieldset class="govuk-fieldset govuk-!-margin-bottom-4">
+                <div class="govuk-form-group @(Model.HasErrors ? "govuk-form-group--error" : "")">
                     <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
                         <h1 class="govuk-fieldset__heading" id="question">
                             @Model.Question
@@ -22,33 +22,34 @@
                     <div id="date-format-hint" class="govuk-hint">@Model.QuestionHint</div>
 
                     @if (Model.HasErrors)
-                      {
-                          <p id="date-error" class="govuk-error-message">
+                    {
+                        <p id="date-error" class="govuk-error-message">
                             <span class="govuk-visually-hidden">Error:</span> @Model.ErrorMessage
-                          </p>
-                      }
+                        </p>
+                    }
 
                     <div class="govuk-date-input" id="date-started">
                         <div class="govuk-date-input__item">
                             <div class="govuk-form-group">
                                 <label class="govuk-label govuk-date-input__label" for="date-started-month">@Model.MonthLabel</label>
-                                @Html.TextBoxFor(x => x.SelectedMonth, "{0:#.#}", new { id = "date-started-month", @class = "govuk-input govuk-date-input__input govuk-input--width-2", maxlength = "2", name="date-started-month", type="text", inputmode="numeric", Value = ""})
+                                @Html.TextBoxFor(x => x.SelectedMonth, "{0:#.#}", new { id = "date-started-month", @class = Model.HasErrors ? "govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" : "govuk-input govuk-date-input__input govuk-input--width-2", maxlength = "2", name = "date-started-month", type = "text", inputmode = "numeric", Value = "" })
                             </div>
                         </div>
                         <div class="govuk-date-input__item">
                             <div class="govuk-form-group">
                                 <label class="govuk-label govuk-date-input__label" for="date-started-year">@Model.YearLabel</label>
-                                @Html.TextBoxFor(x => x.SelectedYear, "{0:#.#}", new { id = "date-started-year", @class = "govuk-input govuk-date-input__input govuk-input--width-4", maxlength = "4", name="date-started-month", type="text", inputmode="numeric", Value = ""})
+                                @Html.TextBoxFor(x => x.SelectedYear, "{0:#.#}", new { id = "date-started-year", @class = Model.HasErrors ? "govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" : "govuk-input govuk-date-input__input govuk-input--width-4", maxlength = "4", name = "date-started-month", type = "text", inputmode = "numeric", Value = "" })
                             </div>
                         </div>
                     </div>
-                </fieldset>
+                </div>
+
                 <div class="govuk-form-group">
                     <button id="question-submit" type="submit" class="govuk-button" data-module="govuk-button">
                         @Model.CtaButtonText
                     </button>
                 </div>
-            }
-        </div>
+            </fieldset>
+        }
     </div>
 </div>
\ No newline at end of file
diff --git a/src/Dfe.EarlyYearsQualification.Web/Views/Questions/Dropdown.cshtml b/src/Dfe.EarlyYearsQualification.Web/Views/Questions/Dropdown.cshtml
index 62baaf4d..d3677508 100644
--- a/src/Dfe.EarlyYearsQualification.Web/Views/Questions/Dropdown.cshtml
+++ b/src/Dfe.EarlyYearsQualification.Web/Views/Questions/Dropdown.cshtml
@@ -21,36 +21,31 @@
 
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-      <div class="govuk-form-group @(Model.HasErrors ? "govuk-form-group--error" : "")">
         @using (Html.BeginForm(Model.ActionName, Model.ControllerName, FormMethod.Post))
-            {
-                <fieldset class="govuk-fieldset govuk-!-margin-bottom-4">
-                    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-                        <h1 class="govuk-fieldset__heading" id="question">
-                            @Model.Question
-                        </h1>
-                    </legend>
+        {
+            <fieldset class="govuk-fieldset govuk-!-margin-bottom-4">
+                <div class="govuk-form-group @(Model.HasErrors ? "govuk-form-group--error" : "")">
+                    <h1 class="govuk-heading-l" id="question">
+                        @Model.Question
+                    </h1>
+                    
+                    <h1 class="govuk-label-wrapper">
+                        @Html.Label(Model.DropdownId, Model.DropdownHeading, new { @class = "govuk-label govuk-fieldset__legend--m" })
+                    </h1>
 
                     @if (Model.HasErrors)
                     {
-                        <p id="dropdown-error" class="govuk-error-message">
-                            <span class="govuk-visually-hidden">Error:</span> @Model.ErrorMessage
-                        </p>
+                    <p id="dropdown-error" class="govuk-error-message">
+                        <span class="govuk-visually-hidden">Error:</span> @Model.ErrorMessage
+                    </p>
                     }
+
+                    <div class="govuk-form-group">
+                        @Html.DropDownListFor(x => x.SelectedValue, Model.Values, new { @class = Model.HasErrors ? "govuk-select govuk-select--error" : "govuk-select", id = Model.DropdownId })
+                    </div>
                     
-                </fieldset>
-                
-                <h1 class="govuk-label-wrapper">
-                    @Html.Label(Model.DropdownId, Model.DropdownHeading, new { @class = "govuk-label govuk-fieldset__legend--m" })
-                </h1>
-                
-                <div class="govuk-form-group">
-                    @Html.DropDownListFor(x => x.SelectedValue, Model.Values, new { @class = Model.HasErrors ? "govuk-select govuk-select--error" : "govuk-select", id = Model.DropdownId })
-                </div>
-                
-                <div class="govuk-form-group">
                     <div class="govuk-checkboxes__item">
-                        @Html.CheckBoxFor(x => x.NotInTheList, new { @class = "govuk-checkboxes__input", id=Model.CheckboxId, name="awarding-organisation" })
+                        @Html.CheckBoxFor(x => x.NotInTheList, new { @class = "govuk-checkboxes__input", id = Model.CheckboxId, name = "awarding-organisation" })
                         @Html.Label(Model.CheckboxId, Model.NotInListText, new { @class = "govuk-label govuk-checkboxes__label" })
                     </div>
                 </div>
@@ -60,7 +55,8 @@
                         @Model.CtaButtonText
                     </button>
                 </div>
-                }
-            </div>
+            </fieldset>
+        }
+
     </div>
 </div>
\ No newline at end of file
diff --git a/src/Dfe.EarlyYearsQualification.Web/Views/Questions/Radio.cshtml b/src/Dfe.EarlyYearsQualification.Web/Views/Questions/Radio.cshtml
index 2376b5e2..095a7d60 100644
--- a/src/Dfe.EarlyYearsQualification.Web/Views/Questions/Radio.cshtml
+++ b/src/Dfe.EarlyYearsQualification.Web/Views/Questions/Radio.cshtml
@@ -10,15 +10,14 @@
 
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-        <div class="govuk-form-group @(Model.HasErrors ? "govuk-form-group--error" : "")">
-            @using (Html.BeginForm(Model.ActionName, Model.ControllerName, FormMethod.Post))
-            {
-                <fieldset class="govuk-fieldset govuk-!-margin-bottom-4">
-                    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-                        <h1 class="govuk-fieldset__heading" id="question">
-                            @Model.Question
-                        </h1>
-                    </legend>
+        @using (Html.BeginForm(Model.ActionName, Model.ControllerName, FormMethod.Post))
+        {
+            <fieldset class="govuk-fieldset govuk-!-margin-bottom-4">
+                <div class="govuk-form-group @(Model.HasErrors ? "govuk-form-group--error" : "")">
+                    <h1 class="govuk-heading-l" id="question">
+                        @Model.Question
+                    </h1>
+
                     @if (!string.IsNullOrEmpty(Model.AdditionalInformationHeader) && !string.IsNullOrEmpty(Model.AdditionalInformationBody))
                     {
                         <details class="govuk-details">
@@ -49,13 +48,14 @@
                             </div>
                         }
                     </div>
-                </fieldset>
+                </div>
+
                 <div class="govuk-form-group">
                     <button id="question-submit" type="submit" class="govuk-button" data-module="govuk-button">
                         @Model.CtaButtonText
                     </button>
                 </div>
-            }
-        </div>
+            </fieldset>
+        }
     </div>
 </div>
\ No newline at end of file