Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adapt incompleteEvents responsive

Browse Source
This commit is contained in:
p2405951
2025-12-17 16:12:32 +01:00
parent 4396c08ae6
commit c0ad7f3146
9 changed files with 146 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/IncompleteEvent/IncompleteEvent.jsx
+17 -8
View File
@@ -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 (
<div className={`${styles.rightBlock} glassCard`}>
@@ -18,7 +23,11 @@ function IncompleteEvent() {
{incompleteEvents.map((event, index) => (
<div key={index} className={`glassCard ${styles.eventCard}`}>
<h3>{event.title}</h3>
<p>{event.tasks}</p>
<ul className={styles.tasksList}>
{event.tasks.map((task, taskIndex) => (
<li key={taskIndex}>{task}</li>
))}
</ul>
</div>
))}
</div>
src/components/IncompleteEvent/IncompleteEvent.module.css
+73 -14
View File
@@ -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;
}
}
src/components/PendingMembers/PendingMembers.module.css
+9 -1
View File
@@ -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;
}
}
src/components/chart/ParticipationChart.jsx
+1 -1
View File
@@ -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"],
src/components/chart/ParticipationChart.module.css
+38 -7
View File
@@ -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;
}
}
src/layout.jsx
+1 -1
View File
@@ -12,7 +12,7 @@ function Layout(){
const { user, loading } = useContext(AuthContext);
if (loading) return <p>Loading</p>;
if (!user) return <Navigate to="/login" />;
// if (!user) return <Navigate to="/login" />;
return (
<div>
src/pages/Stat/StatPage.jsx → src/pages/Admin/AdminPage.jsx
+3 -3
View File
@@ -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;
src/pages/Stat/StatPage.module.css → src/pages/Admin/AdminPage.module.css
View File
src/router.js
+2 -7
View File
@@ -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,
},
]
}
])