Compare View
Commits (2)
-
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>
Showing
9 changed files
Show diff stats
src/app/index.scss
src/app/layout/blocks/login-block/login-block.html
| ... | ... | @@ -15,13 +15,13 @@ |
| 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 | 24 | </div> |
| 25 | 25 | <button type="submit" class="btn btn-default" ng-click="ctrl.login()">{{"auth.form.login_button" | translate}}</button> |
| 26 | 26 | </form> |
| 27 | -</div> | |
| 28 | 27 | \ No newline at end of file |
| 28 | +</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,55 @@ |
| 1 | +.modal-content{ | |
| 2 | + padding: 40px; | |
| 3 | +} | |
| 4 | +.modal-header { | |
| 5 | + border-bottom: 0; | |
| 6 | + text-align: center; | |
| 7 | +} | |
| 8 | +form { | |
| 9 | + margin-bottom: 30px; | |
| 10 | +} | |
| 11 | +form button { | |
| 12 | + margin-top: 20px; | |
| 13 | + text-transform: uppercase; | |
| 14 | +} | |
| 15 | +.strike { | |
| 16 | + display: block; | |
| 17 | + text-align: center; | |
| 18 | + overflow: hidden; | |
| 19 | + white-space: nowrap; | |
| 20 | + padding: 25px 0; | |
| 21 | +} | |
| 22 | + | |
| 23 | +.strike > span { | |
| 24 | + position: relative; | |
| 25 | + display: inline-block; | |
| 26 | +} | |
| 27 | + | |
| 28 | +.strike > span:before, | |
| 29 | +.strike > span:after { | |
| 30 | + content: ""; | |
| 31 | + position: absolute; | |
| 32 | + top: 50%; | |
| 33 | + width: 9999px; | |
| 34 | + height: 1px; | |
| 35 | + background: black; | |
| 36 | +} | |
| 37 | + | |
| 38 | +.strike > span:before { | |
| 39 | + right: 100%; | |
| 40 | + margin-right: 15px; | |
| 41 | +} | |
| 42 | + | |
| 43 | +.strike > span:after { | |
| 44 | + left: 100%; | |
| 45 | + margin-left: 15px; | |
| 46 | +} | |
| 47 | +.strike span { | |
| 48 | + text-transform: uppercase; | |
| 49 | +} | |
| 50 | +#oauth-block span { | |
| 51 | + margin: 5px; | |
| 52 | +} | |
| 53 | +#create-account { | |
| 54 | + padding: 30px 0 0; | |
| 55 | +} | ... | ... |
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", | ... | ... |