SUP-1792, [Registration] Apply mobile design

-- Applied mobile design

Author: vikasrohit

app/account/register/register.jade

@@ -35,7 +35,10 @@
       )
 
       .form-errors
-        p.form-error(ng-show="vm.registerForm.country.$error.required") Please choose a country from the list.
+        p.form-error(ng-show="vm.registerForm.country.$error.required") Please choose a country from the list
+
+    .section-break
+      hr
 
     .validation-bar(ng-class="{ 'error-bar': (vm.registerForm.username.$error.usernameIsFree || vm.registerForm.username.$error.minlength || vm.registerForm.username.$error.maxlength), 'success-bar': (vm.registerForm.username.$valid && !vm.registerForm.username.$error.usernameIsFree) }")
       input-sticky-placeholder(sticky-placeholder="Username", ng-model="vm.username")
@@ -85,10 +88,10 @@
 
         p(ng-class="{ 'has-symbol-or-number': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol
 
-    button(type="submit", tc-busy-button, tc-busy-when="vm.registering", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join
+    section.terms
+      p By clicking "Join," you agree to Topcoder's #[a(href="http://www.topcoder.com/community/how-it-works/terms/", target="_blank") Terms of Service] and #[a(href="http://www.topcoder.com/community/how-it-works/privacy-policy/", target="_blank") Privacy Policy]
 
-  section.terms
-    p By clicking "Join," you agree to Topcoder's #[a(href="http://www.topcoder.com/community/how-it-works/terms/", target="_blank") Terms of Service] and #[a(href="http://www.topcoder.com/community/how-it-works/privacy-policy/", target="_blank") Privacy Policy]
+    button(type="submit", tc-busy-button, tc-busy-when="vm.registering", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join
 
   section.social
     p ------------ Or Register With ------------
@@ -104,7 +107,7 @@
         .ico(ng-click="vm.socialRegister('facebook')")
         p Facebook
 
-  .join-topcoder
-    span Already a member?
-    p.redirect
-      a(ui-sref="login(vm.$stateParams)") Log in
+.join-topcoder
+  span Already a member?
+  p.redirect
+    a(ui-sref="login(vm.$stateParams)") Log in

assets/css/account/account.scss

@@ -1,6 +1,5 @@
 @import '../partials/combined';
 
-
 .login-container, .register-container, .reset-password-container, .registered-successfully-container {
   width: 560px;
   margin: 120px auto 0 auto;
@@ -17,8 +16,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    /* TODO remove workarounds of -ve margin */
-    margin-top: -66px;
     margin-bottom: 30px;
 
     .arrow {
@@ -94,6 +91,7 @@
   // Social section
   .social {
     margin-top: 15px;
+    margin-bottom: 40px;
 
     p {
       color: #A3A3AE;
@@ -161,41 +159,10 @@
       }
     }
   }
-
-  .join-topcoder {
-    display: flex;
-    flex-flow: row wrap;
-    margin-top: 10px;
-    justify-content: center;
-
-    span {
-      display: flex;
-      align-items: center;
-    }
-
-    .redirect {
-      border: 1px solid #D1D3D4;
-      background-color: white;
-      border-radius : 4px;
-      width: 111px;
-      height: 30px;
-      margin-left: 10px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      @include sofia-pro-light;
-      text-transform: uppercase;
-      font-size: 12px;
-      line-height: 14px;
-
-      a {
-        text-decoration: none;
-      }
-    }
-  }
 }
 
 @media (max-width: 767px) {
+
   .login-container, .register-container, .reset-password-container, .registered-successfully-container {
     width: 100%;
     margin: 0 auto;
@@ -205,8 +172,9 @@
     }
 
     form {
-      margin-left: 10px;
-      margin-right: 10px;
+      margin-left: 0px;
+      padding: 0 20px;
+      width: 100%;
 
       input[type="text"],
       input[type="email"],
@@ -218,11 +186,11 @@
   }
 
   .register-container {
-    margin: 66px auto;
+    margin: 0 auto;
   }
 
   .registered-successfully-container {
-    margin: 66px auto;
+    margin: 0 auto;
     p.message {
       padding: 34px 30px 124px 30px;
     }

assets/css/account/register.scss

@@ -58,17 +58,13 @@
 
   .terms {
     margin-top: 10px;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
 
     p {
       font-size: 12px;
       line-height: 15px;
       color: #A3A3AE;
     }
-
-    p:first-child {
-      margin-bottom: 10px;
-    }
   }
 
   // Social section
@@ -82,7 +78,72 @@
     }
   }
 
+  .section-break {
+    display: none;
+  }
+}
+
+.join-topcoder {
+  display: flex;
+  flex-flow: row wrap;
+  margin-top: 20px;
+  justify-content: center;
+  position: absolute;
+  top: 0px;
+  right: 20px;
+
+  span {
+    display: flex;
+    align-items: center;
+  }
+
+  .redirect {
+    border: 1px solid #D1D3D4;
+    background-color: white;
+    border-radius : 4px;
+    width: 66px;/* TODO as per design it should be 63px*/
+    height: 30px;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include sofia-pro-light;
+    text-transform: uppercase;
+    font-size: 12px;
+    line-height: 14px;
+    padding: 8px 12px;
+
+    a {
+      text-decoration: none;
+    @include sofia-pro-light;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+
+  .register-container {
+
+    form {
+
+      .first-last-names {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+      .section-break {
+        display: block;
+
+        hr {
+          max-width: 180px;
+          margin: 10px auto 20px auto;
+        }
+      }
+    }
+  }
+
   .join-topcoder {
-    margin-bottom: 15px;
+    position: initial;
+    margin-top: 30px;
   }
 }

assets/css/topcoder.scss

@@ -47,7 +47,7 @@ body {
 }
 
 .view-container {
-  padding-bottom: 60px;
+  padding-bottom: 30px;
   min-height: 480px;
   @media screen and (min-device-width: 768px) {
     min-width: 768px;