From 71fd7f98a7a4cedc611e82b06b91569986bf5f01 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 2 Feb 2016 15:12:59 +0000
Subject: [PATCH] =?UTF-8?q?Reduce=20spacing=20between=20textbox=20and=20?=
 =?UTF-8?q?=E2=80=98I=20have=E2=80=99t=20rec=E2=80=A6=E2=80=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The grouping on this page was weird because these links were two far away from
the associated textbox, and too close to the next textbox.

This commit adds them as parameters to the textbox macro, which means their
relative spacing can be controlled exactly, and thus reduced.
---
 app/assets/stylesheets/components/textbox.scss |  4 ++++
 app/templates/components/textbox.html          |  7 ++++++-
 app/templates/views/verify.html                | 18 ++++++++++--------
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss
index 1d2807709..224750586 100644
--- a/app/assets/stylesheets/components/textbox.scss
+++ b/app/assets/stylesheets/components/textbox.scss
@@ -81,3 +81,7 @@
 
 
 }
+
+.textbox-help-link {
+  margin: 5px 0 0 0;
+}
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index 918fc33d7..5185f910f 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -1,4 +1,4 @@
-{% macro textbox(field, hint=False, highlight_tags=False) %}
+{% macro textbox(field, hint=False, highlight_tags=False, help_link=None, help_link_text=None) %}
   <div class="form-group{% if field.errors %} error{% endif %}">
     <label class="form-label" for="{{ field.name }}">
       {{ field.label }}
@@ -17,5 +17,10 @@
       'class': 'form-control textbox-highlight-textbox' if highlight_tags else 'form-control',
       'data-module': 'highlight-tags' if highlight_tags else ''
     }) }}
+    {% if help_link and help_link_text %}
+      <p class="textbox-help-link">
+        <a href='{{ help_link }}'>{{ help_link_text }}</a>
+      </p>
+    {% endif %}
   </div>
 {% endmacro %}
diff --git a/app/templates/views/verify.html b/app/templates/views/verify.html
index b04726c16..9c01b596f 100644
--- a/app/templates/views/verify.html
+++ b/app/templates/views/verify.html
@@ -15,14 +15,16 @@ GOV.UK Notify | Confirm email address and mobile number
     <p>We’ve sent you confirmation codes by email and text message. You need to enter both codes here.</p>
 
     <form autocomplete="off" method="post">
-      {{ textbox(form.email_code) }}
-      <p>
-        <a href="{{ url_for('.check_and_resend_email_code')}}">I haven’t received an email</a>
-      </p>
-      {{ textbox(form.sms_code) }}
-      <p>
-        <a href="{{ url_for('.check_and_resend_text_code') }}">I haven’t received a text</a></span>
-      </p>
+      {{ textbox(
+        form.email_code,
+        help_link=url_for('.check_and_resend_email_code'),
+        help_link_text='I haven’t received an email'
+      ) }}
+      {{ textbox(
+        form.sms_code,
+        help_link=url_for('.check_and_resend_text_code'),
+        help_link_text='I haven’t received a text'
+      ) }}
       {{ page_footer("Continue") }}
     </form>
   </div>