From 5421fd3bf42d98c444b53381cb55a3f354c29f2c Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Thu, 1 Jun 2017 12:06:13 +0100
Subject: [PATCH] Constrain summary boxes

Add grid and column wrappers to constrain summary boxes. These are now
2/3 of the width of the page.
---
 .../form_error_multiple_show_errors.html      | 82 +++++++++---------
 .../form_error_radio_show_errors.html         | 84 ++++++++++---------
 2 files changed, 89 insertions(+), 77 deletions(-)

diff --git a/app/views/snippets/form_error_multiple_show_errors.html b/app/views/snippets/form_error_multiple_show_errors.html
index 0ad14a044..006283235 100644
--- a/app/views/snippets/form_error_multiple_show_errors.html
+++ b/app/views/snippets/form_error_multiple_show_errors.html
@@ -1,55 +1,61 @@
-<div class="error-summary" role="group" aria-labelledby="error-summary-heading-example-2" tabindex="-1">
+<div class="grid-row">
+  <div class="column-two-thirds">
 
-  <h1 class="heading-medium error-summary-heading" id="error-summary-heading-example-2">
-    Message to alert the user to a problem goes here
-  </h1>
+    <div class="error-summary" role="group" aria-labelledby="error-summary-heading-example-2" tabindex="-1">
 
-  <p>
-    Optional description of the errors and how to correct them
-  </p>
+      <h1 class="heading-medium error-summary-heading" id="error-summary-heading-example-2">
+        Message to alert the user to a problem goes here
+      </h1>
 
-  <ul class="error-summary-list">
-    <li><a href="#example-full-name">Descriptive link to the question with an error</a></li>
-    <li><a href="#example-ni-number">Descriptive link to the question with an error</a></li>
-  </ul>
+      <p>
+        Optional description of the errors and how to correct them
+      </p>
 
-</div>
+      <ul class="error-summary-list">
+        <li><a href="#example-full-name">Descriptive link to the question with an error</a></li>
+        <li><a href="#example-ni-number">Descriptive link to the question with an error</a></li>
+      </ul>
 
-<h1 class="heading-large">
-  Your personal details
-</h1>
+    </div>
 
-<div class="form-group form-group-error">
+    <h1 class="heading-large">
+      Your personal details
+    </h1>
 
-  <label for="example-full-name" id="error-full-name">
+    <div class="form-group form-group-error">
 
-    <span class="form-label-bold">Full name</span>
-    <span class="form-hint">As shown on your birth certificate or passport</span>
-    <span class="error-message">Error message about full name goes here</span>
+      <label for="example-full-name" id="error-full-name">
 
-  </label>
+        <span class="form-label-bold">Full name</span>
+        <span class="form-hint">As shown on your birth certificate or passport</span>
+        <span class="error-message">Error message about full name goes here</span>
 
-  <input class="form-control form-control-error" id="example-full-name" type="text" name="fullName" value="">
-</div>
+      </label>
 
-<div class="form-group form-group-error">
+      <input class="form-control form-control-error" id="example-full-name" type="text" name="fullName" value="">
+    </div>
 
-  <label for="example-ni-number" id="error-ni-number">
+    <div class="form-group form-group-error">
 
-    <span class="form-label-bold">National Insurance number</span>
-    <span class="form-hint">
-      It’s on your National Insurance card, benefit letter, payslip or P60.
-      <br>
-      For example, ‘QQ 12 34 56 C’.
-    </span>
-    <span class="error-message">
-      Error message about National Insurance number goes here
-    </span>
+      <label for="example-ni-number" id="error-ni-number">
 
-  </label>
+        <span class="form-label-bold">National Insurance number</span>
+        <span class="form-hint">
+          It’s on your National Insurance card, benefit letter, payslip or P60.
+          <br>
+          For example, ‘QQ 12 34 56 C’.
+        </span>
+        <span class="error-message">
+          Error message about National Insurance number goes here
+        </span>
 
-  <input class="form-control form-control-error" id="example-ni-number" type="text" name="niNo" value="">
+      </label>
 
-</div>
+      <input class="form-control form-control-error" id="example-ni-number" type="text" name="niNo" value="">
 
-<input class="button" type="submit" value="Continue">
+    </div>
+
+    <input class="button" type="submit" value="Continue">
+
+  </div>
+</div>
diff --git a/app/views/snippets/form_error_radio_show_errors.html b/app/views/snippets/form_error_radio_show_errors.html
index 27bc44a37..155ecd83e 100644
--- a/app/views/snippets/form_error_radio_show_errors.html
+++ b/app/views/snippets/form_error_radio_show_errors.html
@@ -1,55 +1,61 @@
-<div class="error-summary" role="group" aria-labelledby="error-summary-heading-example-1" tabindex="-1">
+<div class="grid-row">
+  <div class="column-two-thirds">
 
-  <h1 class="heading-medium error-summary-heading" id="error-summary-heading-example-1">
-    Message to alert the user to a problem goes here
-  </h1>
+    <div class="error-summary" role="group" aria-labelledby="error-summary-heading-example-1" tabindex="-1">
 
-  <p>
-    Optional description of the errors and how to correct them
-  </p>
+      <h1 class="heading-medium error-summary-heading" id="error-summary-heading-example-1">
+        Message to alert the user to a problem goes here
+      </h1>
 
-  <ul class="error-summary-list">
-    <li><a href="#example-personal-details">Descriptive link to the question with an error</a></li>
-  </ul>
+      <p>
+        Optional description of the errors and how to correct them
+      </p>
 
-</div>
+      <ul class="error-summary-list">
+        <li><a href="#example-personal-details">Descriptive link to the question with an error</a></li>
+      </ul>
 
-<h1 class="heading-large">
-  Check your personal details
-</h1>
+    </div>
 
-<p>
-  Look at your name, signature and other details.
-</p>
+    <h1 class="heading-large">
+      Check your personal details
+    </h1>
 
-<form>
-  <div class="form-group form-group-error">
-    <fieldset>
+    <p>
+      Look at your name, signature and other details.
+    </p>
 
-      <legend id="example-personal-details">
+    <form>
+      <div class="form-group form-group-error">
+        <fieldset>
 
-        <span class="form-label-bold">
-          Are your personal details correct and up-to-date?
-        </span>
-        <span class="error-message">
-          Error message about personal details goes here
-        </span>
+          <legend id="example-personal-details">
 
-      </legend>
+            <span class="form-label-bold">
+              Are your personal details correct and up-to-date?
+            </span>
+            <span class="error-message">
+              Error message about personal details goes here
+            </span>
 
-      <div class="multiple-choice">
-        <input id="personal_details_yes" type="radio" name="personalDetails" value="Yes">
-        <label for="personal_details_yes">Yes, my personal details are correct</label>
-      </div>
+          </legend>
+
+          <div class="multiple-choice">
+            <input id="personal_details_yes" type="radio" name="personalDetails" value="Yes">
+            <label for="personal_details_yes">Yes, my personal details are correct</label>
+          </div>
+
+          <div class="multiple-choice">
+            <input id="personal_details_no" type="radio" name="personalDetails" value="No">
+            <label for="personal_details_no">No, some details are wrong or have changed</label>
+          </div>
 
-      <div class="multiple-choice">
-        <input id="personal_details_no" type="radio" name="personalDetails" value="No">
-        <label for="personal_details_no">No, some details are wrong or have changed</label>
+        </fieldset>
       </div>
 
-    </fieldset>
-  </div>
+      <input class="button" type="submit" value="Continue">
 
-  <input class="button" type="submit" value="Continue">
+    </form>
 
-</form>
+  </div>
+</div>