Skip to content

Commit

Permalink
fix Login/Signup screens not responsive #355
Browse files Browse the repository at this point in the history
  • Loading branch information
@panic-coder @kamal0808
panic-coder authored and kamal0808 committed Jan 16, 2020
1 parent c1127b4 commit 9403428
Show file tree
Hide file tree
Showing 5 changed files with 93 additions and 7 deletions.
80 changes: 76 additions & 4 deletions admin/src/app/login/login.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,24 @@
<div class="app flex-row">
<div class="row col-md-8 w-100" style="background-color:white">
<div *ngIf="innerWidth > 769" class="app flex-row">
<div class="row col-md-7 col-sm-6 col-lg-8 col-xl-8 w-100" style="background-color:white">
<div class="container h-100 w-100">
<div class="row-3 h-25 w-100 image-header">
{{headerParaData}}
</div>
<div class="image-space-div">

</div>
<div class="row-6 h-50 w-100 mb-4 justify-content-center align-items-center">
<div *ngIf="innerWidth < 768" class="row-6 h-50 w-100 mb-4 justify-content-center align-items-center">
<img class="mb-4 login-banner justify-content-center align-items-center" src="assets/img/img_login_banner_2.png" alt="">
</div>
<div *ngIf="innerWidth == 768" class="row-6 h-50 w-100 mb-4 justify-content-center align-items-center">
<img class="mb-4 login-banner justify-content-center align-items-center" src="assets/img/img_login_banner_2.png" alt="">
</div>
<div *ngIf="innerWidth > 768" class="row-6 h-50 w-100 mb-4 justify-content-center align-items-center">
<img class="mb-4 login-banner justify-content-center align-items-center" src="assets/img/img_login_banner.png" alt="">
</div>
</div>
</div>
<div class="row w-100 col-md-4 justify-content-center align-items-center row-two">
<div class="row w-100 col-md-5 col-sm-6 col-lg-4 col-xl-4 justify-content-center align-items-center row-two">
<div class="justify-content-center w-100">
<div class="d-flex justify-content-center">
<div class="logo-avatar">
Expand Down Expand Up @@ -73,3 +79,69 @@ <h2>Login</h2>
</div>
</div>
</div>

<div class="row justify-content-center align-items-center row-two">
<div *ngIf="innerWidth < 769" class="app flex-row">
<div class="justify-content-center w-100">
<div style="height:30%">

</div>
<div class="d-flex justify-content-center">
<div class="logo-avatar">
<img class="logo-image" src="assets/img/favicon.png" alt="">
</div>
<div class="header-space-div"></div>
<div>
<h1 align="center" style="color: #FFFFFF;">
StockUp
</h1>
</div>
</div>
<div class="header-card-space-div">

</div>
<div class="card-group">
<div class="card mb-2">
<div class="card-body">
<ngx-loading [show]="loading"></ngx-loading>
<h2>Login</h2>
<p class="text-muted">Sign In to your account</p>
<form [formGroup]="angForm">
<div class="input-group error-input mb-2">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-user"></i></span>
</div>
<input type="text" #username class="form-control" formControlName="name" placeholder="Username" required>
</div>
<div class="input-group mb-2">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-lock"></i></span>
</div>
<input type="password" #password class="form-control" placeholder="Password" (keyup)="onKey($event,username.value, password.value)" required>
</div>
</form>
<div class="row">
<div class="col-6 login-button">
<button type="button" (click)="fetchInput(username.value, password.value)"
class="btn btn-primary px-4">Login
</button>
</div>
</div>
<div class="row">
<div class="text-left col-sm-6 text-left-custom">
<a class="new-account" routerLink="/signup" routerLinkActive="active" (click)="loading=true">
New user? Create Account
</a>
</div>
<div class="text-right col-sm-6 text-right-custom">
<a class="new-account" routerLink="/forgot-password" routerLinkActive="active" (click)="loading=true">
Forgot Password
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
3 changes: 3 additions & 0 deletions admin/src/app/login/login.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export class LoginComponent implements OnInit {
public brandonName = 'Brandon Lehman,'
public brandonDesignation = 'IT & OPS HEAD'
angForm: FormGroup;
public innerWidth;

constructor(private userModelApi: UserModelApi, private _router: Router, private _route: ActivatedRoute, private fb: FormBuilder, private toastr: ToastrService) {
LoopBackConfig.setBaseURL(environment.BASE_URL);
Expand Down Expand Up @@ -86,6 +87,8 @@ export class LoginComponent implements OnInit {

ngOnInit() {
this.getRouteData()
this.innerWidth = window.innerWidth;
// console.log(this.innerWidth);
}

getRouteData() {
Expand Down
15 changes: 12 additions & 3 deletions admin/src/app/signup/signup.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
<div class="app flex-row">
<div class="row col-md-8 w-100" style="background-color:white">
<div class="row col-md-6 col-sm-6 col-lg-8 col-xl-8 w-100" style="background-color:white">
<div class="container h-100 w-100">
<div class="row-3 h-25 w-100 image-header">
{{headerParaData}}
</div>
<div class="image-space-div">

</div>
<div class="row-6 h-50 w-100 mb-4 justify-content-center align-items-center">
<!-- <div class="row-6 h-50 w-100 mb-4 justify-content-center align-items-center">
<img class="mb-4 login-banner justify-content-center align-items-center" src="assets/img/img_login_banner.png" alt="">
</div> -->
<div *ngIf="innerWidth < 768" class="row-6 h-50 w-100 mb-4 justify-content-center align-items-center">
<img class="mb-4 login-banner justify-content-center align-items-center" src="assets/img/img_login_banner_2.png" alt="">
</div>
<div *ngIf="innerWidth == 768" class="row-6 h-50 w-100 mb-4 justify-content-center align-items-center">
<img class="mb-4 login-banner justify-content-center align-items-center" src="assets/img/img_login_banner_2.png" alt="">
</div>
<div *ngIf="innerWidth > 768" class="row-6 h-50 w-100 mb-4 justify-content-center align-items-center">
<img class="mb-4 login-banner justify-content-center align-items-center" src="assets/img/img_login_banner.png" alt="">
</div>
</div>
</div>
<div class="row w-100 col-md-4 justify-content-center align-items-center row-two">
<div class="row w-100 col-md-6 col-sm-6 col-lg-4 col-xl-4 justify-content-center align-items-center row-two">
<div class="justify-content-center w-100">
<div class="d-flex justify-content-center">
<div class="logo-avatar">
Expand Down
2 changes: 2 additions & 0 deletions admin/src/app/signup/signup.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export class SignupComponent implements OnInit {
confirmPassword = '';
orgName = ''
public headerParaData = "The industry’s first and only open source app for automating stock replenishment."
public innerWidth;

constructor(private userModelApi: UserModelApi, private _router: Router, private _route: ActivatedRoute, private toastr: ToastrService) {
LoopBackConfig.setBaseURL(environment.BASE_URL);
Expand All @@ -29,6 +30,7 @@ export class SignupComponent implements OnInit {

ngOnInit() {
this.getRouteData();
this.innerWidth = window.innerWidth;
}

getRouteData() {
Expand Down
Binary file added admin/src/assets/img/img_login_banner_2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9403428

Please sign in to comment.