From e407e71eef0920de118d9d8db01f164029994519 Mon Sep 17 00:00:00 2001
From: Capelier-Marla <marla.capelier@etu.univ-amu.fr>
Date: Thu, 26 Jan 2023 16:09:18 +0100
Subject: [PATCH 1/3] form and recipe name style

---
 Views/recipe/edit.php | 11 ++++-----
 static/style.css      | 53 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/Views/recipe/edit.php b/Views/recipe/edit.php
index b7ecbaa..36fc175 100644
--- a/Views/recipe/edit.php
+++ b/Views/recipe/edit.php
@@ -20,7 +20,7 @@ if ($O_recipe === null) {
 }
 ?>
 
-<main>
+<main class="editRecipe">
     <?php
     if ($O_recipe !== null) { ?>
         <a href="/recipe/view/<?= $O_recipe->I_ID ?>">Retour</a>
@@ -29,15 +29,12 @@ if ($O_recipe === null) {
 
     <form action="<?= $A_view["POST_URI"] ?>" method="post">
 
-        <label for="recipeImage">Entrez l'image de haut de page&nbsp;:</label>
+        <label for="recipeImage">Ajoutez l'image de haut de page&nbsp;:</label>
         <input type="file" name="recipeImage" id="recipeImage">
-
         <label for="recipeName">Nom de la recette&nbsp;:</label>
         <input type="text" name="recipeName" id="recipeName" placeholder="Nom du plat" value="<?= $S_name ?>" required>
-        </br>
         <label for="recipeDescription">Description de la recette</label>
-        </br>
-        <textarea name="recipeDescription" id="recipeDescription"><?= $S_descr ?></textarea>
+        <textarea name="recipeDescription" id="recipeDescription" placeholder="Faites une description appétissante ! 😋"><?= $S_descr ?></textarea>
 
         <section>
             <h1>Informations alimentaires</h1>
@@ -133,6 +130,7 @@ if ($O_recipe === null) {
                     </ol>
                     <button type="button" disabled="disabled" id="recipeButtonInstructionLess">-</button>';
                     $numberOfIngredients = 1;
+                    $numberOfInstructions = 1;
                     }
                 ?>
             <button type="button" id="recipeButtonInstructionPlus">+</button>
@@ -147,6 +145,7 @@ if ($O_recipe === null) {
 </main>
 
 <script>
+console.log("a");
 numberOfIngredients = <?= $numberOfIngredients ?>;
 const buttonIngredientPlus = document.querySelector("#recipeButtonIngredientPlus");
 const buttonIngredientLess = document.querySelector("#recipeButtonIngrdientLess");
diff --git a/static/style.css b/static/style.css
index 23449cc..2cd4e1a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -302,7 +302,10 @@ main.userView > form > label {
     font-size: var(--size-l);
 }
 
-:is(main.userView > form, main.search > article > form) > :is(input[type=text], input[type=email]) {
+:is(main.userView > form,
+    main.search > article > form)
+> :is(input[type=text],
+      input[type=email]) {
     height: var(--size-l);
     border-radius: var(--border-radius);
     padding: var(--size-l);
@@ -311,7 +314,9 @@ main.userView > form > label {
     font-size: var(--size-l);
 }
 
-:is(main.userView > form, main.search > article > form) > input[type=submit] {
+:is(main.userView > form,
+    main.search > article > form)
+> input[type=submit] {
     background: var(--principal-neutral);
     border: none;
     border-radius: var(--border-radius);
@@ -345,6 +350,50 @@ main.search > article > section {
     gap: var(--size-xl);
 }
 
+main.editRecipe {
+    min-width: 300px;
+    width: 600px;
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+}
+main.editRecipe > form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-l);
+    margin-top: var(--size-xl);
+    margin-bottom: var(--size-xl);
+}
+main.editRecipe > form > label {
+    display: none;
+}
+main.editRecipe > form > label:first-child {
+    display: block;
+}
+main.editRecipe > form > :is(input, textarea) {
+    font-family: 'Nunito', 'Arial';
+}
+main.editRecipe > form > input#recipeName {
+    font-weight: 600;
+    font-size: var(--size-xl);
+    background: var(--secondary-pastel);
+    border: none;
+    border-bottom: var(--border) var(--principal-neutral);
+    padding-bottom: var(--size-m);
+    padding-left: var(--size-m);
+}
+main.editRecipe > form > input#recipeName:focus-visible {
+    outline: none;
+}
+main.editRecipe > form > textarea#recipeDescription {
+    font-size: var(--size-l);
+    border: none;
+    background: var(--secondary-pastel);
+}
+main.editRecipe > form > textarea#recipeDescription:focus-visible {
+    outline: none;
+}
+
 footer {
     display: flex;
     flex-direction: column;

From 490de05036a99efd0b59ed898a2931b398fb9c84 Mon Sep 17 00:00:00 2001
From: Capelier-Marla <marla.capelier@etu.univ-amu.fr>
Date: Thu, 26 Jan 2023 16:37:31 +0100
Subject: [PATCH 2/3] styling buttons and part alim section

---
 Views/recipe/edit.php |  9 ++++-----
 static/style.css      | 22 ++++++++++++++++++++++
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/Views/recipe/edit.php b/Views/recipe/edit.php
index 36fc175..99ae565 100644
--- a/Views/recipe/edit.php
+++ b/Views/recipe/edit.php
@@ -51,13 +51,13 @@ if ($O_recipe === null) {
 
             <legend>Particularités du plat&nbsp;:</legend>
             <input type="checkbox" name="part_Vegan" id="recipeVegan" <?= in_array("Végan", $A_parts)? "checked":"" ?> >
-            <label for="recipeVegan">Végan</label>
+            <label for="recipeVegan" class="labelParticularite">Végan</label>
             <input type="checkbox" name="part_LactoseFree" id="recipeLactoseFree" <?= in_array("Sans lactose", $A_parts)? "checked":"" ?> >
-            <label for="recipeLactoseFree">Sans lactose</label>
+            <label for="recipeLactoseFree" class="labelParticularite">Sans lactose</label>
             <input type="checkbox" name="part_GlutenFree" id="recipeGlutenFree" <?= in_array("Sans gluten", $A_parts)? "checked":"" ?> >
-            <label for="recipeGlutenFree">Sans gluten</label>
+            <label for="recipeGlutenFree" class="labelParticularite">Sans gluten</label>
 
-            </br>
+                </br>
 
             <label for="recipeTime">Temps de préparation&nbsp;:</label>
             <input type="number" name="recipeTime" id="recipeTime" min="5" max="1500" step="5" placeholder="Temps de préparation" value="<?= $I_time ?>" required>
@@ -145,7 +145,6 @@ if ($O_recipe === null) {
 </main>
 
 <script>
-console.log("a");
 numberOfIngredients = <?= $numberOfIngredients ?>;
 const buttonIngredientPlus = document.querySelector("#recipeButtonIngredientPlus");
 const buttonIngredientLess = document.querySelector("#recipeButtonIngrdientLess");
diff --git a/static/style.css b/static/style.css
index 2cd4e1a..a640109 100644
--- a/static/style.css
+++ b/static/style.css
@@ -393,6 +393,28 @@ main.editRecipe > form > textarea#recipeDescription {
 main.editRecipe > form > textarea#recipeDescription:focus-visible {
     outline: none;
 }
+main.editRecipe > form > section > h1 {
+    color: var(--principal-neutral);
+    font-size: var(--size-xl);
+    padding-bottom: var(--size-m);
+}
+main.editRecipe > form > section > :not(label.labelParticularite, h1) {
+    margin-left: var(--size-l);
+}
+main.editRecipe > form > section > button {
+    margin-top: var(--size-m);
+    width: var(--size-xl);
+    height: var(--size-xl);
+    background: var(--principal-neutral);
+    border-radius: var(--size-s);
+    box-shadow: var(--shadow);
+    border: none;
+    color: var(--secondary-pastel);
+}
+main.editRecipe > form > section > button:disabled {
+    background: var(--grey-light);
+    color: var(--grey-dark);
+}
 
 footer {
     display: flex;

From f808abad8e0d31e98d74c705c94d022e0146f5b1 Mon Sep 17 00:00:00 2001
From: Capelier-Marla <marla.capelier@etu.univ-amu.fr>
Date: Thu, 26 Jan 2023 16:46:22 +0100
Subject: [PATCH 3/3] styled button

---
 static/style.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/static/style.css b/static/style.css
index a640109..6fdc592 100644
--- a/static/style.css
+++ b/static/style.css
@@ -415,6 +415,19 @@ main.editRecipe > form > section > button:disabled {
     background: var(--grey-light);
     color: var(--grey-dark);
 }
+main.editRecipe > form > input[type=submit] {
+    color: var(--secondary-pastel);
+    font-size: var(--size-xl);
+    background: var(--principal-neutral);
+    height: var(--size-max);
+    border-radius: var(--border-radius);
+    border: none;
+    padding-left: var(--size-max);
+    padding-right: var(--size-max);
+    margin-top: var(--size-xl);
+    width: fit-content;
+}
+
 
 footer {
     display: flex;