ajout couleur

This commit is contained in:
AlineRinquin 2022-02-15 15:37:22 +01:00
parent 98374d8a47
commit a881b6cee6
7 changed files with 98 additions and 36 deletions

View file

@ -1,31 +1,42 @@
<app-header></app-header>
<app-side-bar></app-side-bar>
<div class="row">
<div class="col-md-auto">
<app-side-bar></app-side-bar>
</div>
<div>
<button class="w-100 btn btn-lg btn-secondary "
type="submit">Tous les contacts
</button>
<div class=" col compte text-center">
<div>
<button class="w-100 btn btn-lg btn-secondary " type="submit">Tous les contacts
</button>
<button routerLink="/ajouter-contact" class="w-100 btn btn-lg btn-rounded btn-secondary">
Ajouter un contact
</button>
<button routerLink="/ajouter-contact" class="w-100 btn btn-lg btn-rounded btn-secondary">
Ajouter un contact
</button>
<div class="input-group mb-3">
<input type="text" class="form-control"
placeholder="Rechercher un contact"
aria-label="Rechercher un contact"
aria-describedby="basic-addon2"
#word
(keyup)="onSearchChange(word.value)">
<div class="input-group mb-3 d-flex justify-content-center">
<input type="text" class="form-control" placeholder="Rechercher un contact"
aria-label="Rechercher un contact" aria-describedby="basic-addon2" #word
(keyup)="onSearchChange(word.value)">
<div class="input-group-append"></div>
</div>
<div>
<h4>Liste des Contacts</h4>
</div>
<div class="row justify-content-evenly">
<div class="col-4">
<div *ngFor="let personne of listContact" (click)="onClick(personne)">
<img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/contact-1.png" />
<p class="fiche-contact">{{ personne.prenom }} {{ personne.nom }}</p>
</div>
</div>
<div class="input-group-append">
<div class="col-4" *ngIf="openDetails">
<app-fiche-contact [personne]="openDetails" (clickDelete)="onClickDelete($event)"></app-fiche-contact>
</div>
</div>
</div>
</div>
<div *ngFor="let personne of listContact" (click)="onClick(personne)" >
<img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/contact-1.png"/>
<p class="fiche-contact" >{{ personne.prenom }} {{ personne.nom }}</p>
</div>
<div *ngIf="openDetails"><app-fiche-contact [personne]="openDetails" (clickDelete)="onClickDelete($event)"></app-fiche-contact></div>
</div>
</div>

View file

@ -7,9 +7,16 @@
margin: auto;
}
.input-group mb-3 {
width: 100%;
.input-group.mb-3 {
width: 50%;
max-width: 330px;
padding: 15px;
margin: auto;
display: flex;
flex-direction: row;
}
;h4 {
color: black;
font-weight: bold;
}