DjalimSimaila/MVC_Recettes
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

form and recipe name style

Browse Source
This commit is contained in:
Capelier-Marla 2023-01-26 16:09:18 +01:00
parent a8ae987a1c
commit e407e71eef
2 changed files with 56 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
Views/recipe/edit.php
View File

@ -20,7 +20,7 @@ if ($O_recipe === null) {
} }
?> ?>
<main> <main class="editRecipe">
<?php <?php
if ($O_recipe !== null) { ?> if ($O_recipe !== null) { ?>
<a href="/recipe/view/<?= $O_recipe->I_ID ?>">Retour</a> <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"> <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"> <input type="file" name="recipeImage" id="recipeImage">
<label for="recipeName">Nom de la recette&nbsp;:</label> <label for="recipeName">Nom de la recette&nbsp;:</label>
<input type="text" name="recipeName" id="recipeName" placeholder="Nom du plat" value="<?= $S_name ?>" required> <input type="text" name="recipeName" id="recipeName" placeholder="Nom du plat" value="<?= $S_name ?>" required>
</br>
<label for="recipeDescription">Description de la recette</label> <label for="recipeDescription">Description de la recette</label>
</br> <textarea name="recipeDescription" id="recipeDescription" placeholder="Faites une description appétissante ! 😋"><?= $S_descr ?></textarea>
<textarea name="recipeDescription" id="recipeDescription"><?= $S_descr ?></textarea>
<section> <section>
<h1>Informations alimentaires</h1> <h1>Informations alimentaires</h1>
@ -133,6 +130,7 @@ if ($O_recipe === null) {
</ol> </ol>
<button type="button" disabled="disabled" id="recipeButtonInstructionLess">-</button>'; <button type="button" disabled="disabled" id="recipeButtonInstructionLess">-</button>';
$numberOfIngredients = 1; $numberOfIngredients = 1;
$numberOfInstructions = 1;
} }
?> ?>
<button type="button" id="recipeButtonInstructionPlus">+</button> <button type="button" id="recipeButtonInstructionPlus">+</button>
@ -147,6 +145,7 @@ if ($O_recipe === null) {
</main> </main>
<script> <script>
console.log("a");
numberOfIngredients = <?= $numberOfIngredients ?>; numberOfIngredients = <?= $numberOfIngredients ?>;
const buttonIngredientPlus = document.querySelector("#recipeButtonIngredientPlus"); const buttonIngredientPlus = document.querySelector("#recipeButtonIngredientPlus");
const buttonIngredientLess = document.querySelector("#recipeButtonIngrdientLess"); const buttonIngredientLess = document.querySelector("#recipeButtonIngrdientLess");

53
static/style.css
View File

@ -302,7 +302,10 @@ main.userView > form > label {
font-size: var(--size-l); 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); height: var(--size-l);
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: var(--size-l); padding: var(--size-l);
@ -311,7 +314,9 @@ main.userView > form > label {
font-size: var(--size-l); 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); background: var(--principal-neutral);
border: none; border: none;
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -345,6 +350,50 @@ main.search > article > section {
gap: var(--size-xl); 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 { footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;