Skip to content

Commit 792aafe

Browse files
sambaptistasambaptista
committed
Fine vertical layout scroll and overflow on login page #12519
1 parent 06ade5c commit 792aafe

3 files changed

Lines changed: 71 additions & 51 deletions

File tree

‎client/app/login/login.component.html‎

Lines changed: 47 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,53 @@
1-
<div class="nat-vertical overflow nat-fill nat-center">
2-
<div class="nat-padding nat-gap nat-vertical nat-center nat-expand-no-collapse">
3-
<img src="assets/ichtus.svg" />
1+
<form class="body nat-vertical nat-gap-30 nat-margin-standard" [formGroup]="form">
2+
<img src="assets/ichtus.svg" alt="logo" />
43

5-
<form class="nat-vertical" style="min-width: 300px" [formGroup]="form">
6-
<mat-form-field>
7-
<mat-label>Email ou nom d'utilisateur</mat-label>
8-
<input
9-
matInput
10-
formControlName="login"
11-
autofocus
12-
autocomplete="username"
13-
autocorrect="off"
14-
autocapitalize="off"
15-
spellcheck="false"
16-
(keydown.enter)="maybeConfirm()"
17-
/>
18-
<mat-error>{{ form.controls.login.errors | errorMessage }}</mat-error>
19-
</mat-form-field>
4+
<div class="nat-vertical">
5+
<mat-form-field>
6+
<mat-label>Email ou nom d'utilisateur</mat-label>
7+
<input
8+
matInput
9+
formControlName="login"
10+
autofocus
11+
autocomplete="username"
12+
autocorrect="off"
13+
autocapitalize="off"
14+
spellcheck="false"
15+
(keydown.enter)="maybeConfirm()"
16+
/>
17+
<mat-error>{{ form.controls.login.errors | errorMessage }}</mat-error>
18+
</mat-form-field>
2019

21-
<mat-form-field>
22-
<mat-label>Mot de passe</mat-label>
23-
<input
24-
matInput
25-
formControlName="password"
26-
autocomplete="current-password"
27-
autocorrect="off"
28-
autocapitalize="off"
29-
spellcheck="false"
30-
[type]="hidePassword ? 'password' : 'text'"
31-
(keydown.enter)="maybeConfirm()"
32-
/>
33-
<button matIconButton matIconSuffix (click)="hidePassword = !hidePassword">
34-
<mat-icon [fontIcon]="hidePassword ? 'visibility' : 'visibility_off'" />
35-
</button>
20+
<mat-form-field>
21+
<mat-label>Mot de passe</mat-label>
22+
<input
23+
matInput
24+
formControlName="password"
25+
autocomplete="current-password"
26+
autocorrect="off"
27+
autocapitalize="off"
28+
spellcheck="false"
29+
[type]="hidePassword ? 'password' : 'text'"
30+
(keydown.enter)="maybeConfirm()"
31+
/>
32+
<button matIconButton matIconSuffix (click)="hidePassword = !hidePassword">
33+
<mat-icon [fontIcon]="hidePassword ? 'visibility' : 'visibility_off'" />
34+
</button>
3635

37-
<mat-error>{{ form.controls.password.errors | errorMessage }}</mat-error>
38-
</mat-form-field>
39-
40-
<div class="nat-horizontal nat-gap-10 nat-right">
41-
<a matButton routerLink="/user/request-password-reset">Mot de passe oublié ?</a>
42-
<button type="submit" matButton="filled" [disabled]="!form.valid" (click)="maybeConfirm()">
43-
Se connecter
44-
</button>
45-
</div>
46-
47-
<a matButton="outlined" class="nat-margin-top" [href]="privacyPolicyUrl">Politique de confidentialité</a>
36+
<mat-error>{{ form.controls.password.errors | errorMessage }}</mat-error>
37+
</mat-form-field>
38+
<div class="nat-horizontal nat-wra nat-wrap-reverse nat-gap-10 nat-right">
39+
<a matButton="outlined" routerLink="/user/request-password-reset">Mot de passe oublié ?</a>
40+
<button type="submit" matButton="filled" [disabled]="!form.valid" (click)="maybeConfirm()">
41+
Se connecter
42+
</button>
43+
</div>
44+
</div>
4845

49-
<mat-divider class="nat-margin" />
46+
<mat-divider />
5047

51-
<div class="mat-font-title-md" style="text-align: center">Pas encore membre ?</div>
52-
<a type="submit" matButton="outlined" routerLink="/user/new">Adhérer</a>
53-
</form>
48+
<div class="nat-vertical nat-gap-10">
49+
<div class="mat-font-title-md" style="text-align: center">Pas encore membre ?</div>
50+
<a matButton="outlined" type="submit" routerLink="/user/new">Adhérer</a>
51+
<a matButton="outlined" [href]="privacyPolicyUrl">Politique de confidentialité</a>
5452
</div>
55-
</div>
53+
</form>

‎client/app/login/login.component.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@use '@ecodev/natural-layout' as nat;
2+
3+
.body {
4+
box-sizing: border-box;
5+
margin: auto;
6+
padding: 10px;
7+
width: 100%;
8+
max-width: 360px;
9+
}
10+
11+
@include nat.media(sm) {
12+
.body {
13+
padding: 20px;
14+
}
15+
.firstNameAndName,
16+
.birthdayAndPhone {
17+
grid: auto / auto;
18+
}
19+
}
20+
21+
img,
22+
.mdc-button {
23+
align-self: center;
24+
}

‎client/app/user/components/register/register-confirm.component.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ import {
3333
import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
3434
import {AddressComponent} from '../../../shared/components/address/address.component';
3535
import {PasswordComponent} from '../password/password.component';
36-
import {MatDivider} from '@angular/material/divider';
3736
import {CurrencyPipe} from '@angular/common';
3837
import {MatIcon} from '@angular/material/icon';
3938
import {MatInput} from '@angular/material/input';
@@ -54,7 +53,6 @@ import {MatError, MatFormField, MatLabel, MatPrefix, MatSuffix} from '@angular/m
5453
MatIcon,
5554
NaturalIconDirective,
5655
CurrencyPipe,
57-
MatDivider,
5856
PasswordComponent,
5957
AddressComponent,
6058
MatDatepicker,

0 commit comments

Comments
 (0)