Fixing css form page (#73)

* blocked can not block to go under scale 1 * fixing image zoom with new library * fixing modal picture overlaping z-index * fix lint * fix lint * fix lint * fix lint * fix lint * Fixing progress bar but problem in phone mode * fix carousel form page * missing card caroussel error * fix lint * fix lint * fix lint
ai-cfia · Jun 19, 2024 · 5456464 · 5456464
1 parent 96a14c0
commit 5456464
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 93 deletions.
diff --git a/src/Components/Carousel/Carousel.css b/src/Components/Carousel/Carousel.css
@@ -3,15 +3,44 @@
   display: flex;
   width: 100%;
   height: 100%;
+  align-content: center;
 }
 
 .main-img{
   width: 100%;
-  max-width: 750px;
-  max-height: 950px;
+  max-width: 400px;
+  min-width: 150px;
   height: auto;
-  align-content: center;
   z-index: 1;
+  margin-top: 30px;
+}
+
+@media only screen and (min-width: 1231px) {
+  .carousel-wrapper {
+    position: fixed;
+    display: grid;
+    grid-template-areas:
+      "main main main"
+      ".  carousel  .";
+    grid-template-rows: 60% 30%;
+    align-content: center;
+    justify-content: center;
+    gap: 70px;
+  }
+}
+
+
+@media only screen and (max-width: 1230px) {
+  .carousel-wrapper {
+    display: grid;
+    grid-template-areas:
+      "main main main"
+      ".  carousel  .";
+    grid-template-rows: 60% 30%;
+    align-content: center;
+    justify-content: center;
+    gap: 70px;
+  }
 }
 
 .carousel-wrapper {
@@ -23,43 +52,47 @@
   align-content: center;
 }
 
+
 .carousel {
+  position:static;
   grid-area: carousel;
-  width: 100px;
-  display: flex;
+  width:auto;
+  display:inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
+  z-index: 5;
 }
 .carousel-img {
   border: solid 2px #ccc0;
   display: flex;
   transition: all 750ms linear;
   width: 100%;
+  max-width: 150px;
   height: fit-content;
-  max-height: 130px;
+  max-height: 90px;
   object-fit: contain;
   z-index: 4;
 }
 
 .carousel-img.current {
-  border: solid 2px #ccc;
+  border: solid 4px #bab9b9;
 }
 
 /* Next & previous buttons */
 .prev,
 .next {
   cursor: pointer;
-  width: auto;
-  margin: auto;
-  padding: 16px;
+  max-width: 10px;
+  height: 40px;
   font-weight: bold;
+  padding: 10px;
   font-size: 24px;
   transition: 0.6s ease;
   border-radius: 10px;
   user-select: none;
   z-index: 3;
-  margin-bottom: 15%;
+  margin-top: 50%;
 }
 
 /* Position the "next button" to the right */

diff --git a/src/Components/Carousel/Carousel.tsx b/src/Components/Carousel/Carousel.tsx
@@ -41,34 +41,36 @@ const Carousel: React.FC<CarouselProps> = ({ imgs }) => {
   };
 
   return (
-    <div className="carousel-wrapper">
-      <div className="curr-img">
-        <a className="prev" onClick={() => selectImg(currImg - 1)}>
-          &#10094;
-        </a>
-        <ImageZoomInOut
-          className="main-img"
-          imageUrl={imgList.length > 0 ? imgList[currImg].url : ""}
-          alt="no picture"
-        />
-        <a className="next" onClick={() => selectImg(currImg + 1)}>
-          &#10095;
-        </a>
-      </div>
-      <div className="carousel">
-        {imgList.map((img: imgObject) => {
-          return (
-            <img
-              src={img.url}
-              className={
-                "carousel-img" + (img.index == currImg ? " current" : " ")
-              }
-              alt={imgList[currImg].title}
-              key={img.index}
-              onClick={() => selectImg(img.index)}
-            ></img>
-          );
-        })}
+    <div>
+      <div className="carousel-wrapper">
+        <div className="curr-img">
+          <a className="prev" onClick={() => selectImg(currImg - 1)}>
+            &#10094;
+          </a>
+          <ImageZoomInOut
+            className="main-img"
+            imageUrl={imgList.length > 0 ? imgList[currImg].url : ""}
+            alt="No picture"
+          />
+          <a className="next" onClick={() => selectImg(currImg + 1)}>
+            &#10095;
+          </a>
+        </div>
+        <div className="carousel">
+          {imgList.map((img: imgObject) => {
+            return (
+              <img
+                src={img.url}
+                className={
+                  "carousel-img" + (img.index == currImg ? " current" : " ")
+                }
+                alt={imgList[currImg].title}
+                key={img.index}
+                onClick={() => selectImg(img.index)}
+              ></img>
+            );
+          })}
+        </div>
       </div>
     </div>
   );

diff --git a/src/Components/Header/Header.css b/src/Components/Header/Header.css
@@ -1,6 +1,6 @@
 header {
   width: 100%;
-  z-index: 2;
+  z-index: 997;
 }
 header nav {
   background-color: #05486c;

diff --git a/src/Components/ImageZoomInOut/ImageZoomInOut.css b/src/Components/ImageZoomInOut/ImageZoomInOut.css
@@ -1,21 +1,20 @@
 .btn-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  background-color: #fff;
-  border-radius: 8px;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  border: 1px solid black;
-}
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    top: 10px;
+    left: 10px;
+    z-index: 1;
+    border:1px solid black;
+  }
 
 .btn-container button {
-  border: none;
-  color: #737373;
-  background-color: #fff;
-  padding: 10px;
-  cursor: pointer;
-}
+    border: none;
+    color: #737373;
+    background-color: #fff;
+    padding: 10px;
+    cursor: pointer;
+  }
diff --git a/src/Components/Modal/Modal.css b/src/Components/Modal/Modal.css
@@ -9,7 +9,7 @@
   background-color: rgba(0, 0, 0, 0.7);
   justify-content: center;
   align-items: center;
-  z-index: 5;
+  z-index: 998;
 }
 
 .overlay.active {

diff --git a/src/Components/ProgressBar/ProgressBar.css b/src/Components/ProgressBar/ProgressBar.css
@@ -1,12 +1,12 @@
 .progress-bar-vertical {
-  flex-direction: column;
-  width: 30px;
-  height: 120%;
-  border-radius: 15px;
-  overflow: hidden;
-  position: sticky;
-  margin-top: 50px;
-}
+    flex-direction: column;
+    width: 35px;
+    height: 120%;
+    border-radius: 15px;
+    overflow: hidden;
+    position: sticky;
+    margin-top: 50px;
+    }
 
 .section {
   background-color: rgb(185, 185, 185);

diff --git a/src/Components/ProgressBar/ProgressBar.tsx b/src/Components/ProgressBar/ProgressBar.tsx
@@ -48,7 +48,6 @@ const ProgressBar = ({ sections }: { sections: { label: string }[] }) => {
       color = "white";
     }
     element.style.boxShadow = "0 0 10px 5px " + color;
-
     setTimeout(() => {
       element.style.boxShadow = "none";
     }, 500);

diff --git a/src/Pages/FormPage/FormPage.css b/src/Pages/FormPage/FormPage.css
@@ -2,37 +2,36 @@
   display: grid;
   justify-content: space-between;
   padding: 0 10px;
+  grid-template-columns: '1fr auto';
+  grid-gap: '1rem';
+  align-items: 'start';
 }
 
-@media only screen and (min-width: 850px) {
+@media only screen and (min-width: 1231px) {
   .formPage-container {
     grid-template-areas:
+      "pics data progress-bar";
+    grid-template-columns:  40% 50% 5%;
+  }
+}
+
+@media only screen and (max-width: 1230px) {
       "pics data"
       "pics open-icon"
       "progress-bar"; /* Add a new row for the open-icon */
     grid-template-columns: 40% 50% 5%;
   }
 }
 
-@media only screen and (max-width: 850px) {
-  .formPage-container {
-    grid-template-areas:
-      "pics"
-      "data"
-      "progress";
-    justify-content: center;
-  }
-}
-
-.formPage-container {
-  grid-template-columns: "1fr auto";
-  grid-gap: "1rem";
-  align-items: "start";
-}
-
 .pic-container {
   grid-area: pics;
+  margin-left: 10%;
+}
+
 }
+.progress-wrapper {
+  grid-area: progress-bar;
+  right: 0;
 
 @media (prefers-color-scheme: dark) {
   .open-icon {
@@ -64,14 +63,14 @@
 
 .data-container label {
   text-align: left;
-  margin-left: 30px;
+  margin-left: 20px;
 }
 
 .textbox-container {
   display: flex; /* Enable flexbox layout */
   justify-content: left; /* Center horizontally within the container */
   align-items: center; /* Center vertically within the container */
-  width: 100%; /* Make the container take up the full width */
+  width: 45vw; /* Make the container take up the full width */
   margin-left: 20px;
   flex-direction: row;
 }
@@ -85,7 +84,7 @@ textarea {
   border: 1px solid #ccc;
   border-radius: 10px;
   box-sizing: border-box;
-  width: 300px;
+  width: 100rem;
   height: auto;
   min-height: 40px;
   max-height: 97px;
@@ -113,10 +112,10 @@ textarea {
   color: darkgrey;
 }
 
-.show-more-container {
-  margin-left: 210px;
-  margin-right: -30px;
-  margin-top: -5px;
+.show-more-container{
+  display: flex-end;
+  width: 45vw;
+  align-self: end;
 }
 
 .data-section {

diff --git a/src/Pages/FormPage/FormPage.tsx b/src/Pages/FormPage/FormPage.tsx
@@ -352,7 +352,6 @@ const FormPage = () => {
     console.log("Validating form inputs... ");
     const allApproved = false;
     // Itérer à travers chaque section et chaque input pour vérifier et mettre à jour l'état d'approbation
-
     setData(data.copy()); // Mettre à jour l'état pour refléter les changements
     return allApproved;
   };