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

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
Caio Almeida
2 parents 17e9be08 738b0244
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
src/app/layout/scss/_forms.scss
src/app/layout/scss/_mixins.scss
src/app/layout/scss/skins/_whbl.scss
src/app/login/login.html
src/app/login/login.scss
src/languages/en.json
src/languages/pt.json
@@ -82,3 +82,4 @@ h1, h2, h3, h4, h5 {
 @import "layout/scss/layout";
 @import "layout/scss/sidebar";
 @import "layout/scss/tables";
+@import "layout/scss/forms";
@@ -15,13 +15,21 @@
 <div class="logged-user-info" ng-show="!ctrl.currentUser">
   <form>
     <div class="form-group">
-      <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
-      <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="ctrl.credentials.username">
+      <label for="email">{{"auth.form.login" | translate}}</label>
+      <input type="text" class="form-control" id="email" placeholder="{{'auth.form.login' | translate}}" ng-model="ctrl.credentials.username">
     </div>
     <div class="form-group">
-      <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label>
-      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="ctrl.credentials.password">
+      <label for="passwd">{{"auth.form.password" | translate}}</label>
+      <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="ctrl.credentials.password">
+    </div>
+    <div class="form-inline">
+      <div class="checkbox-nice">
+        <input type="checkbox" id="keep-logged">
+        <label for="keep-logged">
+          {{"auth.form.keepLoggedIn" | translate}}
+        </label>
+      </div>
     </div>
     <button type="submit" class="btn btn-default" ng-click="ctrl.login()">{{"auth.form.login_button" | translate}}</button>
   </form>
-</div>
 \ No newline at end of file
+</div>
@@ -0,0 +1,36 @@
+label {
+  cursor: pointer;
+}
+
+.checkbox-nice {
+	position: relative;
+	padding-left: 15px;
+
+	input[type=checkbox] {
+		visibility: hidden;
+	}
+	label {
+		padding-top: 3px;
+	}
+	&.checkbox-inline > label {
+		margin-left: 16px;
+	}
+	label:before {
+    @include checkbox-mark(22px, 22px, 1px, 1px, #ffffff, 2px solid $main-bg-color);
+		@include border-radius(3px);
+	}
+	label:after {
+    @include checkbox-mark(12px, 7px, 7px, 6px, transparent, 3px solid #000);
+		@include opacity(0);
+
+		border-top: none;
+		border-right: none;
+		transform: rotate(-45deg);
+	}
+	label:hover::after {
+		@include opacity(0.3);
+	}
+	input[type=checkbox]:checked + label:after {
+		@include opacity(1);
+	}
+}
@@ -3,3 +3,15 @@
 	border-radius: $radius;
 	background-clip: padding-box; /* stops bg color from leaking outside the border: */
 }
+
+@mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) {
+	width: $width;
+	height: $height;
+	cursor: $cursor;
+	position: $position;
+	left: $left;
+	top: $top;
+	background: $bg;
+	content: $content;
+	border: $border;
+}
@@ -306,6 +306,13 @@ $whbl-font-color: #16191c;
 		color: white;
 	}
+	/* Form overrides */
+	.checkbox-nice {
+		label:after {
+			border-color: $whbl-primary-color;
+		}
+	}
+
 }
 .rtl.skin-whbl #content-wrapper {
 	border-left: 0;
@@ -4,13 +4,21 @@
 <div class="modal-body">
   <form>
     <div class="form-group">
-      <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
-      <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="vm.credentials.username">
+      <label for="email">{{"auth.form.login" | translate}}</label>
+      <input type="text" class="form-control" id="email" placeholder="{{'auth.form.login' | translate}}" ng-model="vm.credentials.username">
     </div>
     <div class="form-group">
-      <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label>
-      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="vm.credentials.password">
+      <label for="passwd">{{"auth.form.password" | translate}}</label>
+      <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="vm.credentials.password">
     </div>
-    <button type="submit" class="btn btn-default" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button>
+    <div class="form-inline">
+      <div class="checkbox-nice">
+        <input type="checkbox" id="keep-logged">
+        <label for="keep-logged">
+          {{"auth.form.keepLoggedIn" | translate}}
+        </label>
+      </div>
+    </div>
+    <button type="submit" class="btn btn-default btn-block" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button>
   </form>
 </div>
@@ -0,0 +1,43 @@
+.modal-content {
+  padding: 40px;
+  .modal-header {
+    border-bottom: 0;
+    text-align: center;
+  }
+  form {
+    margin-bottom: 30px;
+    button {
+      margin-top: 20px;
+      text-transform: uppercase;
+    }
+  }
+}
+
+.strike {
+  display: block;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 25px 0;
+  > span {
+    position: relative;
+    display: inline-block;
+    text-transform: uppercase;
+  }
+  > span:before, > span:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    width: 9999px;
+    height: 1px;
+    background: black;
+  }
+  > span:before {
+    right: 100%;
+    margin-right: 15px;
+  }
+  > span:after {
+    left: 100%;
+    margin-left: 15px;
+  }
+}
@@ -21,9 +21,10 @@
   "activities.create_article.description": "has published on",
   "activities.add_member_in_community.description": "has joined the community",
   "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:",
-  "auth.title": "Login",
-  "auth.form.login": "Login / Email address",
+  "auth.title": "Great to have you back!",
+  "auth.form.login": "Username or Email address",
   "auth.form.password": "Password",
+  "auth.form.keepLoggedIn": "Keep me logged in",
   "auth.form.login_button": "Login",
   "navbar.content_viewer_actions.new_item": "New Item",
   "navbar.profile_actions.new_item": "New Item",
@@ -21,9 +21,10 @@
   "activities.create_article.description": "publicou em",
   "activities.add_member_in_community.description": "entrou na comunidade",
   "activities.new_friendship.description": "fez {friends, plural, one{um novo amigo} other{# novos amigos}}:",
-  "auth.title": "Login",
-  "auth.form.login": "Login / Email",
+  "auth.title": "Legal ter você de volta!",
+  "auth.form.login": "Nome de usuário ou Email",
   "auth.form.password": "Senha",
+  "auth.form.keepLoggedIn": "Continuar logado",
   "auth.form.login_button": "Login",
   "navbar.content_viewer_actions.new_item": "Novo Item",
   "navbar.profile_actions.new_item": "Novo Item",
	@@ -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";
@@ -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;
@@ -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;
	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	+}