Merge pull request #19 from appirio-tech/mobile-tips

Move tips under form fields for screen less than 915px wide

Author: nlitwin

app/account/register/register.jade

@@ -3,9 +3,9 @@
 
   form(name="registerForm", role="form", ng-submit="registerForm.$valid && vm.register()", novalidate)
     .first-last-names
-      input(ng-model="vm.firstname", maxlength="35", name="firstname", placeholder="First Name", type="text", required)
+      input(ng-model="vm.firstname", maxlength="64", name="firstname", placeholder="First Name", type="text", required)
 
-      input(ng-model="vm.lastname", maxlength="35", name="lastname", placeholder="Last Name", type="text", required)
+      input(ng-model="vm.lastname", maxlength="64", name="lastname", placeholder="Last Name", type="text", required)
 
     //- Show errors for first and last names once we know whether we can handle accents and other languages
     //- .form-errors
@@ -23,6 +23,17 @@
     .validation-bar(ng-class="{ 'error-bar': (registerForm.username.$error.usernameIsFree || registerForm.username.$error.minlength || registerForm.username.$error.maxlength), 'success-bar': (registerForm.username.$valid && !registerForm.username.$error.usernameIsFree) }")
       input(ng-model="vm.username", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.usernameTips = true", ng-blur="vm.usernameTips = false", ng-minlength="2", ng-maxlength="15", name="username", placeholder="Username", type="text", username-is-free, required)
 
+      .tips.username-tips(ng-show="vm.usernameTips")
+        h3 Username Tips:
+
+        p This will be public to other members
+
+        p Between 2 and 15 characters
+
+        p Can contain numbers and letters
+
+        p You can always change it later
+
     .form-errors
       p.login-error(ng-show="registerForm.username.$error.usernameIsFree") This username already exists.
 
@@ -31,42 +42,31 @@
     .validation-bar(ng-class="{ 'error-bar': (registerForm.email.$dirty && registerForm.email.$invalid), 'success-bar': (registerForm.email.$valid) }")
       input(ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", required)
 
+      .tips.email-tips(ng-show="vm.emailTips")
+        h3 Email Tips:
+
+        p This will be private and not shared with anyone.
+
+        p We will occasionally send you emails related to your account or interests.
+
     .form-errors
       p.login-error(ng-show="registerForm.email.$dirty && registerForm.email.$invalid") Please enter a valid email address.
 
     .validation-bar(ng-class="{ 'success-bar': (registerForm.password.$valid) }")
       input(ng-model="vm.password", ng-focus="vm.passwordTips = true", ng-blur="vm.passwordTips = false", name="password", placeholder="Create Password", type="password", ng-minlength="8", ng-maxlength="64", has-letter, has-symbol, has-number, required)
 
-    button(type="submit", ng-disabled="registerForm.$invalid", ng-class="{'enabled-button': registerForm.$valid}") Join Now
-
-  .tips.username-tips(ng-show="vm.usernameTips")
-    h3 Username Tips:
-
-    p This will be public to other members
-
-    p Between 2 and 15 characters
-
-    p Can contain numbers and letters
-
-    p You can always change it later
+      .tips.password-tips(ng-show="vm.passwordTips")
+        h3 Password Tips:
 
-  .tips.email-tips(ng-show="vm.emailTips")
-    h3 Email Tips:
+        p(ng-class="{ 'has-length-between-range': (registerForm.password.$dirty && !registerForm.password.$error.minlength && !registerForm.password.$error.maxlength && !registerForm.password.$error.required) }") Must be between 8 and 64 characters
 
-    p This will be private and not shared with anyone.
+        p(ng-class="{ 'has-letter': (registerForm.password.$dirty && !registerForm.password.$error.hasLetter) }") At least one letter
 
-    p We will occasionally send you emails related to your account or interests.
+        p(ng-class="{ 'has-symbol': (registerForm.password.$dirty && !registerForm.password.$error.hasSymbol) }") At least one symbol
 
-  .tips.password-tips(ng-show="vm.passwordTips")
-    h3 Password Tips:
+        p(ng-class="{ 'has-number': (registerForm.password.$dirty && !registerForm.password.$error.hasNumber) }") At least one number
 
-    p(ng-class="{ 'has-length-between-range': (registerForm.password.$dirty && !registerForm.password.$error.minlength && !registerForm.password.$error.maxlength && !registerForm.password.$error.required) }") Must be between 8 and 64 characters
-
-    p(ng-class="{ 'has-letter': (registerForm.password.$dirty && !registerForm.password.$error.hasLetter) }") At least one letter
-
-    p(ng-class="{ 'has-symbol': (registerForm.password.$dirty && !registerForm.password.$error.hasSymbol) }") At least one symbol
-
-    p(ng-class="{ 'has-number': (registerForm.password.$dirty && !registerForm.password.$error.hasNumber) }") At least one number
+    button(type="submit", ng-disabled="registerForm.$invalid", ng-class="{'enabled-button': registerForm.$valid}") Join Now
 
   section.terms
     p By clicking "JOIN NOW" I agree to Topcoder's

assets/css/account/register.scss

@@ -46,6 +46,12 @@
     position: absolute;
     width: 320px;
     text-align: left;
+    top: 13px;
+    @media only screen and (max-width: 915px) {
+      position: initial;
+      margin-left: 5px;
+      width: 300px;
+    }
 
     h3, p {
       margin-bottom: 10px;
@@ -54,13 +60,19 @@
     h3 {
       @include source-sans-semi-bold;
       font-size: 18px;
+      @media only screen and (max-width: 915px) {
+        font-size: 15px;
+      }
     }
 
     h3:before {
       font-family: 'FontAwesome';
       content: '\f053';
       display: inline-block;
       width: 20px;
+      @media only screen and (max-width: 915px) {
+        display: none;
+      }
     }
 
     p {
@@ -81,12 +93,10 @@
   }
 
   .username-tips {
-    top: 219px;
     left: 330px;
   }
 
   .email-tips {
-    top: 270px;
     left: 330px;
 
     p:last-child {
@@ -95,7 +105,6 @@
   }
 
   .password-tips {
-    top: 322px;
     left: 330px;
 
     p:before {