Toujours sur le design de la page des recettes

local/modules/Recettes/I18n/fr_FR.php

@@ -10,4 +10,10 @@ return array(
     'Quantity' => 'Quantité',
     'Summary' => 'Description de la recette',
     'Other ingredients' => 'Ingrédients supplémentaires',
+    'Ingredient' => 'Ingrédient',
+    'Ingredients' => 'Ingrédients',
+    'Ingredients from us' => 'Ce que vous pouvez trouver chez nous :',
+    'Additional ingredients' => 'Vous aurez également besoin de :',
+    'Quantity needed' => 'Quantité nécessaire',
+    'Add to cart' => 'Ajouter à mon panier',
 );

local/modules/Recettes/templates/frontOffice/default/assets/css/Recettes.css

@@ -19,12 +19,14 @@ div.entete {
 
 div.entete img {
     width: 30px;
-    padding-right: 10px;
+    padding: 0 10px 0 5px;
 }
 div.entete span {
+    display: flex;
     margin-right: 40px;
     padding: 10px 10px;
     color: white;
+    vertical-align: center;
 }
 div.entete span b {
     color: #0e0e0e;
@@ -32,4 +34,28 @@ div.entete span b {
 .photo-principale img {
     width: 250px;
     box-shadow: 10px 10px 15px gray;
+    border-radius: 5px;
+}
+
+.recette-titre {
+    font-weight: 900;
+    font-size: 22px;
+    color: #95c11e;
+}
+.recette-soustitre {
+    font-weight: 400;
+    font-size: 18px;
+}
+.recette-summary {
+    font-size: 18px;
+    font-style: italic;
+    margin: 15px 0 45px 0;
+}
+
+.table-ingredients {
+    width: 90%;
+}
+.table-ingredients th,
+.table-ingredients td {
+    text-align: center;
 }

templates/frontOffice/custom/recette.html

@@ -38,6 +38,7 @@
                 {if $DIFFICULTY eq 2}{assign var="label_difficulty" value="Difficile"}{/if}
 
                 <h1 class="titre-recette">{$TITLE}</h1>
+                <br>
                 <div class="entete">
                     <span class="preparation"><b>{intl l='Preparation time' d='recettes'}</b><img src="{image file='assets/img/timer.svg' source='Recettes'}" alt="Preparation time">{$PREPARATION_TIME}</span>
                     <span class="cuisson"><b>{intl l='Cooking time' d='recettes'}</b><img src="{image file='assets/img/thermometer.svg' source='Recettes'}" alt="Cooking time">{$COOKING_TIME}</span>
@@ -51,12 +52,13 @@
                         {/loop}
                     </div>
                     <div class="col-md-8">
-                        <h3>{intl l='Nos produits' d='recettes'}</h3>
-                        <table class="products-needed">
+                        <label class="recette-summary">{$SUMMARY|unescape:"html" nofilter}</label>
+                        <p class="recette-titre">{intl l='Ingredients' d='recettes'}</p>
+                        <table class="table table-striped table-condensed table-ingredients">
                             <thead>
                                 <th>{intl l="Ingredient" d="recettes"}</th>
                                 <th>{intl l="Quantity needed" d="recettes"}</th>
-                                <th>{intl l="Choose this product" d="recettes"}</th>
+                                <th>{intl l="Add to cart" d="recettes"}</th>
                             </thead>
                             <tbody>
                             {loop type="recipe_products" name="products-loop" recipe_id=$ID}
@@ -69,8 +71,8 @@
                             </tbody>
                         </table>
                         <br>
-                        <h3>{intl l='Autres ingrédients' d='recettes'}</h3>
-                        <label class="autres-ingredients">{$OTHER_INGREDIENTS}</label>
+                        <p class="recette-soustitre">{intl l="Additional ingredients" d="recettes"}</p>
+                        <label class="autres-ingredients">{$OTHER_INGREDIENTS|unescape:"html" nofilter}</label>
                     </div>
                 </div>
                 <br>