From a028340cc109cad370c327b8c2797656d6ac12ba Mon Sep 17 00:00:00 2001 From: Antoine Ordonneau Date: Sun, 11 Jan 2026 12:56:14 +0100 Subject: [PATCH] fix admin et eventdetail --- .../IncompleteEvent/IncompleteEvent.jsx | 2 +- .../IncompleteEvent.module.css | 21 +--- .../PendingMembers/PendingMembers.jsx | 2 +- .../PendingMembers/PendingMembers.module.css | 16 +-- src/components/chart/ParticipationChart.jsx | 2 +- src/components/homePage/calendar.jsx | 4 +- src/components/homePage/calendar.module.css | 19 +--- src/components/homePage/eventList.jsx | 4 +- src/components/homePage/eventList.module.css | 20 +--- src/index.css | 47 ++++---- src/pages/eventDetail/eventDetail.jsx | 81 +++++++++----- src/pages/eventDetail/eventDetail.module.css | 104 +++++++++++++----- src/router.js | 2 +- 13 files changed, 166 insertions(+), 158 deletions(-) diff --git a/src/components/IncompleteEvent/IncompleteEvent.jsx b/src/components/IncompleteEvent/IncompleteEvent.jsx index b8e3355..3f9beb3 100644 --- a/src/components/IncompleteEvent/IncompleteEvent.jsx +++ b/src/components/IncompleteEvent/IncompleteEvent.jsx @@ -21,7 +21,7 @@ function IncompleteEvent() {

Événements incomplets

{incompleteEvents.map((event, index) => ( -
+

{event.title}

    {event.tasks.map((task, taskIndex) => ( diff --git a/src/components/IncompleteEvent/IncompleteEvent.module.css b/src/components/IncompleteEvent/IncompleteEvent.module.css index b3f1d70..0140936 100644 --- a/src/components/IncompleteEvent/IncompleteEvent.module.css +++ b/src/components/IncompleteEvent/IncompleteEvent.module.css @@ -28,21 +28,7 @@ } .eventsContainer::-webkit-scrollbar { - height: 8px; -} - -.eventsContainer::-webkit-scrollbar-track { - background: rgba(0, 0, 0, 0.1); - border-radius: 10px; -} - -.eventsContainer::-webkit-scrollbar-thumb { - background: rgba(30, 96, 249, 0.5); - border-radius: 10px; -} - -.eventsContainer::-webkit-scrollbar-thumb:hover { - background: rgba(30, 96, 249, 0.7); +display: none; } .eventCard { @@ -58,7 +44,6 @@ opacity: 0; transform: translateX(20px); animation: slideInEvent 1s ease forwards; - flex-shrink: 1; padding: 10px; text-align: center; @@ -89,6 +74,10 @@ animation-delay: 0.5s; } +.eventCard::-webkit-scrollbar { + display: none; +} + .eventCard>h3 { font-size: 24px; } diff --git a/src/components/PendingMembers/PendingMembers.jsx b/src/components/PendingMembers/PendingMembers.jsx index 27dace2..a931496 100644 --- a/src/components/PendingMembers/PendingMembers.jsx +++ b/src/components/PendingMembers/PendingMembers.jsx @@ -26,7 +26,7 @@ function pendingMembers() {

    Membres en attente de validation

    {pendingMembers.map((member, index) => ( -
    +

    {member.name}

    @@ -124,7 +124,7 @@ function Calendar() { {selectedDay && ( -
    +

    Événements du {formatDateLetter(selectedDay.date)}

    {selectedDay.events.length > 0 ? ( diff --git a/src/components/homePage/calendar.module.css b/src/components/homePage/calendar.module.css index 534d2c1..ef2f189 100644 --- a/src/components/homePage/calendar.module.css +++ b/src/components/homePage/calendar.module.css @@ -109,13 +109,6 @@ border-radius: 20px; padding: 15px; margin-top: 16px; - border: none; - background: rgb(255, 255, 255, 0.25); - box-shadow: - inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), - inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), - inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), - inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); } .eventBox ul { @@ -137,21 +130,11 @@ .glassCard { width: 45%; - max-height: 450px; + max-height: 100%; margin: 16px 0px 16px 0px; padding: 10px 20px 10px 20px; height: fit-content; - background: rgba(255, 255, 255, 0.65); - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(3px); - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.5), - inset 0 -1px 0 rgba(255, 255, 255, 0.1), - inset 0 0 8px 4px rgba(255, 255, 255, 0.4); overflow: scroll; - } .glassCard::-webkit-scrollbar{ diff --git a/src/components/homePage/eventList.jsx b/src/components/homePage/eventList.jsx index be7e903..f6e1de4 100644 --- a/src/components/homePage/eventList.jsx +++ b/src/components/homePage/eventList.jsx @@ -17,12 +17,12 @@ function eventList() { }, [events]); return ( -
    +

    Liste des événements à venir

    {sortedEvents.length > 0 ? (
      {sortedEvents.map((eventGroup) => ( -
    • +
    • {formatDateLetter(eventGroup.date)}
      diff --git a/src/components/homePage/eventList.module.css b/src/components/homePage/eventList.module.css index 0b27a64..b0598e2 100644 --- a/src/components/homePage/eventList.module.css +++ b/src/components/homePage/eventList.module.css @@ -1,20 +1,10 @@ .glassCard { width: 45%; - max-height: 450px; + max-height: 100%; margin: 16px 0px 16px 0px; padding: 10px 20px 10px 20px; height: fit-content; - background: rgba(255, 255, 255, 0.65); - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(3px); - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.5), - inset 0 -1px 0 rgba(255, 255, 255, 0.1), - inset 0 0 8px 4px rgba(255, 255, 255, 0.4); overflow: scroll; - } .glassCard::-webkit-scrollbar{ @@ -53,14 +43,6 @@ h2{ .eventGroup{ margin: 16px 0px 16px 0px; padding: 10px 20px 10px 20px; - border-radius: 20px; - border: none; - background: transparent; - box-shadow: - inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), - inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), - inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), - inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); } @media (max-width: 768px) { diff --git a/src/index.css b/src/index.css index a4fe9a0..be95afd 100644 --- a/src/index.css +++ b/src/index.css @@ -52,33 +52,30 @@ body { } -/*.glassCard { - width: 100%; - height: fit-content; - background: rgba(255, 255, 255, 0.65); - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(3px); - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.5), - inset 0 -1px 0 rgba(255, 255, 255, 0.1), - 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); + padding: 10px 20px 10px 20px; + background: rgba(255, 255, 255, 0.54); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(3px); + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.3), + inset 0 -1px 0 rgba(255, 255, 255, 0.05), + inset 0 0 8px 4px rgba(255, 255, 255, 0.2); } + +.glassBorder{ + border-radius: 20px; + border: none; + background: rgba(255, 255, 255, 0.5); + box-shadow: + inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), + inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), + inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), + inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); +} + h1 { font-size: 3.2em; line-height: 1.1; diff --git a/src/pages/eventDetail/eventDetail.jsx b/src/pages/eventDetail/eventDetail.jsx index 64c7721..4d4669a 100644 --- a/src/pages/eventDetail/eventDetail.jsx +++ b/src/pages/eventDetail/eventDetail.jsx @@ -1,47 +1,70 @@ -import { useState } from "react"; +import {useState} from "react"; import styles from "./eventDetail.module.css"; +import { useParams } from "react-router"; -function eventDetail(){ +function eventDetail() { - const [tasks] = useState([ - { text: "Préparer les slides", completed: false }, - { text: "Réserver la salle", completed: false }, - { text: "Envoyer les invitations", completed: false }, - { text: "Tester la configuration technique", completed: false }, - { text: "Organiser le catering", completed: false }, + const params = useParams(); + const id = params.id; + + const [tasks, setTasks] = useState([ + { text: "Préparer les slides", registered: false }, + { text: "Réserver la salle", registered: false }, + { text: "Envoyer les invitations", registered: false }, + { text: "Tester la configuration technique", registered: false }, + { text: "Organiser le catering", registered: false }, ]); const event = { title: "Conférence React 2025", date: "27 Décembre 2025", location: "Paris, France", - description: - "Une conférence dédiée aux développeurs React pour partager les dernières nouveautés et bonnes pratiques.", + description: "azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop" + }; + + const toggleRegister = (index) => { + setTasks((prevTasks) => + prevTasks.map((task, i) => + i === index + ? { ...task, registered: !task.registered } + : task + ) + ); }; return ( -
      -

      {event.title}

      -
      -

      Date: {event.date}

      -

      Lieu: {event.location}

      -

      Description: {event.description}

      -
      +
      +
      +
      + Illustration événement +
      +

      {event.title}

      +

      Date: {event.date}

      +

      Lieu: {event.location}

      +

      Description: {event.description}

      +
      +
      -

      Tâches

      -
        - {tasks.map((task, index) => ( -
      • - {task.text} -
        • - ))} -
      +

      Tâches

      +
        + {tasks.map((task, index) => ( +
      • +
        + {task.text} + +
        +
        • + ))} +
      +
      ); } -export default eventDetail; +export default eventDetail; \ No newline at end of file diff --git a/src/pages/eventDetail/eventDetail.module.css b/src/pages/eventDetail/eventDetail.module.css index 3c314c4..4c81bb5 100644 --- a/src/pages/eventDetail/eventDetail.module.css +++ b/src/pages/eventDetail/eventDetail.module.css @@ -1,23 +1,62 @@ -.container { - max-width: 600px; - margin: 40px auto; - background-color: #fff; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0,0,0,0.1); - padding: 20px; - font-family: Arial, sans-serif; +.allContent{ + margin: 16px 0px 16px 0px; + align-self: center; + width: 90%; } -.title { - font-size: 2rem; - color: #333; - margin-bottom: 10px; + +.textImage { + display: flex; + gap: 24px; +} + +.eventImage { + width: 40%; + aspect-ratio: 16 / 9; + background-color: #e0e0e0; + border-radius: 16px; + flex-shrink: 0; +} + +.eventInfo { + flex: 1; + min-width: 0; + overflow-wrap: break-word; } .eventInfo p { - margin: 5px 0; - font-size: 1rem; - color: #555; + white-space: normal; + overflow-wrap: break-word; +} + +.eventImage { + width: 40%; + height: 100%; + aspect-ratio: 16 / 9; + background-color: #e0e0e0; + border-radius: 16px; + flex-shrink: 0; +} + +.registerButton { + margin-left: auto; + padding: 5px 10px; + border-radius: 12px; + border: none; + cursor: pointer; + background: #019AFF; + color: white; + font-weight: 600; +} + +.registerButton:hover { + opacity: 0.85; +} + +.tasksButton { + display: flex; + align-items: center; + gap: 16px; } .tasks { @@ -26,19 +65,28 @@ } .tasks li { - background-color: #f9f9f9; - margin: 5px 0; - padding: 10px; - border-radius: 5px; - display: flex; - align-items: center; + margin: 16px 0px 16px 0px; + padding: 10px 20px 10px 20px; + border-radius: 20px; + border: none; + background: transparent; + box-shadow: + inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), + inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), + inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), + inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); + opacity: 0; + animation: fadeInUp 0.6s ease-out forwards; + animation-delay: calc(var(--i) * 0.1s); } -.tasks li.completed { - text-decoration: line-through; - opacity: 0.6; -} - -.tasks input[type="checkbox"] { - margin-right: 10px; +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } } diff --git a/src/router.js b/src/router.js index abe0254..9e3d04f 100644 --- a/src/router.js +++ b/src/router.js @@ -62,7 +62,7 @@ const router = createBrowserRouter([ Component: VolunteerProfilePage, }, { - path: "/eventDetail", + path: "/events/:id", Component: eventDetail, }, ]