Jihan Kim 2014-05-28
UI: improve login form style
@d4dc336df1c0b46f821289f346406b6abcea6a14
app/assets/stylesheets/less/_page.less
--- app/assets/stylesheets/less/_page.less
+++ app/assets/stylesheets/less/_page.less
@@ -606,8 +606,12 @@
             }
         }
         &.login {
-           padding-top:40px;
-           margin-top:0px;
+            padding-top:80px;
+            margin-top:0px;
+        }
+        &.reset-password {
+            padding-top:80px;
+            margin-top:0px;
         }
         .title {
             font-size: 3.3em;
@@ -1342,32 +1346,34 @@
     width: 400px;
     .center-block;
 
+    .remember-me-wrap {
+        margin-top:0px;
+
+        .checkbox {
+            margin-left:0px !important;
+            margin-top:4px !important;
+        }
+    }
+
     .act-row {
         margin-bottom: 42px;
         line-height:22px;
-        .checkbox { margin-top:4px !important; }
-    }
-    .forgot-password {
-        float:left; margin:0;
+        overflow:auto;
     }
 
     .btns-row {
-        width: 384px;
-        margin-bottom: 73px;
-        .center-block;
+        display:block;
         text-align:center;
-
+        margin:0px auto 20px;
     }
 }
 
 //---- sign up
 .signup-form-wrap {
-    margin-top: 54px;
     width: 400px;
+    margin-top: 54px;
     .center-block;
-    .inline {
-        .inline-block;
-    }
+
     .text {
         &.email{
             width: 181px;
@@ -1377,18 +1383,21 @@
             width: 181px;
         }
     }
+
     .act-row {
-        font-size: 11px;
+        text-align:right;
         color: #999999;
-        margin-bottom: 45px;
+
         .go-login {
             color: #5C5C5C;
+            font-weight:bold;
         }
     }
+
     .btns-row {
-        width: 227px;
-        .center-block;
-        margin-bottom: 50px;
+        display:block;
+        text-align:center;
+        margin:0px auto 20px;
         text-align:center;
 
     }
app/assets/stylesheets/less/_yobiUI.less
--- app/assets/stylesheets/less/_yobiUI.less
+++ app/assets/stylesheets/less/_yobiUI.less
@@ -739,6 +739,11 @@
         font-size: 26px !important;
     }
 
+    &.ybtn-fullsize {
+        display:block;
+        width:100%;
+    }
+
     &.ybtn-padding {
         padding:13px 30px !important;
         font-size: 20px !important;
app/views/user/login.scala.html
--- app/views/user/login.scala.html
+++ app/views/user/login.scala.html
@@ -30,6 +30,7 @@
   </div>
   <div class="login-form-wrap frm-wrap">
     <form action="@routes.UserApp.login()" method="POST">
+      <input type="hidden" name="redirectUrl" value="@redirectUrl" />
       <dl>
         <dt>
           <label for="loginId">@Messages("user.loginId")</label>
@@ -38,7 +39,7 @@
           <input id="loginId" name="loginId" type="text" class="text email" autocomplete="off">
         </dd>
 
-        <dt>
+        <dt class="mt10">
           <label for="password">@Messages("user.password")</label>
         </dt>
         <dd>
@@ -46,19 +47,20 @@
         </dd>
       </dl>
 
-      <div class="act-row right-txt">
-        <input id="remember-me" type="checkbox" name="rememberMe" class="checkbox" autocomplete="off">
-        <label for="remember-me" class="bg-checkbox">@Messages("title.rememberMe")</label>
-
-        <a href="@routes.PasswordResetApp.lostPassword()" class="ybtn ybtn-mini ybtn-danger forgot-password">
-          @Messages("title.forgotpassword")
-        </a>
-      </div>
-
       <div class="btns-row">
-        <button type="submit" class="ybtn">@Messages("button.login")</button>
+        <button type="submit" class="ybtn ybtn-primary ybtn-large ybtn-fullsize">@Messages("button.login")</button>
       </div>
-      <input type="hidden" name="redirectUrl" value="@redirectUrl" />
+
+      <div class="act-row mt5">
+        <div class="remember-me-wrap pull-left">
+          <input id="remember-me" type="checkbox" name="rememberMe" class="checkbox" autocomplete="off">
+          <label for="remember-me" class="bg-checkbox">@Messages("title.rememberMe")</label>
+        </div>
+
+        <div class="links-wrap pull-right">
+          <a href="@routes.PasswordResetApp.lostPassword">@Messages("title.forgotpassword")</a>
+        </div>
+      </div>
     </form>
   </div>
 </div>
conf/messages
--- conf/messages
+++ conf/messages
@@ -698,7 +698,7 @@
 title.projectSetting = Project Settings
 title.projectTransfer = Project Transfer
 title.recently.visited =  Recently visited
-title.rememberMe = Remember Me
+title.rememberMe = Stay logged in
 title.resetPassword = Reset Password
 title.resetPasswordFor = Reset Password for <span class="highlight">{0}</span>
 title.search = Search
Add a comment
List