Adding good front and pagination
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
23edc7adda
commit
61e915eca0
@ -1,77 +1,95 @@
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #bab6b6;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.recipe-card {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
margin: 10px;
|
||||
overflow: hidden;
|
||||
width: calc(33.33% - 20px);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.recipe-card:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.recipe-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.recipe-content {
|
||||
padding: 15px;
|
||||
}
|
||||
.recipe-title {
|
||||
font-size: 1.5em;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.recipe-description {
|
||||
font-size: 1em;
|
||||
color: #666;
|
||||
}
|
||||
.details-button {
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.details-button:hover {
|
||||
background-color: #525259;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.recipe-card {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.recipe-card {
|
||||
width: calc(100% - 20px);
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<body *ngFor="let recipe of recipes">
|
||||
|
||||
<div class="recipe-card">
|
||||
<img src="image1.jpg" alt="Recette 1" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
|
||||
<div class="recipe-content">
|
||||
<h2 class="recipe-title">{{recipe.$name}}</h2>
|
||||
<p class="recipe-description">{{recipe.$description}}</p>é
|
||||
<button class="details-button" onclick="toggleDetails(this)">Détails</button>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #bab6b6;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.recipe-container {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
.recipe-card {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.recipe-card:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.recipe-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.recipe-content {
|
||||
padding: 15px;
|
||||
}
|
||||
.recipe-title {
|
||||
font-size: 1.5em;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.recipe-description {
|
||||
font-size: 1em;
|
||||
color: #666;
|
||||
}
|
||||
.details-button {
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.details-button:hover {
|
||||
background-color: #525259;
|
||||
}
|
||||
.four-column {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
.two-column {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.page-link {
|
||||
padding: 10px;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
background-color: #ddd;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.page-link.active {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div [ngClass]="{'four-column': !isFormVisible, 'two-column': isFormVisible}" class="recipe-container">
|
||||
<div class="recipe-card" *ngFor="let recipe of paginatedRecipes">
|
||||
<img src="image1.jpg" alt="Recette 1" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
|
||||
<div class="recipe-content">
|
||||
<h2 class="recipe-title">{{recipe.$name}}</h2>
|
||||
<p class="recipe-description">{{recipe.$description}}</p>
|
||||
<button class="details-button">Détails</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pagination">
|
||||
<button class="page-link" (click)="previousPage()" [disabled]="currentPage === 0">Précédent</button>
|
||||
<span class="page-link" *ngFor="let page of totalPages; let i = index" [class.active]="currentPage === i" (click)="changePage(i)">{{ i + 1 }}</span>
|
||||
<button class="page-link" (click)="nextPage()" [disabled]="currentPage === totalPages - 1">Suivant</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in new issue