
UI: improve login form style
@d4dc336df1c0b46f821289f346406b6abcea6a14
--- app/assets/stylesheets/less/_page.less
+++ app/assets/stylesheets/less/_page.less
... | ... | @@ -606,8 +606,12 @@ |
606 | 606 |
} |
607 | 607 |
} |
608 | 608 |
&.login { |
609 |
- padding-top:40px; |
|
610 |
- margin-top:0px; |
|
609 |
+ padding-top:80px; |
|
610 |
+ margin-top:0px; |
|
611 |
+ } |
|
612 |
+ &.reset-password { |
|
613 |
+ padding-top:80px; |
|
614 |
+ margin-top:0px; |
|
611 | 615 |
} |
612 | 616 |
.title { |
613 | 617 |
font-size: 3.3em; |
... | ... | @@ -1342,32 +1346,34 @@ |
1342 | 1346 |
width: 400px; |
1343 | 1347 |
.center-block; |
1344 | 1348 |
|
1349 |
+ .remember-me-wrap { |
|
1350 |
+ margin-top:0px; |
|
1351 |
+ |
|
1352 |
+ .checkbox { |
|
1353 |
+ margin-left:0px !important; |
|
1354 |
+ margin-top:4px !important; |
|
1355 |
+ } |
|
1356 |
+ } |
|
1357 |
+ |
|
1345 | 1358 |
.act-row { |
1346 | 1359 |
margin-bottom: 42px; |
1347 | 1360 |
line-height:22px; |
1348 |
- .checkbox { margin-top:4px !important; } |
|
1349 |
- } |
|
1350 |
- .forgot-password { |
|
1351 |
- float:left; margin:0; |
|
1361 |
+ overflow:auto; |
|
1352 | 1362 |
} |
1353 | 1363 |
|
1354 | 1364 |
.btns-row { |
1355 |
- width: 384px; |
|
1356 |
- margin-bottom: 73px; |
|
1357 |
- .center-block; |
|
1365 |
+ display:block; |
|
1358 | 1366 |
text-align:center; |
1359 |
- |
|
1367 |
+ margin:0px auto 20px; |
|
1360 | 1368 |
} |
1361 | 1369 |
} |
1362 | 1370 |
|
1363 | 1371 |
//---- sign up |
1364 | 1372 |
.signup-form-wrap { |
1365 |
- margin-top: 54px; |
|
1366 | 1373 |
width: 400px; |
1374 |
+ margin-top: 54px; |
|
1367 | 1375 |
.center-block; |
1368 |
- .inline { |
|
1369 |
- .inline-block; |
|
1370 |
- } |
|
1376 |
+ |
|
1371 | 1377 |
.text { |
1372 | 1378 |
&.email{ |
1373 | 1379 |
width: 181px; |
... | ... | @@ -1377,18 +1383,21 @@ |
1377 | 1383 |
width: 181px; |
1378 | 1384 |
} |
1379 | 1385 |
} |
1386 |
+ |
|
1380 | 1387 |
.act-row { |
1381 |
- font-size: 11px; |
|
1388 |
+ text-align:right; |
|
1382 | 1389 |
color: #999999; |
1383 |
- margin-bottom: 45px; |
|
1390 |
+ |
|
1384 | 1391 |
.go-login { |
1385 | 1392 |
color: #5C5C5C; |
1393 |
+ font-weight:bold; |
|
1386 | 1394 |
} |
1387 | 1395 |
} |
1396 |
+ |
|
1388 | 1397 |
.btns-row { |
1389 |
- width: 227px; |
|
1390 |
- .center-block; |
|
1391 |
- margin-bottom: 50px; |
|
1398 |
+ display:block; |
|
1399 |
+ text-align:center; |
|
1400 |
+ margin:0px auto 20px; |
|
1392 | 1401 |
text-align:center; |
1393 | 1402 |
|
1394 | 1403 |
} |
--- app/assets/stylesheets/less/_yobiUI.less
+++ app/assets/stylesheets/less/_yobiUI.less
... | ... | @@ -739,6 +739,11 @@ |
739 | 739 |
font-size: 26px !important; |
740 | 740 |
} |
741 | 741 |
|
742 |
+ &.ybtn-fullsize { |
|
743 |
+ display:block; |
|
744 |
+ width:100%; |
|
745 |
+ } |
|
746 |
+ |
|
742 | 747 |
&.ybtn-padding { |
743 | 748 |
padding:13px 30px !important; |
744 | 749 |
font-size: 20px !important; |
--- app/views/user/login.scala.html
+++ app/views/user/login.scala.html
... | ... | @@ -30,6 +30,7 @@ |
30 | 30 |
</div> |
31 | 31 |
<div class="login-form-wrap frm-wrap"> |
32 | 32 |
<form action="@routes.UserApp.login()" method="POST"> |
33 |
+ <input type="hidden" name="redirectUrl" value="@redirectUrl" /> |
|
33 | 34 |
<dl> |
34 | 35 |
<dt> |
35 | 36 |
<label for="loginId">@Messages("user.loginId")</label> |
... | ... | @@ -38,7 +39,7 @@ |
38 | 39 |
<input id="loginId" name="loginId" type="text" class="text email" autocomplete="off"> |
39 | 40 |
</dd> |
40 | 41 |
|
41 |
- <dt> |
|
42 |
+ <dt class="mt10"> |
|
42 | 43 |
<label for="password">@Messages("user.password")</label> |
43 | 44 |
</dt> |
44 | 45 |
<dd> |
... | ... | @@ -46,19 +47,20 @@ |
46 | 47 |
</dd> |
47 | 48 |
</dl> |
48 | 49 |
|
49 |
- <div class="act-row right-txt"> |
|
50 |
- <input id="remember-me" type="checkbox" name="rememberMe" class="checkbox" autocomplete="off"> |
|
51 |
- <label for="remember-me" class="bg-checkbox">@Messages("title.rememberMe")</label> |
|
52 |
- |
|
53 |
- <a href="@routes.PasswordResetApp.lostPassword()" class="ybtn ybtn-mini ybtn-danger forgot-password"> |
|
54 |
- @Messages("title.forgotpassword") |
|
55 |
- </a> |
|
56 |
- </div> |
|
57 |
- |
|
58 | 50 |
<div class="btns-row"> |
59 |
- <button type="submit" class="ybtn">@Messages("button.login")</button> |
|
51 |
+ <button type="submit" class="ybtn ybtn-primary ybtn-large ybtn-fullsize">@Messages("button.login")</button> |
|
60 | 52 |
</div> |
61 |
- <input type="hidden" name="redirectUrl" value="@redirectUrl" /> |
|
53 |
+ |
|
54 |
+ <div class="act-row mt5"> |
|
55 |
+ <div class="remember-me-wrap pull-left"> |
|
56 |
+ <input id="remember-me" type="checkbox" name="rememberMe" class="checkbox" autocomplete="off"> |
|
57 |
+ <label for="remember-me" class="bg-checkbox">@Messages("title.rememberMe")</label> |
|
58 |
+ </div> |
|
59 |
+ |
|
60 |
+ <div class="links-wrap pull-right"> |
|
61 |
+ <a href="@routes.PasswordResetApp.lostPassword">@Messages("title.forgotpassword")</a> |
|
62 |
+ </div> |
|
63 |
+ </div> |
|
62 | 64 |
</form> |
63 | 65 |
</div> |
64 | 66 |
</div> |
--- conf/messages
+++ conf/messages
... | ... | @@ -698,7 +698,7 @@ |
698 | 698 |
title.projectSetting = Project Settings |
699 | 699 |
title.projectTransfer = Project Transfer |
700 | 700 |
title.recently.visited = Recently visited |
701 |
-title.rememberMe = Remember Me |
|
701 |
+title.rememberMe = Stay logged in |
|
702 | 702 |
title.resetPassword = Reset Password |
703 | 703 |
title.resetPasswordFor = Reset Password for <span class="highlight">{0}</span> |
704 | 704 |
title.search = Search |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?