Adds new styles to verifica page

app/assets/fonts/icons.svg

@@ -44,4 +44,5 @@
 <glyph glyph-name="blog" unicode="&#74;" d="M52 369c38 71 115 118 204 118 58 0 110-24 150-59-11 2-24 0-36-7-30-17-40-66-1-90 24-15 32-53 32-76-1-23-56-128-56-128l-54 184c0 0-2 13-2 17 0 4 2 10 5 13 2 3 5 7 8 7l26 0 0 21-139 0 0-21 5 0c4 0 9-6 13-10 5-6 11-25 19-45l20-67-43-100-48 200c0 0 2 14 5 16 1 2 4 6 8 6l1 0 0 21z m27-35c0 0-11 14-23 14l-12 0c-12-25-18-60-18-91 0-95 58-176 141-211z m375 36c5-20 4-46-5-73-22-72-77-202-99-252 81 36 136 116 136 209 0 43-11 82-32 116z m-193-194l-59-144c17-4 35-7 54-7 19 0 38 3 56 7z"/>
 <glyph glyph-name="box" unicode="&#73;" d="M311 274c0 5-2 10-6 13-3 4-7 6-12 6l-74 0c-5 0-9-2-12-6-4-3-6-8-6-13 0-5 2-9 6-13 3-3 7-5 12-5l74 0c5 0 9 2 12 5 4 4 6 8 6 13z m164 55l0-274c0-5-1-9-5-13-4-4-8-5-13-5l-402 0c-5 0-9 1-13 5-4 4-5 8-5 13l0 274c0 5 1 9 5 13 4 4 8 5 13 5l402 0c5 0 9-1 13-5 4-4 5-8 5-13z m19 128l0-73c0-5-2-9-6-13-3-3-8-5-13-5l-438 0c-5 0-10 2-13 5-4 4-6 8-6 13l0 73c0 5 2 9 6 13 3 4 8 5 13 5l438 0c5 0 10-1 13-5 4-4 6-8 6-13z"/>
 <glyph glyph-name="youtube" unicode="&#75;" d="M314 157l0-61c0-12-4-19-11-19-5 0-9 2-13 6l0 86c4 5 8 7 13 7 7 0 11-7 11-19z m97-1l0-13-26 0 0 13c0 13 4 20 13 20 8 0 13-7 13-20z m-276 63l30 0 0 26-89 0 0-26 30 0 0-163 29 0z m82-163l25 0 0 141-25 0 0-108c-6-8-11-12-16-12-4 0-6 2-6 6-1 1-1 4-1 10l0 104-25 0 0-112c0-9 1-16 2-20 2-7 8-11 17-11 9 0 19 6 29 17z m122 42l0 57c0 13 0 23-2 28-3 11-10 16-20 16-10 0-19-5-27-16l0 62-25 0 0-189 25 0 0 14c9-11 17-16 27-16 10 0 17 5 20 16 2 5 2 14 2 28z m97 3l0 4-26 0c0-10 0-16-1-18-1-6-5-10-11-10-9 0-13 7-13 20l0 25 51 0 0 29c0 15-3 26-8 33-7 10-17 15-30 15-13 0-23-5-31-15-5-7-8-18-8-33l0-49c0-15 3-26 9-33 7-10 17-15 31-15 13 0 24 5 30 15 4 5 6 10 6 16 1 1 1 7 1 16z m-174 261l0 60c0 13-4 20-12 20-8 0-12-7-12-20l0-60c0-13 4-20 12-20 8 0 12 7 12 20z m206-215c0-44-3-77-8-100-2-11-8-20-16-28-9-7-18-12-29-13-35-4-88-6-159-6-71 0-124 2-159 6-11 1-20 6-29 13-8 8-14 17-16 28-5 22-8 55-8 100 0 45 3 78 8 100 2 12 8 21 16 29 9 7 18 12 30 13 35 4 87 6 158 6 71 0 124-2 159-6 11-1 20-6 29-13 8-8 14-17 16-29 5-21 8-54 8-100z m-285 365l29 0-35-114 0-77-28 0 0 77c-3 14-9 34-18 61-7 19-13 37-18 53l30 0 20-75z m105-95l0-50c0-16-2-27-8-34-7-10-17-14-30-14-13 0-23 4-30 14-5 7-8 19-8 34l0 50c0 15 3 26 8 33 7 10 17 15 30 15 13 0 23-5 30-15 6-7 8-18 8-33z m96 46l0-142-26 0 0 15c-10-12-20-17-29-17-9 0-15 3-17 10-2 5-3 12-3 22l0 112 26 0 0-105c0-6 1-9 1-10 0-4 2-6 6-6 5 0 10 4 16 12l0 109z"/>
+<glyph glyph-name="letter" unicode="&#76;" d="M475 82l0 220c-6-7-12-13-19-19-51-39-92-72-122-97-10-8-18-14-24-19-6-4-14-9-24-14-11-4-21-7-30-7l0 0c-9 0-19 3-30 7-10 5-18 10-24 14-6 5-14 11-24 19-30 25-71 58-122 97-7 6-13 12-19 19l0-220c0-2 0-4 2-6 2-2 4-3 7-3l420 0c3 0 5 1 7 3 2 2 2 4 2 6z m0 301l0 7c0 0 0 1 0 3 0 3 0 4-1 4 0 0-1 1-1 2-1 2-2 3-3 3-1-1-2-1-4 0l-420 0c-3 0-5-1-7-2-2-2-2-4-2-7 0-32 14-59 42-81 36-29 75-59 114-91 1-1 5-3 10-8 6-5 10-8 13-11 4-2 8-5 13-9 5-3 10-6 14-8 5-1 9-2 13-2l0 0c4 0 8 1 13 2 4 2 9 5 14 8 5 4 9 7 13 9 3 3 7 6 13 11 5 5 9 7 10 8 39 32 78 62 114 91 11 8 20 19 29 33 9 14 13 26 13 38z m37 10l0-311c0-12-4-23-13-32-9-9-20-13-33-13l-420 0c-13 0-24 4-33 13-9 9-13 20-13 32l0 311c0 13 4 23 13 32 9 9 20 14 33 14l420 0c13 0 24-5 33-14 9-9 13-19 13-32z"/>
 </font></defs></svg>

app/assets/stylesheets/icons.scss

@@ -148,3 +148,6 @@
 .icon-youtube:before {
   content: "K";
 }
+.icon-letter:before {
+  content: "L";
+}

app/assets/stylesheets/layout.scss

@@ -1768,7 +1768,8 @@ table {
 }
 
 .verify {
-  margin: rem-calc(24) 0 rem-calc(48);
+  margin-bottom: rem-calc(48);
+  margin-top: rem-calc(24);
 
   h1 {
     color: $check;
@@ -1778,6 +1779,24 @@ table {
       vertical-align: middle;
     }
   }
+
+  .letter-divider {
+    border-top: 1px solid #DDDDDD;
+    clear: both;
+    height: 0;
+    margin: rem-calc(24) 0;
+    position: relative;
+
+    .icon-letter {
+      background: white;
+      color: $info-color;
+      font-size: rem-calc(24);
+      margin-left: rem-calc(-27);
+      padding: 0 rem-calc(12);
+      position: absolute;
+      top: rem-calc(-12);
+    }
+  }
 }
 
 // 18. Comments

app/views/verification/letter/edit.html.erb

@@ -1,5 +1,5 @@
 <div class="row verify">
-  <div class="small-12 medium-8 small-centered column">
+  <div class="small-12 medium-9 large-6 small-centered column">
     <div class="text-center">
       <h1>
         <i class="icon-check"></i>
@@ -9,12 +9,21 @@
       <p><%= t("pages.verify.info") %></p>
     </div>
 
-    <div class="medium-6 small-centered column">
+    <div class="small-12 large-9 small-centered column">
     <%= form_for @letter, url: letter_path, method: :patch do |f| %>
       <%= render "/shared/errors", resource: @letter %>
-        <%= f.text_field :email, label: t("pages.verify.email") %>
+      <%= f.text_field :email, label: t("pages.verify.email"), placeholder: t("pages.verify.email") %>
-        <%= f.password_field :password, label: t("pages.verify.password") %>
+      <%= f.password_field :password, label: t("pages.verify.password"), placeholder: t("pages.verify.password") %>
-        <%= f.text_field :verification_code, label: t("pages.verify.code") %>
+
+      <p class="letter-divider text-center">
+        <i class="icon-letter"></i>
+      </p>
+
+      <p>
+        <%= t("pages.verify.info_code") %>
+      </p>
+
+      <%= f.text_field :verification_code, label: t("pages.verify.code"), placeholder: t("pages.verify.code") %>
 
       <%= f.submit(class: "button radius success expand", value: t("pages.verify.submit")) %>
     <% end %>

config/locales/pages.en.yml

@@ -21,8 +21,9 @@ en:
       "Open Data"
     verify:
       title: "Verify your account"
-      info: "Introduce your access data and the code you received in letter."
+      info: "For verufy your account introduce your access data:"
+      info_code: "Now introduce the code you received in letter:"
       email: "Email"
       password: "Password"
-      code: "Secure code"
+      code: "Code you received in letter"
       submit: "Verify my account"

config/locales/pages.es.yml

@@ -23,8 +23,9 @@ es:
       "Datos abiertos"
     verify:
       title: "Verifica tu cuenta"
-      info: "Introduce tus datos con los que te registraste y el código que has recibido en tu carta."
+      info: "Para verificar tu cuenta introduce los datos con los que te registraste:"
+      info_code: "Ahora introduce el código que has recibido en tu carta:"
       email: "Email"
       password: "Contraseña"
-      code: "Código de seguridad"
+      code: "Código que has recibido en tu carta"
       submit: "Verificar mi cuenta"