[Fix bug 913435] Formatting tweaks for Email newsletter recovery page

bedrock/newsletter/templates/newsletter/recovery.html

@@ -22,16 +22,14 @@
       {% endif %}
 
       <div class="field email-field">
-        <label>{{ _('Your email address:') }}</label>
+        <label for="id_email">{{ _('Your email address:') }}</label>
         <div class="field-contents">
           {{ form.email }}
-          <input type="submit" value="Send me a link" class="button">
+          {{ form.email.errors }}
         </div>
-        {{ form.email.errors }}
+        <input type="submit" value="Send me a link" class="button">
       </div>
 
-      <div class="field submit-field">
-      </div>
     </form>
   {% endif %}
 {% endblock %}

media/css/newsletter/newsletter.less

@@ -160,12 +160,22 @@
             .span(8);
         }
         .email-field {
-             label {
+            label {
                 display: block;
-                margin-top: -1em;
+                margin: -1em 0 0 @gridGutterWidth;
             }
-            input[type="text"] {
-                width: 300px;
+            input[type="email"] {
+                width: 350px;
+                margin-left: @gridGutterWidth;
+            }
+            input[type="submit"] {
+                position: absolute;
+                top: 45px;
+                right: 30px;
+                overflow: visible;
+            }
+            .errorlist {
+                margin-left: @gridGutterWidth;
             }
         }
     }
@@ -272,6 +282,11 @@
         .field {
             .span_narrow(8);
         }
+        .email-field {
+            input[type="email"] {
+                width: 250px;
+            }
+        }
     }
 
 }
@@ -338,22 +353,29 @@
     }
 
     #newsletter-recovery #newsletter-recovery-form {
-        padding-top: 10px;
+        padding-top: @baseLine;
         .intro,
         .field {
             .span-all();
         }
         .email-field {
-             label {
+            label {
                 display: block;
-                margin-top: 0;
+                margin: @baseLine 0 0 0;
             }
             input,
-            input[type="text"] {
+            input[type="email"] {
                 width: 100%;
-                margin-bottom: 5px;
+                margin: 0 0 @baseLine 0;
                 .border-box();
             }
+            input[type="submit"] {
+                position: static;
+                margin-top: 0;
+            }
+            .errorlist {
+                margin: 0 0 @baseLine 0;
+            }
         }
     }