Merge Request #38
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.
-
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. Signed-off-by: Carlos Coêlho <carlospecter@gmail.com> Signed-off-by: Sabryna Sousa <sabryna.sousa1323@gmail.com>
@@ -82,3 +82,4 @@ h1, h2, h3, h4, h5 { | @@ -82,3 +82,4 @@ h1, h2, h3, h4, h5 { | ||
82 | @import "layout/scss/layout"; | 82 | @import "layout/scss/layout"; |
83 | @import "layout/scss/sidebar"; | 83 | @import "layout/scss/sidebar"; |
84 | @import "layout/scss/tables"; | 84 | @import "layout/scss/tables"; |
85 | +@import "layout/scss/forms"; |
@@ -15,13 +15,21 @@ | @@ -15,13 +15,21 @@ | ||
15 | <div class="logged-user-info" ng-show="!ctrl.currentUser"> | 15 | <div class="logged-user-info" ng-show="!ctrl.currentUser"> |
16 | <form> | 16 | <form> |
17 | <div class="form-group"> | 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> |
1 |
|
||
19 | + <input type="text" class="form-control" id="email" placeholder="{{'auth.form.login' | translate}}" ng-model="ctrl.credentials.username"> | ||
20 | </div> | 20 | </div> |
21 | <div class="form-group"> | 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 | </div> | 32 | </div> |
25 | <button type="submit" class="btn btn-default" ng-click="ctrl.login()">{{"auth.form.login_button" | translate}}</button> | 33 | <button type="submit" class="btn btn-default" ng-click="ctrl.login()">{{"auth.form.login_button" | translate}}</button> |
26 | </form> | 34 | </form> |
27 | -</div> | ||
28 | \ No newline at end of file | 35 | \ No newline at end of file |
36 | +</div> |
@@ -0,0 +1,36 @@ | @@ -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 | +} |
@@ -3,3 +3,15 @@ | @@ -3,3 +3,15 @@ | ||
3 | border-radius: $radius; | 3 | border-radius: $radius; |
4 | background-clip: padding-box; /* stops bg color from leaking outside the border: */ | 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 | +} |
@@ -306,6 +306,13 @@ $whbl-font-color: #16191c; | @@ -306,6 +306,13 @@ $whbl-font-color: #16191c; | ||
306 | color: white; | 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 | .rtl.skin-whbl #content-wrapper { | 317 | .rtl.skin-whbl #content-wrapper { |
311 | border-left: 0; | 318 | border-left: 0; |
@@ -4,13 +4,21 @@ | @@ -4,13 +4,21 @@ | ||
4 | <div class="modal-body"> | 4 | <div class="modal-body"> |
5 | <form> | 5 | <form> |
6 | <div class="form-group"> | 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 | </div> | 9 | </div> |
10 | <div class="form-group"> | 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 | </div> | 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"> | ||
1 |
|
||
16 | + <input type="checkbox" id="keep-logged"> | ||
17 | + <label for="keep-logged"> | ||
2 |
|
||
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 | </form> | 23 | </form> |
16 | </div> | 24 | </div> |
@@ -0,0 +1,43 @@ | @@ -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; | ||
1 |
|
||
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; | ||
1 |
|
||
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 | + } | ||
1 |
|
||
39 | + > span:after { | ||
40 | + left: 100%; | ||
1 |
|
||
41 | + margin-left: 15px; | ||
42 | + } | ||
43 | +} |
@@ -21,9 +21,10 @@ | @@ -21,9 +21,10 @@ | ||
21 | "activities.create_article.description": "has published on", | 21 | "activities.create_article.description": "has published on", |
22 | "activities.add_member_in_community.description": "has joined the community", | 22 | "activities.add_member_in_community.description": "has joined the community", |
23 | "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:", | 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 | "auth.form.password": "Password", | 26 | "auth.form.password": "Password", |
27 | + "auth.form.keepLoggedIn": "Keep me logged in", | ||
27 | "auth.form.login_button": "Login", | 28 | "auth.form.login_button": "Login", |
28 | "navbar.content_viewer_actions.new_item": "New Item", | 29 | "navbar.content_viewer_actions.new_item": "New Item", |
29 | "navbar.profile_actions.new_item": "New Item", | 30 | "navbar.profile_actions.new_item": "New Item", |
@@ -21,9 +21,10 @@ | @@ -21,9 +21,10 @@ | ||
21 | "activities.create_article.description": "publicou em", | 21 | "activities.create_article.description": "publicou em", |
22 | "activities.add_member_in_community.description": "entrou na comunidade", | 22 | "activities.add_member_in_community.description": "entrou na comunidade", |
23 | "activities.new_friendship.description": "fez {friends, plural, one{um novo amigo} other{# novos amigos}}:", | 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 | "auth.form.password": "Senha", | 26 | "auth.form.password": "Senha", |
27 | + "auth.form.keepLoggedIn": "Continuar logado", | ||
27 | "auth.form.login_button": "Login", | 28 | "auth.form.login_button": "Login", |
28 | "navbar.content_viewer_actions.new_item": "Novo Item", | 29 | "navbar.content_viewer_actions.new_item": "Novo Item", |
29 | "navbar.profile_actions.new_item": "Novo Item", | 30 | "navbar.profile_actions.new_item": "Novo Item", |
-
Looks good! Unfortunately, I don't have enough permissions to merge it.
-
Reassigned to @mfdeveloper
-
Why did you repeat the same value to label tag and placeholder attribute of the input?
-
Visual suggestion:
More clean login, without
<label>
tags, inputs with icons aligned to left and blue highlited border, like this screen below: -
When the user access the app by first time, he will see "back"? Maybe this text will confuse him. What do you think about this?
-
@mfdeveloper I'll see the visual suggestions, edit the scss files and ping you when I update the MR.
-
Added 34 new commits:
- da20ce18 - fixed search tests
- 69ff070c - Component to search for articles in the environment
- 5bc45a30 - fixed pt translation
- 575daccf - changed search.component and the search-form.component to fill the query field w…
- d0fa7823 - Merge branch 'search' into 'master'
- 7057a9e1 - initial commit for the design mode feature
- 46f6b264 - Merge branch 'master' into design-mode
- bbeb5848 - changing designModeToggler to use toggle-switch angular directive
- b9f6daf6 - better css definition to the design toggler. increased the test coverage to the …
- 139f17f3 - added a toolbar under the navbar to add layout change buttons
- a8b16135 - Fix application startup process
- f4964918 - merge with master. fixed toolbar background-color. small fixes on BootstrapSwitcherItem
- 9d2ce382 - Merge branch 'design-mode' into 'master'
- 3963f52f - Rename BlockComponent to BlockContentComponent
- 167edf00 - Add components to edit block settings
- 62f85230 - Move logic that show/hide blocks to block component
- 6e7c76e6 - Get available languages from translator service in block edition
- 0e0b4a70 - Fix style of edition buttons for blocks
- 0c28a983 - Merge branch 'edit-blocks'
- b7f58749 - Merge branch 'master' of softwarepublico.gov.br:noosfero-themes/angular-theme
- 18b99fd3 - Enable block edition when toggle design mode
- 2ea040a4 - Enable header and footer edition when toggle design mode
- 906a13d3 - Small fix in block style
- dc8c43fd - adding KNOWN ISSUES section to README.md
- 6a66f44b - Merge branch 'master' of softwarepublico.gov.br:noosfero-themes/angular-theme
- d00c6e8c - Added export comments button on comment paragraph plugin
- ba519042 - Display button to export comments only to users with permission to edit article
- 36e4d9d9 - Merge branch 'export-comments' into 'master'
- f276722d - New npm config 'skin' to allow sass by theme skins
- 04a99db3 - Merge branch 'theme-skin-yellow'
- 12da3fdc - fix invisible block title
- 2c6cca64 - Merge branch 'fix-invisible-block-title'
- 49a048fb - Improvements to login modal
- e3d50634 - New 'checkbox-nice' form UI
-
Added 8 new commits:
- 2841288e - Ticket #85: Fields of Interest block
- fa8a58b8 - Fix design mode for blocks
- 2484eb92 - Merge branch 'master' of softwarepublico.gov.br:noosfero-themes/angular-theme
- 6c67e997 - Fix responsive style of boxes
- ae05af8e - Fixing conflict
- 34620a12 - Improvements to login modal
- e8a886be - New 'checkbox-nice' form UI
- 738b0244 - Add "Keep logged in" on login block
-
mentioned in commit f75c68d0d61523573ff871a3300568a988bab186
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> | |
1 |
|
20 | 20 | "activities.create_article.description": "has published on", |
21 | 21 | "activities.add_member_in_community.description": "has joined the community", |
22 | 22 | "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:", |
23 | - "auth.title": "Login", | |
24 | - "auth.form.login": "Login / Email address", | |
23 | + "auth.title": "Great to have you back!", | |
1 |
|