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

Merge pull request #126 from ThomasRubini/css_edit_recipe

Browse Source 
Css edit recipe
This commit is contained in:
Marla 2023-01-26 16:46:55 +01:00 committed by GitHub
commit c43cbfb901
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 94 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Views/recipe/edit.php
View File

@ -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>
@ -54,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>
@ -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>

88
static/style.css
View File

@ -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,85 @@ 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;
}
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);
}
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;
flex-direction: column;