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}

+
))}
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, - }, ] } ])