modif card + image

This commit is contained in:
Your Name 2022-02-18 17:21:51 +01:00
parent 0478d8886a
commit 9f058b2d6a
4 changed files with 17 additions and 15 deletions

View File

@ -1,5 +1,5 @@
<div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded m-5 rounded-top " <div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded m-5 rounded-top "
style="width: 22rem;"> style="width: 23rem;">
<img class="card-img-top " src="assets/ImagesRestos/photo.jpg" alt="Card image cap"> <img class="card-img-top " src="assets/ImagesRestos/photo.jpg" alt="Card image cap">
<div class="rond position-absolute"> <div class="rond position-absolute">
<app-icon class="heart" <app-icon class="heart"
@ -20,7 +20,7 @@
data-bs-parent="#accordionExample"> data-bs-parent="#accordionExample">
<div class=" body accordion-body"> <div class=" body accordion-body">
<strong>This is the first item's accordion body.</strong> <strong>This is the first item's accordion body.</strong>
<div class="star-icon d-flex justify-content-flex-start d-flex align-items-center pt-2 "> <div class="star-icon d-flex justify-content-flex-start d-flex align-items-center pt-5 ">
<ul class="avis-star d-flex flex-row ps-1 pt-3 pe-0 pb-2 mb-0 "> <ul class="avis-star d-flex flex-row ps-1 pt-3 pe-0 pb-2 mb-0 ">
<li class="star pe-2"><i class="bi bi-star-fill"></i></li> <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
<li class="star pe-2"><i class="bi bi-star-fill"></i></li> <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
@ -39,16 +39,17 @@
<i class="fas fa-walking ps-2 pe-2" style="color:#a8a8a8"></i> <i class="fas fa-walking ps-2 pe-2" style="color:#a8a8a8"></i>
<span class="categorie pe-2" style="font-weight: bold;">{{distance}}m</span> <span class="categorie pe-2" style="font-weight: bold;">{{distance}}m</span>
<!-- <div class="d-inline-flex" *ngIf="restaurant.prix != null; else noPrice"> --> <div class="d-inline-flex align-items-center" *ngIf="restaurant.prix != null; else noPrice">
<i class="fas fa-euro-sign ps-2 pe-2" style="color:#a8a8a8"></i> <i class="fas fa-euro-sign ps-2 pe-2" style="color:#a8a8a8"></i>
<span class="prix" style="font-weight: bold;">{{ priceRef[restaurant.prix] }}</span> <span class="prix" style="font-weight: bold;">{{ priceRef[restaurant.prix] }}</span>
<!-- </div> --> </div>
<!-- <ng-template #noPrice> <ng-template #noPrice>
<i class="fas fa-euro-sign ps-1 " style="color:#a8a8a8"></i>
<div class="d-inline-flex"> <div class="d-inline-flex">
<p class="description pt-3 ps-3 pe-1 " style="font-size:1.9vh ;color:#545454">{{ priceRef[0] }} </p> <p class="description pt-3 ps-1 " style="font-size:1.9vh ;color:#545454">{{ priceRef[0] }} </p>
</div> </div>
</ng-template> --> </ng-template>
<div class="d-inline-flex" *ngIf="restaurant.website; else noWebsite"> <div class="d-inline-flex" *ngIf="restaurant.website; else noWebsite">
<p class="description pt-3 ps-2 pe-1"><i class="bi bi-globe2 ps-2 pe-2" style="color:#a8a8a8"></i> <p class="description pt-3 ps-2 pe-1"><i class="bi bi-globe2 ps-2 pe-2" style="color:#a8a8a8"></i>
@ -57,9 +58,10 @@
</div> </div>
<!-- le else de notre *ngIf plus haut--> <!-- le else de notre *ngIf plus haut-->
<ng-template #noWebsite> <ng-template #noWebsite>
<div class="d-inline-flex"> <i class="bi bi-globe2 ps-3 pe-1" style="color:#a8a8a8"></i>
<p class="description pt-3 ps-3 pe-1 " style="font-size:1.9vh ;color:#545454"> Pas de site Web </p>
</div> <p class="d-inline-flex description pt-3 " style="font-size:1.9vh ;color:#545454">Indisponible </p>
</ng-template> </ng-template>
<!-- ------------------------------------ --> <!-- ------------------------------------ -->
</div> </div>
@ -77,7 +79,7 @@
</div> </div>
<ng-template #noInfosSurPlace> <ng-template #noInfosSurPlace>
<span class="d-flex" style="color:#545454">Sur place :</span> <span class="d-flex" style="color:#545454">Sur place :</span>
<p style="font-size:1.9vh ;color:#545454">Infos non disponible.</p> <p style="font-size:1.9vh ;color:#545454">Indisponible.</p>
</ng-template> </ng-template>
<div class="d-inline-flex " *ngIf="restaurant.aEmporter != null else noInfosAEmporter"> <div class="d-inline-flex " *ngIf="restaurant.aEmporter != null else noInfosAEmporter">
@ -89,7 +91,7 @@
</div> </div>
<ng-template #noInfosAEmporter> <ng-template #noInfosAEmporter>
<span class="d-flex a-emporter pt-2 " style="color:#545454">A emporter :</span> <span class="d-flex a-emporter pt-2 " style="color:#545454">A emporter :</span>
<p style="font-size:1.9vh ;color:#545454">Infos non disponible.</p> <p style="font-size:1.9vh ;color:#545454">Indisponible.</p>
</ng-template> </ng-template>
</div> </div>
<div class="trait-rouge pt-3"></div> <div class="trait-rouge pt-3"></div>
@ -104,7 +106,7 @@
</div> </div>
<!-- le else de notre *ngIf plus haut--> <!-- le else de notre *ngIf plus haut-->
<ng-template #noAccesPMR> <ng-template #noAccesPMR>
<p class=" ps-2"style="font-size:1.9vh ;color:#545454">Infos non disponible.</p> <p class="ps-2"style="font-size:1.9vh ;color:#545454">Indisponible.</p>
</ng-template> </ng-template>
<!-- ------------------------------------ --> <!-- ------------------------------------ -->
</div> </div>

View File

@ -13,7 +13,7 @@ export class CardRestoComponent implements OnInit {
@Input() likeResto: any; @Input() likeResto: any;
@Output() clickLike = new EventEmitter<boolean>(); @Output() clickLike = new EventEmitter<boolean>();
isLiked : boolean = false; isLiked : boolean = false;
priceRef = ["Info indisponible","1-10€ ","11-20€","21-30€","31-40€"]; priceRef = ["Indisponible","1-10€ ","11-20€","21-30€","31-40€"];
constructor(private apiBackService : ApiBackService) { constructor(private apiBackService : ApiBackService) {
this.distance = 0 ; this.distance = 0 ;

View File

@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<div id="image-header"> <div id="image-header">
<img src="assets/images-header/fond.png" alt="fond_header"> <img src="assets/images-header/bandeau2.png" alt="fond_header">
</div> </div>
</nav> </nav>

Binary file not shown.

After

Width:  |  Height:  |  Size: 288 KiB