From 7648baa2401197541e7cfe9e5cdb3df39070edd0 Mon Sep 17 00:00:00 2001
From: Alberto Garcia Cabeza <alberto@decabeza.es>
Date: Tue, 15 Mar 2016 17:06:14 +0100
Subject: [PATCH] Adds help for document number on verification

---
 app/assets/stylesheets/layout.scss            |  2 +-
 app/views/verification/residence/new.html.erb | 28 +++++++++++++++----
 config/locales/verification.en.yml            |  2 ++
 config/locales/verification.es.yml            |  2 ++
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index ba912f53f..68fd9268d 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1388,7 +1388,7 @@ table {
     }
   }
 
-  .date {
+  .date-of-birth {
 
     select {
       float: left;
diff --git a/app/views/verification/residence/new.html.erb b/app/views/verification/residence/new.html.erb
index 2a2a425a9..23c79ca0e 100644
--- a/app/views/verification/residence/new.html.erb
+++ b/app/views/verification/residence/new.html.erb
@@ -40,18 +40,32 @@
 
       <div class="row">
         <div class="small-12 medium-8">
-          <div class="small-12 medium-4 column">
+          <div class="small-12 medium-3 column">
           <%= f.label t("verification.residence.new.document_type_label") %>
           <%= f.select :document_type, document_types, prompt: "", label: false %>
           </div>
           <div class="small-12 medium-5 column end">
-          <%= f.label t("verification.residence.new.document_number") %>
+
+          <div class="inline-block">
+            <%= f.label t("verification.residence.new.document_number") %>
+          </div>
+
+          <div class="inline-block" data-toggle="info-document-number">
+            <span class="icon-help"></span>
+            <span class="sr-only"><%= t("verification.residence.new.document_number_help_title") %></span>
+          </div>
+
+          <div class="dropdown-pane" id="info-document-number" data-dropdown
+               data-hover="true" data-hover-pane="true">
+            <%= t("verification.residence.new.document_number_help_text_html") %>
+          </div>
+
           <%= f.text_field :document_number, label: false %>
           </div>
         </div>
       </div>
 
-      <div class="date small-12 medium-6 clear">
+      <div class="date-of-birth small-12 medium-6 clear">
       <%= f.label t("verification.residence.new.date_of_birth") %>
       <%= f.date_select :date_of_birth,
                         prompt: true,
@@ -62,7 +76,9 @@
       <div class="small-12 medium-5 clear">
         <%= f.label t("verification.residence.new.postal_code") %>
         <p class="note"><%= t("verification.residence.new.postal_code_note") %></p>
-        <%= f.text_field :postal_code, label: false %>
+        <div class="medium-6">
+          <%= f.text_field :postal_code, label: false %>
+        </div>
       </div>
 
       <div class="small-12">
@@ -78,8 +94,8 @@
         <% end %>
       </div>
 
-      <div class="small-12 clear">
-        <%= f.submit t("verification.residence.new.verify_residence"), class: "button success" %>
+      <div class="small-12 medium-3 clear">
+        <%= f.submit t("verification.residence.new.verify_residence"), class: "button success expanded" %>
       </div>
     <% end %>
   </div>
diff --git a/config/locales/verification.en.yml b/config/locales/verification.en.yml
index 4c78108ba..24c9ae928 100755
--- a/config/locales/verification.en.yml
+++ b/config/locales/verification.en.yml
@@ -54,6 +54,8 @@ en:
         accept_terms_text_title: I accept the terms and conditions of access of the Census
         date_of_birth: Date of birth
         document_number: Document number
+        document_number_help_title: Help
+        document_number_help_text_html: '<strong>DNI</strong>: 12345678A<br> <strong>Passport</strong>: AAA000001<br> <strong>Residence card</strong>: X1234567P'
         document_type:
           passport: Passport
           residence_card: Residence card
diff --git a/config/locales/verification.es.yml b/config/locales/verification.es.yml
index 7434ec5b7..be676ab0f 100644
--- a/config/locales/verification.es.yml
+++ b/config/locales/verification.es.yml
@@ -54,6 +54,8 @@ es:
         accept_terms_text_title: Acepto los términos de acceso al Padrón
         date_of_birth: Fecha de nacimiento
         document_number: Número de documento
+        document_number_help_title: Ayuda
+        document_number_help_text_html: '<strong>DNI</strong>: 12345678A<br> <strong>Pasaporte</strong>: AAA000001<br> <strong>Tarjeta de residencia</strong>: X1234567P'
         document_type:
           passport: Pasaporte
           residence_card: Tarjeta de residencia