Commit f75c68d0d61523573ff871a3300568a988bab186
Exists in
master
and in
9 other branches
Merge branch 'login_modal_improve' into 'master'
Login modal and block improvements - Renamed labels and inputs from login form on login block and modal - Added css rules that increased margin and padding on specific elements, horizontal rules with text in the middle and new translations. - Also added checkbox for keep logged in. See merge request !38
Showing
9 changed files
with
131 additions
and
14 deletions
Show diff stats
src/app/index.scss
src/app/layout/blocks/login-block/login-block.html
... | ... | @@ -15,13 +15,21 @@ |
15 | 15 | <div class="logged-user-info" ng-show="!ctrl.currentUser"> |
16 | 16 | <form> |
17 | 17 | <div class="form-group"> |
18 | - <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label> | |
19 | - <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="ctrl.credentials.username"> | |
18 | + <label for="email">{{"auth.form.login" | translate}}</label> | |
19 | + <input type="text" class="form-control" id="email" placeholder="{{'auth.form.login' | translate}}" ng-model="ctrl.credentials.username"> | |
20 | 20 | </div> |
21 | 21 | <div class="form-group"> |
22 | - <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label> | |
23 | - <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="ctrl.credentials.password"> | |
22 | + <label for="passwd">{{"auth.form.password" | translate}}</label> | |
23 | + <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="ctrl.credentials.password"> | |
24 | + </div> | |
25 | + <div class="form-inline"> | |
26 | + <div class="checkbox-nice"> | |
27 | + <input type="checkbox" id="keep-logged"> | |
28 | + <label for="keep-logged"> | |
29 | + {{"auth.form.keepLoggedIn" | translate}} | |
30 | + </label> | |
31 | + </div> | |
24 | 32 | </div> |
25 | 33 | <button type="submit" class="btn btn-default" ng-click="ctrl.login()">{{"auth.form.login_button" | translate}}</button> |
26 | 34 | </form> |
27 | -</div> | |
28 | 35 | \ No newline at end of file |
36 | +</div> | ... | ... |
... | ... | @@ -0,0 +1,36 @@ |
1 | +label { | |
2 | + cursor: pointer; | |
3 | +} | |
4 | + | |
5 | +.checkbox-nice { | |
6 | + position: relative; | |
7 | + padding-left: 15px; | |
8 | + | |
9 | + input[type=checkbox] { | |
10 | + visibility: hidden; | |
11 | + } | |
12 | + label { | |
13 | + padding-top: 3px; | |
14 | + } | |
15 | + &.checkbox-inline > label { | |
16 | + margin-left: 16px; | |
17 | + } | |
18 | + label:before { | |
19 | + @include checkbox-mark(22px, 22px, 1px, 1px, #ffffff, 2px solid $main-bg-color); | |
20 | + @include border-radius(3px); | |
21 | + } | |
22 | + label:after { | |
23 | + @include checkbox-mark(12px, 7px, 7px, 6px, transparent, 3px solid #000); | |
24 | + @include opacity(0); | |
25 | + | |
26 | + border-top: none; | |
27 | + border-right: none; | |
28 | + transform: rotate(-45deg); | |
29 | + } | |
30 | + label:hover::after { | |
31 | + @include opacity(0.3); | |
32 | + } | |
33 | + input[type=checkbox]:checked + label:after { | |
34 | + @include opacity(1); | |
35 | + } | |
36 | +} | ... | ... |
src/app/layout/scss/_mixins.scss
... | ... | @@ -3,3 +3,15 @@ |
3 | 3 | border-radius: $radius; |
4 | 4 | background-clip: padding-box; /* stops bg color from leaking outside the border: */ |
5 | 5 | } |
6 | + | |
7 | +@mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) { | |
8 | + width: $width; | |
9 | + height: $height; | |
10 | + cursor: $cursor; | |
11 | + position: $position; | |
12 | + left: $left; | |
13 | + top: $top; | |
14 | + background: $bg; | |
15 | + content: $content; | |
16 | + border: $border; | |
17 | +} | ... | ... |
src/app/layout/scss/skins/_whbl.scss
... | ... | @@ -306,6 +306,13 @@ $whbl-font-color: #16191c; |
306 | 306 | color: white; |
307 | 307 | } |
308 | 308 | |
309 | + /* Form overrides */ | |
310 | + .checkbox-nice { | |
311 | + label:after { | |
312 | + border-color: $whbl-primary-color; | |
313 | + } | |
314 | + } | |
315 | + | |
309 | 316 | } |
310 | 317 | .rtl.skin-whbl #content-wrapper { |
311 | 318 | border-left: 0; | ... | ... |
src/app/login/login.html
... | ... | @@ -4,13 +4,21 @@ |
4 | 4 | <div class="modal-body"> |
5 | 5 | <form> |
6 | 6 | <div class="form-group"> |
7 | - <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label> | |
8 | - <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="vm.credentials.username"> | |
7 | + <label for="email">{{"auth.form.login" | translate}}</label> | |
8 | + <input type="text" class="form-control" id="email" placeholder="{{'auth.form.login' | translate}}" ng-model="vm.credentials.username"> | |
9 | 9 | </div> |
10 | 10 | <div class="form-group"> |
11 | - <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label> | |
12 | - <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="vm.credentials.password"> | |
11 | + <label for="passwd">{{"auth.form.password" | translate}}</label> | |
12 | + <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="vm.credentials.password"> | |
13 | 13 | </div> |
14 | - <button type="submit" class="btn btn-default" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button> | |
14 | + <div class="form-inline"> | |
15 | + <div class="checkbox-nice"> | |
16 | + <input type="checkbox" id="keep-logged"> | |
17 | + <label for="keep-logged"> | |
18 | + {{"auth.form.keepLoggedIn" | translate}} | |
19 | + </label> | |
20 | + </div> | |
21 | + </div> | |
22 | + <button type="submit" class="btn btn-default btn-block" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button> | |
15 | 23 | </form> |
16 | 24 | </div> | ... | ... |
... | ... | @@ -0,0 +1,43 @@ |
1 | +.modal-content { | |
2 | + padding: 40px; | |
3 | + .modal-header { | |
4 | + border-bottom: 0; | |
5 | + text-align: center; | |
6 | + } | |
7 | + form { | |
8 | + margin-bottom: 30px; | |
9 | + button { | |
10 | + margin-top: 20px; | |
11 | + text-transform: uppercase; | |
12 | + } | |
13 | + } | |
14 | +} | |
15 | + | |
16 | +.strike { | |
17 | + display: block; | |
18 | + text-align: center; | |
19 | + overflow: hidden; | |
20 | + white-space: nowrap; | |
21 | + padding: 25px 0; | |
22 | + > span { | |
23 | + position: relative; | |
24 | + display: inline-block; | |
25 | + text-transform: uppercase; | |
26 | + } | |
27 | + > span:before, > span:after { | |
28 | + content: ""; | |
29 | + position: absolute; | |
30 | + top: 50%; | |
31 | + width: 9999px; | |
32 | + height: 1px; | |
33 | + background: black; | |
34 | + } | |
35 | + > span:before { | |
36 | + right: 100%; | |
37 | + margin-right: 15px; | |
38 | + } | |
39 | + > span:after { | |
40 | + left: 100%; | |
41 | + margin-left: 15px; | |
42 | + } | |
43 | +} | ... | ... |
src/languages/en.json
... | ... | @@ -21,9 +21,10 @@ |
21 | 21 | "activities.create_article.description": "has published on", |
22 | 22 | "activities.add_member_in_community.description": "has joined the community", |
23 | 23 | "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:", |
24 | - "auth.title": "Login", | |
25 | - "auth.form.login": "Login / Email address", | |
24 | + "auth.title": "Great to have you back!", | |
25 | + "auth.form.login": "Username or Email address", | |
26 | 26 | "auth.form.password": "Password", |
27 | + "auth.form.keepLoggedIn": "Keep me logged in", | |
27 | 28 | "auth.form.login_button": "Login", |
28 | 29 | "navbar.content_viewer_actions.new_item": "New Item", |
29 | 30 | "navbar.profile_actions.new_item": "New Item", | ... | ... |
src/languages/pt.json
... | ... | @@ -21,9 +21,10 @@ |
21 | 21 | "activities.create_article.description": "publicou em", |
22 | 22 | "activities.add_member_in_community.description": "entrou na comunidade", |
23 | 23 | "activities.new_friendship.description": "fez {friends, plural, one{um novo amigo} other{# novos amigos}}:", |
24 | - "auth.title": "Login", | |
25 | - "auth.form.login": "Login / Email", | |
24 | + "auth.title": "Legal ter você de volta!", | |
25 | + "auth.form.login": "Nome de usuário ou Email", | |
26 | 26 | "auth.form.password": "Senha", |
27 | + "auth.form.keepLoggedIn": "Continuar logado", | |
27 | 28 | "auth.form.login_button": "Login", |
28 | 29 | "navbar.content_viewer_actions.new_item": "Novo Item", |
29 | 30 | "navbar.profile_actions.new_item": "Novo Item", | ... | ... |