add responsive

src/index.css

@@ -43,7 +43,7 @@ body {
 }
 
 
-.glassCard {
+/*.glassCard {
   width: 100%;
   padding: 10px;
   height: fit-content;
@@ -59,8 +59,18 @@ body {
           inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
   position: relative;
   overflow: hidden;
-}
+}*/
 
+
+/* style a montrer a giovanni prcq il est + bo */
+.glassCard {
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 15px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
 h1 {
   font-size: 3.2em;
   line-height: 1.1;

src/pages/Stat/StatPage.jsx

@@ -1,4 +1,3 @@
-import React, { useState } from "react";
 import Dropdown from 'react-bootstrap/Dropdown';
 import { Doughnut } from "react-chartjs-2";
 import { Chart, ArcElement } from "chart.js";
@@ -6,6 +5,8 @@ import styles from "./StatPage.module.css";
 import Button from "./../../components/ui/button/button";
 import { readUsedSize } from "chart.js/helpers";
 import { MenuItem, Select, FormControl, InputLabel } from "@mui/material";
+import React, { useState, useEffect, useRef } from "react";
+
 
 Chart.register(ArcElement);
 
@@ -21,9 +22,7 @@ function StatPage() {
     { title: "Événement D", tasks: "Communication sur les réseaux" },
     { title: "Événement E", tasks: "Communication sur les réseaux" },
     { title: "Événement F", tasks: "Communication sur les réseaux" },
-
   ];
-
   const pendingMembers = [
     { name: "Antoine Ordonneau" },
     { name: "Giovanni Josserand" },
@@ -37,11 +36,9 @@ function StatPage() {
   const handleValidate = (name) => {
     console.log(`Valider ${name}`);
   };
-
   const handleReject = (name) => {
     console.log(`Refuser ${name}`);
   };
-
   const chartData = {
     labels: ["Progress", "Background"],
     datasets: [
@@ -50,13 +47,12 @@ function StatPage() {
         backgroundColor: ["#1e60f9ff", "#ffffffff"],
         borderWidth: 0,
         weight: 10,
-        cutout: "95%",
+        cutout: "93%",
         circumference: 360,
         rotation: -90,
       },
     ],
   };
-
   const chartOptions = {
     responsive: true,
     plugins: {
@@ -72,23 +68,24 @@ function StatPage() {
       animateRotate: true,
     },
   };
-
   return (
     <div className={styles.container}>
       <div className={`${styles.leftBlock} glassCard`}>
         <div className={styles.participationHeader}>
           <div className={`${styles.partiText} glassCard`}>
             <label htmlFor={styles.months}>Taux de participation depuis :</label>
-            
+            <div className={styles.formControl}>
-            <FormControl>
+            <FormControl className={styles.formDesign}>
               <Select
     value={selected}
-    onChange={(e) => setSelected(e.target.value)}
+    onChange={(e) => 
+      setSelected(e.target.value)
+      }
     sx={{
       width: "100px",
       height: "35px",
       fontSize: "19px",
-      paddingBottom:"2.5px",
+      paddingBottom:"-2px",
       
       "& .MuiOutlinedInput-notchedOutline": {
         border: "none",
@@ -106,7 +103,7 @@ function StatPage() {
         sx: {
           className: "glassCard",
           borderRadius:"7px",
-          background: "rgba(255, 255, 255, 0.65)",
+          //background: "rgba(255, 255, 255, 0.65)",
           width: "100px",
           maxWidth: "100px",
           
@@ -121,6 +118,7 @@ function StatPage() {
     <MenuItem value="12" sx={{ fontSize: "18px" }}>12 mois</MenuItem>
   </Select>
 </FormControl>
+</div>
 
           </div>
         </div>

src/pages/Stat/StatPage.module.css

@@ -7,15 +7,7 @@
   gap: 20px;
 }
 
-/* style a montrer a giovanni prcq il est + bo */
+
-/*.glassCard {
-  background: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(10px);
-  border-radius: 10px;
-  padding: 15px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}*/ 
 
 .block {
   border-radius: 10px;
@@ -263,7 +255,6 @@
   animation: slideInMember 0.5s ease forwards;
 }
 
-/* Animation différée pour chaque carte de membre */
 .memberCard:nth-child(1) {
   animation-delay: 0s;
 }
@@ -304,49 +295,60 @@
 @media screen and (max-width: 760px) {
   .container {
     flex-direction: column;
-    padding: 10px;
+     width:100%;
+     padding: 0 0 0 0;
+  /*  padding: 10px;*/
   }
   
   .leftBlock {
     width: 100%;
-    margin-bottom: 20px;
+    margin-top:20px;
     height: fit-content;
   }
   
   .rightSection {
     width: 100%;
+    margin:0 0 0 0;
+    margin-bottom: 15px;
+  }
+  .rightBlock{
+    width:100%;
+    margin-bottom: 0px;
   }
 
-  
+  .rightBlock h2 {
+  font-size: 20px;
+}
   
   .eventCard {
     width: 100%;
+    height:200px;
+  }
+  .eventCard h3{
+    font-size:17px;
   }
-  
   .donutChart {
     width: 120px;
     height: 120px;
   }
-  
-  .memberCard {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-  }
-  
-  .buttonGroup {
-    width: 100%;
-    justify-content: space-between;
-  }
-  
-  .validateButton,
-  .rejectButton {
-    flex: 1;
-    text-align: center;
-    padding: 8px;
-  }
-
   .membersContainer {
-    max-height: 300px;
+    max-height: 200px;
   }
-}
+  .partiText{
+    flex-direction: column;
+    justify-content: center;
+  }
+  .partiText label{
+    text-align: center;
+  }
+  .formControl {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .formDesign {
+    margin: 0 auto;
+    width: fit-content;
+  }
+    }