package
This commit is contained in:
commit
4e56e325c9
8092
package-lock.json
generated
8092
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,44 +1,43 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm">
|
<div class="row d-flex justify-content-end align-items-center flex-row">
|
||||||
<button routerLink="../modifier-contact/{{personne.id}}" class="w-100 btn btn-lg btn-rounded btn-secondary">
|
<div class="couleur col-7" [style.background-color]="personne.couleur"></div>
|
||||||
|
<div class="col-5">
|
||||||
|
<div class="col">
|
||||||
|
<button routerLink="../modifier-contact/{{personne.id}}"
|
||||||
|
class=" btn btn-sm btn-rounded btn-secondary mb-2">
|
||||||
Modifier
|
Modifier
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm">
|
<div class="col">
|
||||||
<button class="w-100 btn btn-lg btn-rounded btn-secondary" (click)="onClickDelete(personne.id)">
|
<button class=" btn btn-sm btn-rounded btn-secondary" (click)="onClickDelete(personne.id)">
|
||||||
Supprimer
|
Supprimer
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="row align-items-center">
|
<div class="row align-items-center">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
|
<div class="row my-3 d-flex justify-content-center flex-row">
|
||||||
<div class="row d-flex justify-content-center flex-row">
|
<span class="fiche-contact col-7">{{ personne.prenom }} {{ personne.nom }} </span>
|
||||||
<div class= "couleur col-4" [style.background-color]="personne.couleur"></div>
|
|
||||||
<span class="fiche-contact col-7" >{{ personne.prenom }} {{ personne.nom }} </span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row my-3 d-flex justify-content-center flex-row">
|
||||||
<div class="row d-flex justify-content-center flex-row">
|
<span i class="col-4 bi bi-telephone-inbound"></span>
|
||||||
<img class= "col-4" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/phone.png"/>
|
<span class="fiche-contact col-7">{{ personne.telephone }}</span>
|
||||||
<span class="fiche-contact col-7" >{{ personne.telephone }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row my-3 d-flex justify-content-center flex-row">
|
||||||
<div class="row d-flex justify-content-center flex-row">
|
<i class="col-4 bi bi-envelope"></i>
|
||||||
<img class= "col-4" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-gmail.png"/>
|
<span class="fiche-contact col-7">{{ personne.email }}</span>
|
||||||
<span class="fiche-contact col-7" >{{ personne.email }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row my-3 d-flex justify-content-center flex-row">
|
||||||
<div class="row d-flex justify-content-center flex-row">
|
<i class="col-4 bi bi-calendar-heart"></i>
|
||||||
<img class= "col-4" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/gateau.png"/>
|
<span class="fiche-contact col-7">{{ personne.dateNaissance }}</span>
|
||||||
<span class="fiche-contact col-7" >{{ personne.dateNaissance }}</span>
|
</div>
|
||||||
|
<div class="row my-3 d-flex justify-content-center flex-row">
|
||||||
|
<i class="col-4 bi bi-map"></i>
|
||||||
|
<span class="fiche-contact col-7">{{ personne.adresse }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row d-flex justify-content-center flex-row">
|
|
||||||
<p class="fiche-contact col-7" >{{ personne.adresse }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
@ -1,19 +1,15 @@
|
|||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #5a1e63 !important;
|
background-color: #5a1e63 !important;
|
||||||
width: 100%;
|
min-width: 100px;
|
||||||
max-width: 150px;
|
border-radius: 55px;
|
||||||
padding: 15px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.couleur{
|
.couleur{
|
||||||
border: none;
|
border: none;
|
||||||
margin-top: -15px;
|
border-radius: 50%;
|
||||||
border-radius: 80%;
|
width: 110px;
|
||||||
width: 60px;
|
height: 110px;
|
||||||
height: 60px;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.info{
|
.info{
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
Ma Team</a>
|
Ma Team</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a routerLink="../repertoire" routerLinkActive="active-custom" class="nav-link">
|
<a routerLink="/repertoire" routerLinkActive="active-custom" class="nav-link">
|
||||||
<i class="bi bi-person-rolodex"></i>
|
<i class="bi bi-person-rolodex"></i>
|
||||||
Répertoire</a>
|
Répertoire</a>
|
||||||
</li>
|
</li>
|
||||||
|
@ -4,12 +4,11 @@
|
|||||||
<app-side-bar></app-side-bar>
|
<app-side-bar></app-side-bar>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class=" col compte text-center">
|
<div class=" col compte text-center py-3 border">
|
||||||
<div>
|
<div>
|
||||||
<button class="w-100 btn btn-lg btn-secondary " type="submit">Tous les contacts
|
<button class="btn btn-sm btn-rounded btn-secondary m-3" type="submit">Tous les contacts
|
||||||
</button>
|
</button>
|
||||||
|
<button routerLink="/ajouter-contact" class="btn btn-sm btn-rounded btn-secondary m-3">
|
||||||
<button routerLink="/ajouter-contact" class="w-100 btn btn-lg btn-rounded btn-secondary">
|
|
||||||
Ajouter un contact
|
Ajouter un contact
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@ -23,20 +22,20 @@
|
|||||||
<div>
|
<div>
|
||||||
<h4>Liste des Contacts</h4>
|
<h4>Liste des Contacts</h4>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row justify-content-evenly">
|
<div class="row justify-content-evenly">
|
||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<div *ngFor="let personne of listContact" (click)="onClick(personne)">
|
<div class="row my-3 d-flex justify-content-center flex-row" *ngFor="let personne of listContact"
|
||||||
<div class= "couleur" [style.background-color]="personne.couleur"></div>
|
(click)="onClick(personne)">
|
||||||
<p class="fiche-contact">{{ personne.prenom }} {{ personne.nom }}</p>
|
<div class="couleur col-4" [style.background-color]="personne.couleur"></div>
|
||||||
|
<span class="fiche-contact col-7">{{ personne.prenom }} {{ personne.nom }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-4" *ngIf="openDetails">
|
<div class="col-4" *ngIf="openDetails">
|
||||||
<app-fiche-contact [personne]="openDetails" (clickDelete)="onClickDelete($event)"></app-fiche-contact>
|
<app-fiche-contact [personne]="openDetails" (clickDelete)="onClickDelete($event)">
|
||||||
|
</app-fiche-contact>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
@ -2,9 +2,12 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #5a1e63 !important;
|
background-color: #5a1e63 !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 330px;
|
max-width: 230px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
min-width: 100px;
|
||||||
|
border-radius: 55px;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group.mb-3 {
|
.input-group.mb-3 {
|
||||||
@ -24,7 +27,8 @@
|
|||||||
height: 60px;
|
height: 60px;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
;h4 {
|
|
||||||
|
.h4 {
|
||||||
color: black;
|
color: black;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user