From 47dd94667ac612ff86efceb193258466001a837d Mon Sep 17 00:00:00 2001
From: Capelier-Marla <marla.capelier@etu.univ-amu.fr>
Date: Thu, 26 Jan 2023 18:28:57 +0100
Subject: [PATCH] styled apprectation

---
 Views/appreciations/view_all.php    |  2 +-
 Views/appreciations/view_single.php |  4 +--
 static/style.css                    | 43 ++++++++++++++++++++++++++++-
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/Views/appreciations/view_all.php b/Views/appreciations/view_all.php
index e0211e4..0e75b83 100644
--- a/Views/appreciations/view_all.php
+++ b/Views/appreciations/view_all.php
@@ -1,7 +1,7 @@
 <?php
 $O_recipe = $A_view["RECIPE"];
 ?>
-<section>
+<section class="apprecitations">
     <h2> Appréciations: </h2>
     <form method="POST" action="/appr/create">
         <label for="comment">Ajoutez un commentaire :</label>
diff --git a/Views/appreciations/view_single.php b/Views/appreciations/view_single.php
index e90d13f..a9ae97d 100644
--- a/Views/appreciations/view_single.php
+++ b/Views/appreciations/view_single.php
@@ -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 } ?>
diff --git a/static/style.css b/static/style.css
index afcf60f..ab47e34 100644
--- a/static/style.css
+++ b/static/style.css
@@ -419,10 +419,15 @@ main.recipeView > article > section.buttonsEditRecipe > a {
     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-m);
+    gap: var(--size-s);
 }
 main.recipeView > article > section > form > label {
     display: none;
@@ -447,6 +452,42 @@ main.recipeView > article > section > form > section.appreciationNoteValue {
     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;