css et responsive ok et selection des potions ok

WildCodeSchool-2023-09 · Nov 8, 2023 · edd96ab · edd96ab
1 parent 124fcd9
commit edd96ab
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -1,13 +1,14 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 html,
 body {
   margin: 0;
   background-color: #e6d7fd;
 }
-
+* {
+  box-sizing: content-box;
+}
 .input-searchbar {
   &:focus-within,
   &:hover {
@@ -303,7 +304,7 @@ footer {
   }
 }
 #bg {
-  height: 100vh;
+  height: auto;
   background-image: url("./assets/potionclassroom.png");
   background-size: cover;
   background-repeat: no-repeat;
@@ -316,6 +317,8 @@ footer {
   text-align: center;
   width: 100%;
   height: 50vh;
+  position: relative;
+  top: 80px;
   background-image: url("./assets/potionclassroom-animation-ok.gif");
   background-size: contain;
   background-position: center;
@@ -331,7 +334,7 @@ footer {
 #bgFalse {
   text-align: center;
   width: 100%;
-  height: 130%;
+  height: 50vh;
   background-image: url("./assets/potionclassroom-animation-false.gif");
   background-size: contain;
   background-position: center;
@@ -384,3 +387,11 @@ img {
 .bonus {
   justify-content: center;
 }
+.ingredients {
+  position: relative;
+  top: -80px;
+  @media screen and (max-width: 450px) {
+    position: relative;
+    top: 0px;
+  }
+}
diff --git a/frontend/src/components/Ingredients.jsx b/frontend/src/components/Ingredients.jsx
@@ -57,7 +57,7 @@ function Ingredients({
   return (
     <button
       type="button"
-      className="flex bg-purple-heart-500 rounded disabled:bg-purple-heart-900 text-white font-irish w-full h-full justify-center items-center z-10"
+      className="flex bg-purple-heart-500 rounded disabled:bg-purple-heart-900 text-white font-irish w-full h-full justify-center items-center z-10 "
       onClick={() => {
         isTrue();
         handleClick();

diff --git a/frontend/src/components/Jeu.jsx b/frontend/src/components/Jeu.jsx
@@ -91,12 +91,12 @@ function Jeu() {
   const gainScore = Math.ceil(200 / ingredientsPotionLength);
 
   return (
-    <div id="bg" className="w-full flex justify:center ">
+    <div id="bg" className="w-full h-full flex justify:center  ">
       <div
-        className="  h-full w-full flex flex-col items-center p-3 justify-around max-sm:justify-normal
+        className="  h-full w-full flex flex-col items-center  justify-around max-sm:justify-normal max-sm:pt-2
       "
       >
-        <div className=" shadow-white-100 shadow-2xl bg-purple-heart-300 rounded-2xl  w-72 justify-center  flex flex-col max-sm:w-22 max-sm:h-8">
+        <div className=" shadow-white-100 shadow-2xl bg-purple-heart-300 rounded-2xl mt-2 w-72 justify-center  flex flex-col max-sm:w-22 max-sm:h-8">
           <h2 className="text-black text-center  text-xl font-irish max-sm:text-xs  ">
             You must make this potion
           </h2>
@@ -107,7 +107,7 @@ function Jeu() {
         {pV.length !== 0 && score !== 200 ? (
           <>
             <div
-              className="flex justify-between w-5/6  p-3 max-sm:w-full max-sm:h-48 items-center
+              className="flex justify-between w-5/6 h-auto  max-sm:w-full max-sm:h-48 items-center
   
         "
             >
@@ -134,7 +134,7 @@ function Jeu() {
                 <img src={imgIngredient} alt={imgIngredient} />
               </span>
               <div
-                className="text-white h-48 w-72 p-10 rounded-2xl bg-purple-heart-500 flex flex-col  gap-10 justify-center
+                className="text-white h-44 w-72 p-4 rounded-2xl bg-purple-heart-500 flex flex-col  gap-10 justify-center
           max-sm:w-28 max-sm:h-16 max-sm:p-0 max-sm:gap-0 align-middle"
               >
                 <div className="flex flex-row justify-around max-sm:justify-center">
@@ -158,11 +158,11 @@ function Jeu() {
             <span className="w-full ">
               <Chaudron bg={bg} />
             </span>
-            <div className=" flex flex-wrap justify-center  ">
+            <div className=" ingredients flex flex-wrap justify-center max-sm:text-xs ">
               {allIngredients?.map((ingredient) => (
                 <div
                   key={ingredient}
-                  className="flex flex-wrap w-56 h-10 rounded m-2 max-sm:w-36 inset-1"
+                  className="flex flex-wrap w-56 h-10 rounded m-2 max-sm:w-36 "
                 >
                   <Ingredients
                     ingredient={ingredient}