Skip to content

Commit c993029

Browse files
ismaelramosmetaismaelramosmeta
committed
feat(app): fix responsive issues
1 parent da65c8e commit c993029

11 files changed

Lines changed: 240 additions & 138 deletions

File tree

‎src/app/modules/auth/pages/log-in-page/log-in-page.component.html‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,48 @@
1-
<mat-grid-list cols="1" rows="1" rowHeight="2:1">
2-
<mat-grid-tile>
3-
<mat-card class="login--form__box--blue">
4-
<div class="login--form-container">
5-
<p class="login--form__header-title">Try to log in!</p>
6-
<form class="example-container" [formGroup]="logInForm" #loginForm="ngForm">
7-
<p>
8-
<mat-form-field appearance="outline">
9-
<mat-label>Enter your email</mat-label>
10-
<input matInput placeholder="pat@example.com" [formControl]="email" required />
11-
<mat-error *ngIf="email.invalid">{{ getErrorMessage('email') }}</mat-error>
12-
</mat-form-field>
13-
</p>
14-
<p>
15-
<mat-form-field appearance="outline">
16-
<mat-label>Enter a password</mat-label>
17-
<input matInput [formControl]="password" [type]="hide ? 'password' : 'text'" />
18-
<button
19-
mat-icon-button
20-
matSuffix
21-
(click)="hide = !hide"
22-
[attr.aria-label]="'Hide password'"
23-
[attr.aria-pressed]="hide"
24-
>
25-
<mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
26-
</button>
27-
<mat-hint
28-
>Must be minimum eight characters, at least one uppercase letter, one lowercase
29-
letter and one number</mat-hint
30-
>
31-
<mat-error *ngIf="password.invalid">{{ getErrorMessage('password') }}</mat-error>
32-
</mat-form-field>
33-
</p>
34-
<p>
1+
<div class="container">
2+
<mat-card class="login--form__box--blue">
3+
<div class="login--form-container">
4+
<p class="login--form__header-title">Try to log in!</p>
5+
<form class="example-container" [formGroup]="logInForm" #loginForm="ngForm">
6+
<p>
7+
<mat-form-field appearance="outline">
8+
<mat-label>Enter your email</mat-label>
9+
<input matInput placeholder="pat@example.com" [formControl]="email" required />
10+
<mat-error *ngIf="email.invalid">{{ getErrorMessage('email') }}</mat-error>
11+
</mat-form-field>
12+
</p>
13+
<p>
14+
<mat-form-field appearance="outline">
15+
<mat-label>Enter a password</mat-label>
16+
<input
17+
matInput
18+
[formControl]="password"
19+
(keyup.enter)="sendForm(); $event.preventDefault()"
20+
[type]="hide ? 'password' : 'text'"
21+
/>
3522
<button
36-
class="login--form__submit-button"
37-
mat-raised-button
38-
color="primary"
39-
(click)="sendForm()"
23+
mat-icon-button
24+
matSuffix
25+
[attr.aria-label]="'Hide password'"
26+
[attr.aria-pressed]="hide"
27+
></button>
28+
<mat-hint
29+
>Must be minimum eight characters, at least one uppercase letter, one lowercase letter
30+
and one number</mat-hint
4031
>
41-
{{ 'Log In' | uppercase }}
42-
</button>
43-
</p>
44-
</form>
45-
</div>
46-
</mat-card>
47-
</mat-grid-tile>
48-
</mat-grid-list>
32+
<mat-error *ngIf="password.invalid">{{ getErrorMessage('password') }}</mat-error>
33+
</mat-form-field>
34+
</p>
35+
<p>
36+
<button
37+
class="login--form__submit-button"
38+
mat-raised-button
39+
color="primary"
40+
(click)="sendForm()"
41+
>
42+
{{ 'Log In' | uppercase }}
43+
</button>
44+
</p>
45+
</form>
46+
</div>
47+
</mat-card>
48+
</div>

‎src/app/modules/auth/pages/log-in-page/log-in-page.component.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
@import '../../../../styles/mixins';
22

3+
.container {
4+
width: 45%;
5+
@include push--auto();
6+
margin-top: 2rem;
7+
}
8+
39
.login--form-container {
410
text-align: center;
511

@@ -37,3 +43,15 @@
3743
.login--form__submit-button {
3844
margin-top: 40px;
3945
}
46+
47+
@media (max-width: 680px) {
48+
.container {
49+
width: 90%;
50+
@include push--auto();
51+
margin-top: 1rem;
52+
}
53+
54+
.login--form__box--blue {
55+
padding: 1rem;
56+
}
57+
}

‎src/app/modules/auth/pages/sign-up-page/sign-up-page.component.html‎

Lines changed: 59 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,62 @@
1-
<mat-grid-list cols="1" rows="1" rowHeight="2:1">
2-
<mat-grid-tile>
3-
<mat-card class="signup--form__box--blue">
4-
<div class="signup--form-container">
5-
<p class="signup--form__header-title">Give it a try!</p>
6-
<form class="example-container" [formGroup]="signUpForm">
7-
<p>
8-
<mat-form-field appearance="outline">
9-
<mat-label>First name</mat-label>
10-
<input [formControl]="firstName" matInput placeholder="Jason" />
11-
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
12-
<mat-error *ngIf="email.invalid">{{ getErrorMessage('firstName') }}</mat-error>
13-
</mat-form-field>
14-
</p>
15-
<p>
16-
<mat-form-field appearance="outline">
17-
<mat-label>Last name</mat-label>
18-
<input [formControl]="lastName" matInput placeholder="Bourne" />
19-
<mat-icon matSuffix>favorite</mat-icon>
20-
<mat-error *ngIf="email.invalid">{{ getErrorMessage('lastName') }}</mat-error>
21-
</mat-form-field>
22-
</p>
23-
<p>
24-
<mat-form-field appearance="outline">
25-
<mat-label>Enter your email</mat-label>
26-
<input matInput placeholder="pat@example.com" [formControl]="email" required />
27-
<mat-error *ngIf="email.invalid">{{ getErrorMessage('email') }}</mat-error>
28-
</mat-form-field>
29-
</p>
30-
<p>
31-
<mat-form-field appearance="outline">
32-
<mat-label>Enter a password</mat-label>
33-
<input matInput [formControl]="password" [type]="hide ? 'password' : 'text'" />
34-
<button
35-
mat-icon-button
36-
matSuffix
37-
(click)="hide = !hide"
38-
[attr.aria-label]="'Hide password'"
39-
[attr.aria-pressed]="hide"
40-
>
41-
<mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
42-
</button>
43-
<mat-hint
44-
>Must be minimum eight characters, at least one uppercase letter, one lowercase
45-
letter and one number</mat-hint
46-
>
47-
<mat-error *ngIf="password.invalid">{{ getErrorMessage('password') }}</mat-error>
48-
</mat-form-field>
49-
</p>
50-
<p>
1+
<div class="container">
2+
<mat-card class="signup--form__box--blue">
3+
<div class="signup--form-container">
4+
<p class="signup--form__header-title">Give it a try!</p>
5+
<form class="example-container" [formGroup]="signUpForm">
6+
<p>
7+
<mat-form-field appearance="outline">
8+
<mat-label>First name</mat-label>
9+
<input [formControl]="firstName" matInput placeholder="Jason" />
10+
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
11+
<mat-error *ngIf="email.invalid">{{ getErrorMessage('firstName') }}</mat-error>
12+
</mat-form-field>
13+
</p>
14+
<p>
15+
<mat-form-field appearance="outline">
16+
<mat-label>Last name</mat-label>
17+
<input [formControl]="lastName" matInput placeholder="Bourne" />
18+
<mat-icon matSuffix>favorite</mat-icon>
19+
<mat-error *ngIf="email.invalid">{{ getErrorMessage('lastName') }}</mat-error>
20+
</mat-form-field>
21+
</p>
22+
<p>
23+
<mat-form-field appearance="outline">
24+
<mat-label>Enter your email</mat-label>
25+
<input matInput placeholder="pat@example.com" [formControl]="email" required />
26+
<mat-error *ngIf="email.invalid">{{ getErrorMessage('email') }}</mat-error>
27+
</mat-form-field>
28+
</p>
29+
<p>
30+
<mat-form-field appearance="outline">
31+
<mat-label>Enter a password</mat-label>
32+
<input matInput [formControl]="password" [type]="hide ? 'password' : 'text'" />
5133
<button
52-
class="signup--form__submit-button"
53-
mat-raised-button
54-
color="primary"
55-
(click)="sendForm()"
34+
mat-icon-button
35+
matSuffix
36+
(click)="hide = !hide"
37+
[attr.aria-label]="'Hide password'"
38+
[attr.aria-pressed]="hide"
5639
>
57-
{{ 'Sign Up' | uppercase }}
40+
<mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
5841
</button>
59-
</p>
60-
</form>
61-
</div>
62-
</mat-card>
63-
</mat-grid-tile>
64-
</mat-grid-list>
42+
<mat-hint
43+
>Must be minimum eight characters, at least one uppercase letter, one lowercase letter
44+
and one number</mat-hint
45+
>
46+
<mat-error *ngIf="password.invalid">{{ getErrorMessage('password') }}</mat-error>
47+
</mat-form-field>
48+
</p>
49+
<p>
50+
<button
51+
class="signup--form__submit-button"
52+
mat-raised-button
53+
color="primary"
54+
(click)="sendForm()"
55+
>
56+
{{ 'Sign Up' | uppercase }}
57+
</button>
58+
</p>
59+
</form>
60+
</div>
61+
</mat-card>
62+
</div>

‎src/app/modules/auth/pages/sign-up-page/sign-up-page.component.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
@import '../../../../styles/mixins';
22

3+
.container {
4+
width: 45%;
5+
@include push--auto();
6+
margin-top: 2rem;
7+
}
8+
39
.signup--form-container {
410
text-align: center;
511

@@ -37,3 +43,15 @@
3743
.signup--form__submit-button {
3844
margin-top: 40px;
3945
}
46+
47+
@media (max-width: 680px) {
48+
.container {
49+
width: 90%;
50+
@include push--auto();
51+
margin-top: 1rem;
52+
}
53+
54+
.signup--form__box--blue {
55+
padding: 1rem;
56+
}
57+
}

‎src/app/modules/hero/pages/my-heroes-page/my-heroes-page.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,4 +98,8 @@ form {
9898
float: none;
9999
padding: 0;
100100
}
101+
102+
.my-heroes__no-heroes--message {
103+
width: 90%;
104+
}
101105
}

‎src/app/modules/root/pages/home-page/home-page.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div fxLayout="row">
2-
<div fxFlex="10" fxFlex.gt-sm="20"></div>
3-
<div fxFlex="90" fxFlex.gt-sm="80">
2+
<div fxFlex="0" fxFlex.gt-sm="20"></div>
3+
<div fxFlex="100" fxFlex.gt-sm="80">
44
<h1 class="header__title" i18n>Heroes published</h1>
55
<div id="heroes-list" *ngIf="heroes$ | async as heroes; else loading">
66
<ng-container *ngFor="let hero of heroes">
@@ -11,5 +11,5 @@ <h1 class="header__title" i18n>Heroes published</h1>
1111
<app-hero-loading></app-hero-loading>
1212
</ng-template>
1313
</div>
14-
<div fxFlex="10" fxFlex.gt-sm="20"></div>
14+
<div fxFlex="0" fxFlex.gt-sm="20"></div>
1515
</div>

‎src/app/modules/root/shared/footer/footer.component.html‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
11
<footer>
2-
<div
3-
fxFlex
4-
fxLayout="row"
5-
fxLayout.xs="column"
6-
fxLayoutAlign="center center"
7-
class.xs="footer-xs"
8-
>
2+
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutGap="8px">
93
<div fxFlex="33">
104
<span i18n>Angular Example App</span>
115
</div>
126
<div fxFlex="33" class="text--center">
137
<lib-ngx-example-library></lib-ngx-example-library>
148
</div>
15-
<div fxFlex class="text--right" class.xs="footer-xs">
9+
<div fxFlex class="footer__angular-icon">
1610
<a href="https://angular.io/" rel="noreferrer" target="_blank">
1711
<img alt="angular logo" src="./assets/images/angular.svg" />
1812
</a>

‎src/app/modules/root/shared/footer/footer.component.scss‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,16 @@ footer {
1111
img {
1212
width: 25%;
1313
}
14+
15+
.footer__angular-icon {
16+
text-align: right;
17+
}
1418
}
1519

16-
.footer-xs {
17-
text-align: center;
18-
padding-top: 1rem;
20+
@media (max-width: 680px) {
21+
footer {
22+
.footer__angular-icon {
23+
text-align: center;
24+
}
25+
}
1926
}

‎src/app/modules/root/shared/header/header.component.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,18 @@
1010
i18n
1111
>My Heroes</a
1212
>
13+
<a mat-raised-button *ngIf="!isLoggedIn" [routerLink]="routesConfig.routes.auth.logIn" i18n>
14+
Log In
15+
</a>
16+
<a
17+
mat-raised-button
18+
*ngIf="!isLoggedIn"
19+
[routerLink]="routesConfig.routes.auth.signUp"
20+
i18n
21+
>
22+
Sign Up
23+
</a>
24+
<a mat-raised-button *ngIf="isLoggedIn" (click)="logOut()"> Log out </a>
1325
</div>
1426
<div fxFlex class="text--right">
1527
<app-search-bar></app-search-bar>
@@ -28,18 +40,6 @@
2840
</a>
2941
</div>
3042
</mat-menu>
31-
<a
32-
mat-raised-button
33-
*ngIf="!isLoggedIn"
34-
[routerLink]="routesConfig.routes.auth.signUp"
35-
i18n
36-
>
37-
Sign Up
38-
</a>
39-
<a mat-raised-button *ngIf="!isLoggedIn" [routerLink]="routesConfig.routes.auth.logIn" i18n>
40-
Log In
41-
</a>
42-
<a mat-raised-button *ngIf="isLoggedIn" (click)="logOut()"> Log out </a>
4343
</div>
4444
</div>
4545
</nav>

0 commit comments

Comments
 (0)