diff --git a/src/components/IncompleteEvent/IncompleteEvent.jsx b/src/components/IncompleteEvent/IncompleteEvent.jsx
index 84dc2a9..b8e3355 100644
--- a/src/components/IncompleteEvent/IncompleteEvent.jsx
+++ b/src/components/IncompleteEvent/IncompleteEvent.jsx
@@ -3,13 +3,18 @@ import styles from "./IncompleteEvent.module.css";
function IncompleteEvent() {
const incompleteEvents = [
- { title: "Événement A", tasks: "Préparation des flyers" },
- { title: "Événement B", tasks: "Réservation de la salle" },
- { title: "Événement C", tasks: "Communication sur les réseaux" },
- { 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" },
- ];
+ { title: "Événement A", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
+ "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
+ { title: "Événement B", tasks: ["Réservation de la salle", "Vérification du matériel"] },
+ { title: "Événement C", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm"] },
+ { title: "Événement D", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm"] },
+ { title: "Événement E", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
+ "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
+ { title: "Événement F", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
+ "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
+ { title: "Événement G", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
+ "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
+];
return (
@@ -18,7 +23,11 @@ function IncompleteEvent() {
{incompleteEvents.map((event, index) => (
{event.title}
-
{event.tasks}
+
+ {event.tasks.map((task, taskIndex) => (
+ - {task}
+ ))}
+
))}
diff --git a/src/components/IncompleteEvent/IncompleteEvent.module.css b/src/components/IncompleteEvent/IncompleteEvent.module.css
index e56e1f1..b3f1d70 100644
--- a/src/components/IncompleteEvent/IncompleteEvent.module.css
+++ b/src/components/IncompleteEvent/IncompleteEvent.module.css
@@ -2,7 +2,7 @@
width: 100%;
}
-.rightBlock > h2 {
+.rightBlock>h2 {
font-size: 29px;
}
@@ -10,13 +10,23 @@
display: flex;
flex-direction: row;
gap: 10px;
- margin-top: 15px;
+ margin-top: 5px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 10px;
scroll-behavior: smooth;
}
+.eventCard ul {
+ align-items: center;
+ margin-left: 8%;
+}
+
+.eventCard ul li {
+ text-align: left;
+ list-style-type: circle;
+}
+
.eventsContainer::-webkit-scrollbar {
height: 8px;
}
@@ -38,7 +48,9 @@
.eventCard {
min-width: calc((100% - 20px) / 3);
max-width: calc((100% - 20px) / 3);
- flex-shrink: 0;
+ min-height: 250px;
+ max-height: 250px;
+ overflow-y: auto;
padding: 10px;
text-align: center;
padding-bottom: 200px;
@@ -46,31 +58,78 @@
opacity: 0;
transform: translateX(20px);
animation: slideInEvent 1s ease forwards;
+
+ flex-shrink: 1;
+ padding: 10px;
+ text-align: center;
+ box-sizing: border-box;
}
-.eventCard:nth-child(1) { animation-delay: 0s; }
-.eventCard:nth-child(2) { animation-delay: 0.1s; }
-.eventCard:nth-child(3) { animation-delay: 0.2s; }
-.eventCard:nth-child(4) { animation-delay: 0.3s; }
-.eventCard:nth-child(5) { animation-delay: 0.4s; }
-.eventCard:nth-child(6) { animation-delay: 0.5s; }
+.eventCard:nth-child(1) {
+ animation-delay: 0s;
+}
-.eventCard > h3 {
+.eventCard:nth-child(2) {
+ animation-delay: 0.1s;
+}
+
+.eventCard:nth-child(3) {
+ animation-delay: 0.2s;
+}
+
+.eventCard:nth-child(4) {
+ animation-delay: 0.3s;
+}
+
+.eventCard:nth-child(5) {
+ animation-delay: 0.4s;
+}
+
+.eventCard:nth-child(6) {
+ animation-delay: 0.5s;
+}
+
+.eventCard>h3 {
font-size: 24px;
}
@keyframes slideInEvent {
- from { opacity: 0; transform: translateX(20px); }
- to { opacity: 1; transform: translateX(0); }
+ from {
+ opacity: 0;
+ transform: translateX(20px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
}
@media screen and (max-width: 760px) {
.eventCard {
- width: 100%;
- height: 200px;
+ min-width: 100%;
+ min-height: 200px;
+ max-height: fit-content;
+ padding-bottom: 0px;
}
.eventCard h3 {
font-size: 17px;
}
-}
+
+ .eventsContainer {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ max-height: 300px;
+ margin-top: 15px;
+ height: fit-content;
+ overflow-y: auto;
+ padding-bottom: 0px;
+ scroll-behavior: smooth;
+ }
+
+ .rightBlock>h2 {
+ font-size: 18px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/PendingMembers/PendingMembers.module.css b/src/components/PendingMembers/PendingMembers.module.css
index 35a892e..9eaef39 100644
--- a/src/components/PendingMembers/PendingMembers.module.css
+++ b/src/components/PendingMembers/PendingMembers.module.css
@@ -10,13 +10,14 @@
display: flex;
flex-direction: column;
gap: 10px;
- margin-top: 0px;
+ margin-top: 20px;
max-height: 185px;
overflow-y: auto;
padding-right: 5px;
scroll-behavior: smooth;
}
+
.membersContainer::-webkit-scrollbar {
width: 8px;
}
@@ -70,4 +71,11 @@
.membersContainer {
max-height: 200px;
}
+ .rightBlock > h2{
+ font-size:18px;
+ }
+
+ .memberCard p{
+ font-size: 15px;
+ }
}
diff --git a/src/components/chart/ParticipationChart.jsx b/src/components/chart/ParticipationChart.jsx
index 7648bf1..7ebd731 100644
--- a/src/components/chart/ParticipationChart.jsx
+++ b/src/components/chart/ParticipationChart.jsx
@@ -8,7 +8,7 @@ Chart.register(ArcElement);
function participationChart() {
const [selected, setSelected] = useState("3");
- const [participationRate, setParticipationRate] = useState(89);
+ const [participationRate, setParticipationRate] = useState(78);
const chartData = {
labels: ["Progress", "Background"],
diff --git a/src/components/chart/ParticipationChart.module.css b/src/components/chart/ParticipationChart.module.css
index 762ae0c..7fa3515 100644
--- a/src/components/chart/ParticipationChart.module.css
+++ b/src/components/chart/ParticipationChart.module.css
@@ -3,7 +3,9 @@
display: flex;
flex-direction: column;
align-items: center;
- height: fit-content;
+ height: calc(100vh - 260px);
+ /* Exemple: calc(100vh - 60px) */
+ margin-bottom: auto;
}
.participationHeader {
@@ -14,6 +16,8 @@
.partiText {
display: flex;
+ width: 100%;
+ flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 2%;
@@ -29,6 +33,8 @@
.chartContainer {
max-width: 80%;
+ width: 400px;
+ height: auto;
margin: 0 auto;
position: relative;
animation: slideEvent2 2s;
@@ -54,13 +60,27 @@
}
@keyframes slideEvent2 {
- from { opacity: 0; transform: translateX(-20px); }
- to { opacity: 1; transform: translateX(0); }
+ from {
+ opacity: 0;
+ transform: translateX(-20px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
}
@keyframes slideInEvent {
- from { opacity: 0; transform: translateX(20px); }
- to { opacity: 1; transform: translateX(0); }
+ from {
+ opacity: 0;
+ transform: translateX(20px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
}
.formControl {
@@ -83,7 +103,18 @@
.partiText label {
text-align: center;
}
- .leftBlock{
- width:100%;
+
+ .leftBlock {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ height: fit-content;
+ margin-bottom: auto;
+ margin-top: 30px;
}
-}
+ .chartContainer{
+ height:fit-content;
+ }
+
+}
\ No newline at end of file
diff --git a/src/layout.jsx b/src/layout.jsx
index 4689a4e..339734c 100644
--- a/src/layout.jsx
+++ b/src/layout.jsx
@@ -12,7 +12,7 @@ function Layout(){
const { user, loading } = useContext(AuthContext);
if (loading) return Loading
;
- if (!user) return ;
+ // if (!user) return ;
return (
diff --git a/src/pages/Stat/StatPage.jsx b/src/pages/Admin/AdminPage.jsx
similarity index 88%
rename from src/pages/Stat/StatPage.jsx
rename to src/pages/Admin/AdminPage.jsx
index 6cb0816..71ad4be 100644
--- a/src/pages/Stat/StatPage.jsx
+++ b/src/pages/Admin/AdminPage.jsx
@@ -1,10 +1,10 @@
import React, { useState } from "react";
-import styles from "./StatPage.module.css";
+import styles from "./AdminPage.module.css";
import ParticipationChart from "../../components/chart/ParticipationChart.jsx";
import IncompleteEvents from "../../components/IncompleteEvent/IncompleteEvent.jsx";
import PendingMembers from "../../components/PendingMembers/PendingMembers.jsx";
-function StatPage() {
+function AdminPage() {
const [selected, setSelected] = useState("3");
const [participationRate, setParticipationRate] = useState(89);
@@ -23,4 +23,4 @@ function StatPage() {
);
}
-export default StatPage;
+export default AdminPage;
diff --git a/src/pages/Stat/StatPage.module.css b/src/pages/Admin/AdminPage.module.css
similarity index 100%
rename from src/pages/Stat/StatPage.module.css
rename to src/pages/Admin/AdminPage.module.css
diff --git a/src/router.js b/src/router.js
index 02af71a..f54d582 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,12 +2,11 @@ import { createBrowserRouter } from "react-router";
import Layout from "./layout.jsx";
import HomePage from "./pages/Home/HomePage";
import LoginPage from "./pages/Login/LoginPage";
-import StatPage from "./pages/Stat/StatPage";
import RegisterPage from "./pages/Register/RegisterPage.jsx";
import VolunteersPage from "./pages/Volunteers/VolunteersPage";
import ProfilePage from "./pages/Profile/ProfilePage";
import EventsPage from "./pages/Events/EventsPage.jsx";
-
+import AdminPage from "./pages/Admin/AdminPage.jsx";
const router = createBrowserRouter([
{
@@ -28,7 +27,7 @@ const router = createBrowserRouter([
},
{
path: "/admin",
- Component:StatPage,
+ Component:AdminPage,
},
{
path:"/profile",
@@ -42,10 +41,6 @@ const router = createBrowserRouter([
path: "/volunteers",
Component: VolunteersPage,
},
- {
- path: "/stat",
- Component:StatPage,
- },
]
}
])