Merge pull request #7 from HarmandI/css

css
This commit is contained in:
Sana 2022-03-22 12:38:08 +01:00 committed by GitHub
commit 4f5e6cd180
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 61 additions and 33 deletions

View File

@ -13,8 +13,8 @@
margin-right: auto; margin-right: auto;
border: solid 1px; border: solid 1px;
border-radius: 10px; border-radius: 10px;
background-color: #64c982; background-color: #306340;
border-color: #64c982; border-color: #306340;
} }
.form-plant .checkbox { .form-plant .checkbox {
@ -70,6 +70,6 @@
.btn-outline-success { .btn-outline-success {
margin-top: 10px; margin-top: 10px;
background-color: #ffff; background-color: #ffff;
color: #64c982 !important; color: #306340 !important;
border-color: #64c982 !important; border-color: #306340 !important;
} }

View File

@ -1,4 +1,6 @@
h1{ h1{
display: flex;
justify-content: center;
color: rgba(0, 0, 0, 0.658); color: rgba(0, 0, 0, 0.658);
font-size: 28px; font-size: 28px;
margin-top: 20px; margin-top: 20px;

View File

@ -1,4 +1,6 @@
h1{ h1{
display: flex;
justify-content: center;
color: rgba(0, 0, 0, 0.658); color: rgba(0, 0, 0, 0.658);
font-size: 28px; font-size: 28px;
margin-top: 20px; margin-top: 20px;

View File

@ -1,30 +1,35 @@
<table class="table" *ngIf="subCollection$ | async as collection"> <div id="container">
<thead class="thead-dark"> <div id="button">
<tr> <button class="w-100 btn btn-lg btn-outline-success" routerLink="../ajouter">Ajouter une plante </button>
<th scope="col">Id</th> </div>
<th scope="col">Nom</th> <table class="table" *ngIf="subCollection$ | async as collection">
<th scope="col">Prix</th> <thead class="thead-dark" style="background-color: #306340 ; color:#f3f7f4 ;">
<th scope="col">Quantité</th> <tr>
<th scope="col">En stock</th> <th scope="col">Id</th>
<th scope="col">Catégorie</th> <th scope="col">Nom</th>
<th scope="col">Note</th> <th scope="col">Prix</th>
<th scope="col">Modifier</th> <th scope="col">Quantité</th>
<th scope="col">Supprimer</th> <th scope="col">En stock</th>
<th scope="col">Catégorie</th>
<th scope="col">Note</th>
<th scope="col">Modifier</th>
<th scope="col">Supprimer</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let products of collection">
<td>{{products.id}}</td>
<td>{{products.name}}</td>
<td>{{products.price}}</td>
<td>{{products.quantity}}</td>
<td>{{products.inStock}}</td>
<td>{{products.category}}</td>
<td>{{products.rating}}</td>
<td><a class="bi-pencil-square" style="color: #5472b1;" routerLink="../modifier/{{products.id}}"></a></td>
<td class="bi-trash-fill" style="color: rgb(231, 73, 73); cursor: pointer;" (click)="onClickDelete(products.id)"></td>
</tr>
</tbody>
</table>
</div>
</tr>
</thead>
<tbody>
<tr *ngFor="let products of collection">
<th scope="row">{{products.id}}</th>
<td>{{products.name}}</td>
<td>{{products.price}}</td>
<td>{{products.quantity}}</td>
<td>{{products.inStock}}</td>
<td>{{products.category}}</td>
<td>{{products.rating}}</td>
<td><a class="bi-pencil-square" routerLink="../modifier/{{products.id}}"></a></td>
<td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(products.id)"></td>
</tr>
</tbody>
</table>
<button routerLink="../ajouter">Ajouter une plante </button>

View File

@ -0,0 +1,19 @@
#container{
display: flex;
justify-content: center;
margin-top: 5rem;
}
table{
width: 75%;
margin-left: 2rem;
}
button{
background-color: #306340;
color: #f3f7f4 !important;
border-color: #306340 !important;
}
#button{
width: 10%;
}