Enhance details style #5
Merged
bastien.ollier
merged 3 commits from detail_interface
into main
2 weeks ago
@ -1,4 +1,39 @@
|
||||
<p>{{recipe.id}}</p>
|
||||
<p>{{recipe.name}}</p>
|
||||
<p>{{recipe.description}}</p>
|
||||
<style>
|
||||
.container {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 300px 600px;
|
||||
}
|
||||
.container img {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.container_text {
|
||||
padding: 40px 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<img ng-if="recipe.image" src="https://placehold.co/200x200" alt={{recipe.name}}/>
|
||||
|
||||
<div class="container_text">
|
||||
|
||||
<h1>{{recipe.name}}</h1>
|
||||
<p>
|
||||
{{recipe.description}}
|
||||
</p>
|
||||
|
||||
<h3>Ingredients</h3>
|
||||
<p>
|
||||
<li *ngFor="let ingredient of recipe.ingredients">
|
||||
{{ this.recipes.getIngredientById(ingredient.idIngredient)?.name }}: {{ ingredient.quantity }}g
|
||||
</li>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
Loading…
Reference in new issue