+
+
+
+
{name}
+
+
+
+
Préparation : {prep} minutes
+
Ingrédients :
{ingredients.map((element) => (
-
+
{element.name} : {element.quantity}
{element.unit} de {element.kcal} kcal
))}
-
-
- {instructions.map((inst) => (
-
- {inst.description}
-
- ))}
+
+ {instructions.map((inst, index) => (
+
+ Étape {index + 1} :
+ {inst.description}
+
+ ))}
+
);
diff --git a/frontend/src/pages/Recipe.jsx b/frontend/src/pages/Recipe.jsx
index 5a12c65..cbe1e0a 100644
--- a/frontend/src/pages/Recipe.jsx
+++ b/frontend/src/pages/Recipe.jsx
@@ -22,22 +22,24 @@ function Recipe({
-
{name}
-
{title}
+
+
{kcal} kcal / portion
{difficulty}
-
-
-
{kcal} kcal par personne
- {tag1 ?
{tag1}
: null}
- {tag2 ?
{tag2}
: null}
- {tag3 ?
{tag3}
: null}
-
-
+
+
+
+ {tag1 ?
{tag1}
: null}
+ {tag2 ?
{tag2}
: null}
+ {tag3 ?
{tag3}
: null}
+
+
diff --git a/frontend/src/pages/RecipeDetails.jsx b/frontend/src/pages/RecipeDetails.jsx
index 9fd9130..dcc4304 100644
--- a/frontend/src/pages/RecipeDetails.jsx
+++ b/frontend/src/pages/RecipeDetails.jsx
@@ -1,20 +1,15 @@
-import { Link, useLoaderData } from "react-router-dom";
+import { useLoaderData } from "react-router-dom";
import Detail from "./Detail";
import "./style/RecipeDetail.scss";
function RecipeDetails() {
const detail = useLoaderData();
return (
-
+
);
}
diff --git a/frontend/src/pages/style/RecipeDetail.scss b/frontend/src/pages/style/RecipeDetail.scss
index 9ab898b..0bda2fe 100644
--- a/frontend/src/pages/style/RecipeDetail.scss
+++ b/frontend/src/pages/style/RecipeDetail.scss
@@ -1,4 +1,11 @@
+@import "../../vars.scss";
+
.recipe-detail {
- display: flex;
- justify-content: center;
+ background: $white-color;
+ min-width: 300px;
+ max-width: 800px;
+ padding: 2rem;
+ border-radius: 1rem;
+ flex-direction: column;
+ margin: 1.5rem;
}
diff --git a/frontend/src/pages/style/RecipeList.scss b/frontend/src/pages/style/RecipeList.scss
index df5b6ad..03b2862 100644
--- a/frontend/src/pages/style/RecipeList.scss
+++ b/frontend/src/pages/style/RecipeList.scss
@@ -6,7 +6,7 @@
.filter {
margin-bottom: 1rem;
- margin: 0 0 1rem auto;
+ margin: 0 1rem 1rem auto;
select {
background-color: $green-color;
@@ -30,9 +30,10 @@
background-color: $white-color;
border-radius: 1.5rem;
min-height: 200px;
- min-width: 380px;
+ min-width: 300px;
max-width: 420px;
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);
+ margin: 0 1rem;
display: flex;
@@ -75,8 +76,9 @@
font-size: small;
}
- .level-recipe {
- text-align: right;
+ .recipe-difficult {
+ display: flex;
+ justify-content: space-between;
}
.link-to {
diff --git a/frontend/src/pages/style/detail.scss b/frontend/src/pages/style/detail.scss
new file mode 100644
index 0000000..24083b9
--- /dev/null
+++ b/frontend/src/pages/style/detail.scss
@@ -0,0 +1,43 @@
+@import "../../vars.scss";
+
+.lists-style {
+ list-style: none;
+}
+
+.detail-steps {
+ margin-top: 3rem;
+}
+
+.detail-ingrédients {
+ margin-top: 3rem;
+}
+
+.detail-image {
+ height: 300px;
+ width: 300px;
+ object-fit: cover;
+ border-radius: 1.5rem;
+ margin-top: 1rem;
+}
+
+.detail-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.detail-button {
+ padding: 0.5rem 1rem;
+ border-radius: 1rem;
+ background: $orange-color;
+ color: $white-color;
+}
+
+@media screen and (max-width: 400px) {
+ .detail-title {
+ font-size: 1.2rem;
+ }
+ .detail-prep {
+ font-size: 1.2rem;
+ }
+}
diff --git a/frontend/src/vars.scss b/frontend/src/vars.scss
index c3d025a..01b95ff 100644
--- a/frontend/src/vars.scss
+++ b/frontend/src/vars.scss
@@ -34,13 +34,13 @@ h6 {
.body-content {
display: flex;
- margin: 7rem auto 0 auto;
- width: calc(100% - 3em);
+ justify-content: center;
+ margin: 7rem auto 2.5rem auto;
}
@media screen and (min-width: 890px) {
.body-content {
- margin-top: 10rem;
+ margin: 9rem auto 2.5rem auto;
width: calc(100% - 10em);
}
}