From cab0a0ac4d5943f4a795bbd54c635c09ce75e2b7 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Thu, 20 Nov 2025 10:58:03 +0100 Subject: [PATCH 1/4] update of filter menu design --- src/components/Filter/Filter.jsx | 36 ++++++++++++++++++++ src/components/Filter/Filter.module.css | 44 +++++++++++++++++++++++++ src/index.css | 2 +- src/pages/Events/EventsPage.jsx | 30 +++++++++++++---- src/pages/Events/EventsPage.module.css | 20 +++++++++-- 5 files changed, 121 insertions(+), 11 deletions(-) create mode 100644 src/components/Filter/Filter.jsx create mode 100644 src/components/Filter/Filter.module.css diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx new file mode 100644 index 0000000..f726364 --- /dev/null +++ b/src/components/Filter/Filter.jsx @@ -0,0 +1,36 @@ +import styles from "./Filter.module.css"; + +function Filter({isFilterVisible, filters, setFilters}){ + const setAlphabeticalOrder = (order) => { + setFilters(prev => ({ + ...prev, + alphabetical : prev.alphabetical === order ? null : order + })); + }; + + const setYearOrder = (order) => { + setFilters(prev => ({ + ...prev, + yearOrder: prev.yearOrder === order ? null : order + })); + }; + + return ( +
+ + +
+ ) +} + +export default Filter; \ No newline at end of file diff --git a/src/components/Filter/Filter.module.css b/src/components/Filter/Filter.module.css new file mode 100644 index 0000000..cdfc895 --- /dev/null +++ b/src/components/Filter/Filter.module.css @@ -0,0 +1,44 @@ +.filterContainer { + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.filterOpen { + display: flex; +} + +.filterClose{ + display: none; +} + + +.filterTag { + border: none; + background: none; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + width: 45px; + height: 45px; +} + +.filterTag:focus { + outline: none; +} +.filterTag:focus-visible { + outline: 2px solid black; +} + +.filterTag:hover { + cursor: pointer; + svg{ + fill: #019AFF; + } +} + + +.filterTag svg { + transform: scale(4); +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index b6c5ed6..5ed7c85 100644 --- a/src/index.css +++ b/src/index.css @@ -25,7 +25,7 @@ .content { padding: 1.5rem; z-index: 1; - + min-height: 100vh; } diff --git a/src/pages/Events/EventsPage.jsx b/src/pages/Events/EventsPage.jsx index 16abc09..46f2770 100644 --- a/src/pages/Events/EventsPage.jsx +++ b/src/pages/Events/EventsPage.jsx @@ -1,12 +1,23 @@ import {useState} from "react"; import Event from "../../components/Event/Event.jsx"; import {Link} from "react-router"; -import styles from "./EventsPage.module.css" +import styles from "./EventsPage.module.css"; +import Filter from "../../components/Filter/Filter.jsx"; function EventsPage(){ - const [events, setEvents] = useState([ + const [isFilterVisible, setIsFilterVisible] = useState(false); + const toggleFilters = () => { + setIsFilterVisible(prev => !prev); + }; + + const [filters, setFilters] = useState({ + alphabetical: "asc", + yearOrder: "asc", + }); + + const [events] = useState([ { id: 1, name: "Marathon de la Ville", @@ -184,11 +195,16 @@ function EventsPage(){ className={`${styles.createButton} glassCard`}> + - +
+ +
+ +
+
) diff --git a/src/pages/Events/EventsPage.module.css b/src/pages/Events/EventsPage.module.css index 6e949d2..19c0be3 100644 --- a/src/pages/Events/EventsPage.module.css +++ b/src/pages/Events/EventsPage.module.css @@ -23,6 +23,17 @@ } +.filterContainer{ + padding: 0; + border-radius: 30px; + overflow: visible; +} + +.filterMenu{ + padding: 5px 5px 5px 5px; +} + + .createButton, .sortButton { display: flex; align-items: center; @@ -40,13 +51,16 @@ } .sortButton svg { - transform: scale(0.8); + transform: scale(1.5); fill: #019AFF; } -.createButton:hover, .sortButton:hover { - transform: translateY(-5px); +.sortButton:hover { + cursor: pointer; +} +.createButton:hover, .mobileFilter:hover { + transform: translateY(-5px); } From 4ac727e76abc581400cfc12740bbbb9080231629 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Thu, 20 Nov 2025 12:08:14 +0100 Subject: [PATCH 2/4] update of filter menu icons --- src/assets/sortByAlpha.svg | 1 + src/assets/sortByAntiAlpha.svg | 5 +++++ src/assets/timerArrowDown.svg | 1 + src/assets/timerArrowUp.svg | 1 + src/components/Filter/Filter.jsx | 21 ++++++++++++++++++++- src/components/Filter/Filter.module.css | 1 + 6 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 src/assets/sortByAlpha.svg create mode 100644 src/assets/sortByAntiAlpha.svg create mode 100644 src/assets/timerArrowDown.svg create mode 100644 src/assets/timerArrowUp.svg diff --git a/src/assets/sortByAlpha.svg b/src/assets/sortByAlpha.svg new file mode 100644 index 0000000..28789ca --- /dev/null +++ b/src/assets/sortByAlpha.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/sortByAntiAlpha.svg b/src/assets/sortByAntiAlpha.svg new file mode 100644 index 0000000..f74e5d8 --- /dev/null +++ b/src/assets/sortByAntiAlpha.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/timerArrowDown.svg b/src/assets/timerArrowDown.svg new file mode 100644 index 0000000..df66463 --- /dev/null +++ b/src/assets/timerArrowDown.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/timerArrowUp.svg b/src/assets/timerArrowUp.svg new file mode 100644 index 0000000..861ced2 --- /dev/null +++ b/src/assets/timerArrowUp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx index f726364..e98c259 100644 --- a/src/components/Filter/Filter.jsx +++ b/src/components/Filter/Filter.jsx @@ -23,10 +23,29 @@ function Filter({isFilterVisible, filters, setFilters}){ + + + diff --git a/src/components/Filter/Filter.module.css b/src/components/Filter/Filter.module.css index cdfc895..354f2a2 100644 --- a/src/components/Filter/Filter.module.css +++ b/src/components/Filter/Filter.module.css @@ -24,6 +24,7 @@ height: 45px; } + .filterTag:focus { outline: none; } From b024d13101fda0cc8998a4335a7ff71b98517ad6 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Thu, 20 Nov 2025 22:14:29 +0100 Subject: [PATCH 3/4] add of sort method --- src/components/Filter/Filter.jsx | 62 ++++++++------- src/components/Filter/Filter.module.css | 12 ++- src/index.css | 6 +- src/pages/Events/EventsPage.jsx | 100 ++++++++++++++++-------- src/pages/Events/EventsPage.module.css | 2 +- 5 files changed, 118 insertions(+), 64 deletions(-) diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx index e98c259..e0f39e2 100644 --- a/src/components/Filter/Filter.jsx +++ b/src/components/Filter/Filter.jsx @@ -17,37 +17,43 @@ function Filter({isFilterVisible, filters, setFilters}){ return (
- - + - - - - - + + + + + + - - - - - + + +
) } diff --git a/src/components/Filter/Filter.module.css b/src/components/Filter/Filter.module.css index 354f2a2..2f46bfa 100644 --- a/src/components/Filter/Filter.module.css +++ b/src/components/Filter/Filter.module.css @@ -41,5 +41,15 @@ .filterTag svg { - transform: scale(4); + transform: scale(1); +} + + +.active { + border: 1px solid #019AFF; +} + +.active svg { + fill: #019AFF; + transform: scale(1); } \ No newline at end of file diff --git a/src/index.css b/src/index.css index 5ed7c85..1699f0d 100644 --- a/src/index.css +++ b/src/index.css @@ -49,9 +49,9 @@ body { .glassCard { width: 100%; - padding: 10px 20px 10px 20px; + padding: 10px 10px 10px 10px; height: fit-content; - background: rgba(255, 255, 255, 0.65); + background: rgba(184, 184, 184, 0.65); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: 20px; @@ -60,7 +60,7 @@ body { 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); + inset 0 0 30px 4px rgba(255, 255, 255, 0.4); position: relative; overflow: hidden; } diff --git a/src/pages/Events/EventsPage.jsx b/src/pages/Events/EventsPage.jsx index 46f2770..d2e0bf7 100644 --- a/src/pages/Events/EventsPage.jsx +++ b/src/pages/Events/EventsPage.jsx @@ -26,16 +26,16 @@ function EventsPage(){ tasks: [ { name: "Inscription des participants", - start: "08:00", - end: "10:00", + start: "2018-09-24 22:21:20", + end: "2018-09-24 22:21:20", place: "Centre sportif", description: "Accueillir et enregistrer tous les coureurs.", volunteers_count: 5 }, { name: "Distribution des dossards", - start: "09:00", - end: "11:00", + start: "2018-09-24 22:21:20", + end: "2018-09-24 22:21:20", place: "Salle principale", description: "Remettre les dossards et goodies aux participants.", volunteers_count: 3 @@ -50,16 +50,16 @@ function EventsPage(){ tasks: [ { name: "Montage de la scène", - start: "10:00", - end: "14:00", + start: "2018-09-24 22:21:20", + end: "2018-09-24 22:21:20", place: "Parc central", description: "Installer la scène, les éclairages et le son.", volunteers_count: 6 }, { name: "Accueil du public", - start: "14:00", - end: "20:00", + start: "2018-09-24 22:21:20", + end: "2018-09-24 22:21:20", place: "Entrée principale", description: "Vérifier les billets et orienter les visiteurs.", volunteers_count: 4 @@ -74,24 +74,24 @@ function EventsPage(){ tasks: [ { name: "Préparation des salles", - start: "07:00", - end: "09:00", + start: "2018-09-24 22:21:20", + end: "2018-09-24 22:21:20", place: "Campus Tech", description: "Installer les chaises, projecteurs et matériel pour les conférences.", volunteers_count: 4 }, { name: "Accueil des intervenants", - start: "08:30", - end: "10:00", + start: "2018-09-24 22:21:20", + end: "2018-09-24 22:21:20", place: "Hall principal", description: "Assister les speakers et orienter vers les salles.", volunteers_count: 2 }, { name: "Gestion du buffet", - start: "12:00", - end: "14:00", + start: "2018-09-24 22:21:20", + end: "2018-09-24 22:21:20", place: "Salle de restauration", description: "Distribuer boissons et repas aux participants.", volunteers_count: 3 @@ -106,16 +106,16 @@ function EventsPage(){ tasks: [ { name: "Installation du matériel", - start: "09:00", - end: "10:00", + start: "2018-09-24 22:21:20", + end: "2018-09-24 22:21:20", place: "Jardin partagé", description: "Préparer outils et terreaux pour les participants.", volunteers_count: 2 }, { name: "Encadrement des participants", - start: "10:00", - end: "12:00", + start: "2018-09-24 22:21:20", + end: "2018-09-24 22:21:20", place: "Jardin partagé", description: "Aider et conseiller sur la plantation et l’entretien.", volunteers_count: 3 @@ -130,48 +130,48 @@ function EventsPage(){ tasks: [ { name: "Accueil et enregistrement", - start: "08:00", - end: "12:00", + start: "2020-09-24 22:21:20", + end: "2020-09-24 22:21:20", place: "Salle municipale", description: "Enregistrer les donneurs et expliquer le processus.", volunteers_count: 4 }, { name: "Préparation des salles", - start: "07:30", - end: "08:00", + start: "2018-09-24 22:21:20", + end: "2018-09-24 22:21:20", place: "Salle municipale", description: "Installer les lits, tables et matériel médical.", volunteers_count: 3 }, { name: "Assistance post-don", - start: "12:00", - end: "16:00", + start: "2018-09-24 22:21:20", + end: "2018-09-24 22:21:20", place: "Salle municipale", description: "Accompagner les donneurs après le don et proposer des rafraîchissements.", volunteers_count: 2 }, { name: "Accueil et enregistrement", - start: "08:00", - end: "12:00", + start: "2020-09-24 22:21:20", + end: "2020-09-24 22:21:20", place: "Salle municipale", description: "Enregistrer les donneurs et expliquer le processus.", volunteers_count: 4 }, { name: "Préparation des salles", - start: "07:30", - end: "08:00", + start: "2018-09-24 22:21:20", + end: "2018-09-24 22:21:20", place: "Salle municipale", description: "Installer les lits, tables et matériel médical.", volunteers_count: 3 }, { name: "Assistance post-don", - start: "12:00", - end: "16:00", + start: "2018-09-24 22:21:20", + end: "2018-09-24 22:21:20", place: "Salle municipale", description: "Accompagner les donneurs après le don et proposer des rafraîchissements.", volunteers_count: 2 @@ -180,12 +180,50 @@ function EventsPage(){ }, ]); + const compareDate = (dateA, dateB) => { + const dA = new Date(dateA); + const dB = new Date(dateB); + + if (filters.yearOrder === "asc") { + return dB - dA; + } else { + return dA - dB; + } + }; + + const sortedEvents = [...events].sort((a, b) => { + const sortedATasks = a.tasks.sort((taskA, taskB) => + compareDate(taskA.start, taskB.start) + ); + const sortedBTasks = b.tasks.sort((taskA, taskB) => + compareDate(taskA.start, taskB.start) + ); + + const timeComparison = compareDate( + sortedATasks[0].start, + sortedBTasks[0].start + ); + + if (timeComparison !== 0) { + return timeComparison; + } + + if (filters.alphabetical !== null) { + return filters.alphabetical === "asc" + ? a.name.localeCompare(b.name) + : b.name.localeCompare(a.name); + } + + return 0; + }); + + return (
- {events.map((event, index) => ( + {sortedEvents.map((event, index) => ( ))}
diff --git a/src/pages/Events/EventsPage.module.css b/src/pages/Events/EventsPage.module.css index 19c0be3..64a6dd2 100644 --- a/src/pages/Events/EventsPage.module.css +++ b/src/pages/Events/EventsPage.module.css @@ -51,7 +51,7 @@ } .sortButton svg { - transform: scale(1.5); + transform: scale(0.8); fill: #019AFF; } From aba36c7fa5afface16fbb095bced17145c6fe3dd Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Fri, 21 Nov 2025 11:34:48 +0100 Subject: [PATCH 4/4] add of animation for .filterContainer --- src/components/Filter/Filter.module.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/Filter/Filter.module.css b/src/components/Filter/Filter.module.css index 2f46bfa..60fef57 100644 --- a/src/components/Filter/Filter.module.css +++ b/src/components/Filter/Filter.module.css @@ -2,14 +2,23 @@ display: flex; flex-direction: column; gap: 0.4rem; + overflow: hidden; + max-height: 0; + opacity: 0; + transform: translateY(-10px); + transition: max-height 0.5s ease, opacity 0.8s ease, transform 0.5s ease; } .filterOpen { - display: flex; + max-height: 200px; + opacity: 1; + transform: translateY(0); } .filterClose{ - display: none; + max-height: 200px; + opacity: 0; + transform: translateY(-10px); }