Side bar css ok avancées sur ticket page account et page membreetc

This commit is contained in:
Sana EL HIRI 2022-02-14 15:45:32 +01:00
parent e53a9a062d
commit 026ac42818
14 changed files with 402 additions and 157 deletions

View file

@ -1,30 +1,27 @@
<app-header></app-header>
<app-side-bar></app-side-bar>
<div class="signup-form text-center">
<main class="form-signup">
<form (ngSubmit)="onSubmit()" [formGroup]="teamForm">
<h1>Créer votre team!</h1>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputName"
placeholder=""
name="name"
formControlName="nameFc"
[ngClass]="{'is-valid' : teamForm.controls['nameFc'].touched && teamForm.controls['nameFc'].valid,
'is-invalid': teamForm.controls['nameFc'].touched && !teamForm.controls['nameFc'].valid}">
<label for="floatingInputName">Nom</label>
</div>
<button class="w-100 btn btn-lg btn-success"
type="submit"
[disabled]="teamForm.invalid">Je crée ma team</button>
<p>
Value : {{ teamForm.value | json }}
</p>
<p>
Form valid : {{ teamForm.valid }}
</p>
</form>
</main>
</div>
<div class="row">
<div class="col-md-auto">
<app-side-bar></app-side-bar>
</div>
<div class=" col team-form text-center">
<h1>Créer votre team</h1>
<main class="form-team">
<form (ngSubmit)="onSubmit()" [formGroup]="teamForm">
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputName"
placeholder=""
name="name"
formControlName="nameFc"
[ngClass]="{'is-valid' : teamForm.controls['nameFc'].touched && teamForm.controls['nameFc'].valid,
'is-invalid': teamForm.controls['nameFc'].touched && !teamForm.controls['nameFc'].valid}">
<label for="floatingInputName">Nom</label>
</div>
<button class="w-100 btn btn-lg btn-success"
type="submit"
[disabled]="teamForm.invalid">Je crée ma team</button>
</form>
</main>
</div>
</div>

View file

@ -1,31 +1,40 @@
.team-form{
margin-top: 20px;
align-content: center;
}
button{
margin-top: 10px;
}
.login-form {
height: 100vh;
padding-top: 40px;
background-color: #f5f5f5;
}
.form-signup {
.form-team {
width: 100%;
max-width: 330px;
max-width: 500px;
padding: 15px;
margin: auto;
}
.form-signup .checkbox {
.form-team .checkbox {
font-weight: 400;
}
.form-signup .form-floating:focus-within {
.form-team .form-floating:focus-within {
z-index: 2;
}
.form-signup input[type="email"] {
.form-team input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signup input[type="password"] {
.form-team input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;