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

Merge pull request #133 from ThomasRubini/css_recipe_view

Browse Source 
Css recipe view
This commit is contained in:
Marla 2023-01-26 18:31:09 +01:00 committed by GitHub
commit b5f4fc3d1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 155 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
Views/appreciations/view_all.php
View File

@ -1,20 +1,21 @@
<?php
$O_recipe = $A_view["RECIPE"];
?>
<section>
<h1> Appréciations: </h1>
<section class="apprecitations">
<h2> Appréciations: </h2>
<form method="POST" action="/appr/create">
<label for="comment">Entrez votre commentaire :</label>
<input type="text" name="comment" id="comment" placeholder="Commentaire">
<label for="note">Laissez une note :</label>
<input type="radio" name="note" id="note" value="0"> 0
<input type="radio" name="note" id="note" value="1" title="1"> 1
<input type="radio" name="note" id="note" value="2" title="2"> 2
<input type="radio" name="note" id="note" value="3" title="3" required> 3
<input type="radio" name="note" id="note" value="4" title="4"> 4
<input type="radio" name="note" id="note" value="5" title="5"> 5
<label for="comment">Ajoutez un commentaire :</label>
<textarea type="text" name="comment" id="comment" placeholder="Votre commentaire"></textarea>
<section class="appreciationNoteValue">
<label for="note">Laissez une note :</label>
<input type="radio" name="note" id="note" value="0"> 0
<input type="radio" name="note" id="note" value="1" title="1"> 1
<input type="radio" name="note" id="note" value="2" title="2"> 2
<input type="radio" name="note" id="note" value="3" title="3" required> 3
<input type="radio" name="note" id="note" value="4" title="4"> 4
<input type="radio" name="note" id="note" value="5" title="5"> 5
</section>
<input type="hidden" name="recipe_id" value="<?= $O_recipe->I_ID ?>">
<input type="submit" value="Envoyer">

4
Views/appreciations/view_single.php
View File

@ -6,8 +6,8 @@
<header>
<img src="<?= $O_appr->getAuthor()->getProfilePicLink() ?>" alt="profile picture">
<h3> <?= $O_appr->getAuthor()->S_USERNAME ?> </h3>
<p> <?= $O_appr->I_NOTE ?> </p>
<p> <?= $O_appr->S_DATE ?> </p>
<p>Le <?= $O_appr->S_DATE ?> </p>
<p> <?= $O_appr->I_NOTE ?>/5 </p>
<?php if ($A_view["ADMIN"] || $A_view["USER_ID"] === $O_appr->I_AUTHOR_ID) { ?>
<a href="/appr/delete/<?= $O_appr->I_ID ?>">Supprimer l'appréciation</a>
<?php } ?>

2
Views/recipe/view.php
View File

@ -1,7 +1,7 @@
<?php
$O_recipe = $A_view["RECIPE"];
?>
<main class="hasAside">
<main class="hasAside recipeView">
<?php View::show("common/category_list") ?>
<article>
<img src="<?= $O_recipe->getImgLink() ?>" alt="Image d'illustration de la recette">

140
static/style.css
View File

@ -316,7 +316,8 @@ main.userView > form > label {
}
:is(main.userView > form,
main.search > article > form)
main.search > article > form,
main.recipeView > article > section > form)
> input[type=submit] {
background: var(--principal-neutral);
border: none;
@ -351,6 +352,143 @@ main.search > article > section {
gap: var(--size-xl);
}
main.recipeView > article {
max-width: 600px;
display: flex;
flex-direction: column;
gap: var(--size-xl);
}
main.recipeView > article > img {
min-width: 100%;
max-width: 100%;
max-height: 150px;
object-fit: none;
object-position: center;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
main.recipeView > article > section.infosRecette > header {
display: flex;
flex-direction: row;
border: none;
border-bottom: var(--border) var(--principal-neutral);
justify-content: space-between;
margin-bottom: var(--size-l);
align-items: baseline;
}
main.recipeView > article > section.infosRecette > header > h1 {
font-size: var(--size-max);
}
main.recipeView > article > section.infosRecette > header > p {
font-size: var(--size-l);
}
main.recipeView > article > section > h2 {
font-size: var(--size-xl);
border-bottom: var(--border) var(--principal-neutral);
margin-bottom: var(--size-l);
}
main.recipeView > article > section > :is(ul, ol) {
display: flex;
flex-direction: column;
gap: var(--size-s);
}
main.recipeView > article > section > :is(ul, ol) > li {
margin-left: var(--size-l);
}
main.recipeView > article > section > ul > li::marker {
content: "- ";
}
main.recipeView > article > p {
color: var(--grey-dark);
}
main.recipeView > article > section.buttonsEditRecipe {
display: flex;
flex-direction: row;
gap: var(--size-xl);
}
main.recipeView > article > section.buttonsEditRecipe > a {
display: flex;
align-items: center;
font-size: var(--size-l);
color: var(--secondary-pastel);
background: var(--principal-neutral);
height: calc(1.5 * var(--size-xl));
text-decoration: none;
border-radius: var(--border-radius);
padding-left: var(--size-m);
padding-right: var(--size-m);
box-shadow: var(--shadow);
}
main.recipeView > article > section {
display: flex;
flex-direction: column;
gap: var(--size-l);
}
main.recipeView > article > section > form {
display: flex;
flex-direction: column;
gap: var(--size-s);
}
main.recipeView > article > section > form > label {
display: none;
}
main.recipeView > article > section > form > label:first-child {
display: block;
font-size: var(--size-xl);
}
main.recipeView > article > section > form > textarea {
font-family: 'Nunito', 'Arial';
background: var(--grey-light);
border: none;
border-radius: var(--border-radius);
padding: var(--size-m);
font-size: var(--size-l);
}
main.recipeView > article > section > form > textarea:focus-visible {
outline: none;
}
main.recipeView > article > section > form > section.appreciationNoteValue {
display: flex;
flex-direction: row;
gap: var(--size-s);
}
main.recipeView > article > section.apprecitations > section {
background: var(--secondary-pastel);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
}
main.recipeView > article > section.apprecitations > section > header {
display: flex;
flex-direction: row;
gap: var(--size-m);
background: var(--grey-light);
padding: var(--size-m);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
align-items: baseline;
justify-content: space-between;
}
main.recipeView > article > section.apprecitations > section > :not(header) {
padding: var(--size-m);
}
main.recipeView > article > section.apprecitations > section > header > img {
width: var(--size-max);
height: var(--size-max);
border-radius: var(--size-m);
}
main.recipeView > article > section.apprecitations > section > header > a {
background: var(--principal-neutral);
border-radius: var(--border-radius);
color: var(--secondary-pastel);
text-decoration: none;
padding: var(--size-m);
}
main.editRecipe {
min-width: 300px;
width: 600px;