fully responsive event page and components

src/components/Event/Event.jsx

@@ -1,50 +1,76 @@
 import styles from "./Event.module.css";
-import {useState} from "react";
+import {useState, useEffect} from "react";
 import {Link} from "react-router";
 import Button from "/src/components/ui/button/button.jsx"
 
 function Event({event}){
     const [eventMenu, seteventMenu] = useState(false);
+    const [windowSize, setWindowSize] = useState({
+        width: null,
+        height: null,
+    });
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+
 
 
     return (
         <div className={`${styles.eventContainer} glassCard`}>
-            <div className={styles.eventContent}>
+            <div className={styles.eventContainerTop}>
-                <div className={`${styles.eventImageDiv}`}>
+                <div className={styles.eventContent}>
-                    {event.image == null ? (
+                    <div className={`${styles.eventImageDiv}`}>
-                        <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
+                        {event.image == null ? (
-                    ) : (
+                            <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
-                        <img src={event.image + `.png`} alt="Photo de l'événement" />
+                        ) : (
-                    )}
+                            <img src={event.image + `.png`} alt="Photo de l'événement" />
-                </div>
+                        )}
-                <div>
+                    </div>
-                    <p className={styles.eventTitle}>{event.name}</p>
+                    <div className={styles.eventInfos}>
-                    <p>{event.description}</p>
+                        <p className={styles.eventTitle}>{event.name}</p>
-                    <div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
+                        <p>{event.description}</p>
-                        <ul>
+                        <div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
-                            {event.tasks
+                            <ul>
-                                .slice(0,5)
+                                {event.tasks
-                                .map((task, index) => (
+                                    .slice(0,5)
-                                    <li key={index}> - {task.name}</li>
+                                    .map((task, index) => (
-                                ))}
+                                        <li key={index}> - {task.name}</li>
-                            {event.tasks.length > 5 ? (
+                                    ))}
-                                <li>...</li>
+                                {event.tasks.length > 5 ? (
-                            ) : null}
+                                    <li>...</li>
-                        </ul>
+                                ) : null}
+                            </ul>
+                        </div>
                     </div>
                 </div>
+                {windowSize.width > 768 ? (
+                    <div className={styles.eventButtons}>
+                        <button
+                            className={`${styles.moreButton} ${eventMenu ? styles.moreButtonClicked : ""}`}
+                            onClick={()=>{seteventMenu(!eventMenu)}}>
+                            >
+                        </button>
+                    </div>
+                ) : null}
             </div>
-            <div className={styles.eventButtons}>
+            <div className={styles.eventContainerBottom}>
-                <button
+            {(windowSize.width <= 768 || eventMenu) ? (
-                    className={`${styles.moreButton} ${eventMenu ? styles.moreButtonClicked : ""}`}
-                    onClick={()=>{seteventMenu(!eventMenu)}}>
-                    >
-                </button>
                 <Link
                     to={`/event/` + event.id}
-                    className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
+                    className={styles.moreLink}>
                     <Button>En savoir plus →</Button>
                 </Link>
+            ) : null}
             </div>
         </div>
     )

src/components/Event/Event.module.css

@@ -1,10 +1,24 @@
 .eventContainer {
     display: flex;
+    flex-direction: column;
     margin: 1rem 0;
-    justify-content: space-between;
     width: 80%;
 }
 
+.eventContainerTop {
+    display: flex;
+}
+
+.eventContainerBottom{
+    display: flex;
+    align-items: center;
+    justify-content: end;
+}
+
+.moreLink {
+    width: fit-content;
+}
+
 .eventImageDiv {
     display: flex;
     align-items: center;
@@ -25,7 +39,6 @@
 
 .eventContent {
     display: flex;
-    flex-direction: column;
 }
 
 .eventTitle {
@@ -89,3 +102,34 @@
 .eventMenuClose {
     display: none;
 }
+
+
+
+
+
+@media screen and (max-width: 768px) {
+    .eventImage {
+        width: 100%;
+        height: auto;
+        display: block;
+        object-fit: cover;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .eventContainer{
+        padding: 0;
+    }
+
+    .eventImageDiv {
+        margin: 0;
+    }
+
+    .eventContent {
+        flex-direction: column;
+    }
+
+    .eventInfos, .eventContainerBottom {
+        padding: 10px;
+    }
+}

src/components/Filter/Filter.module.css

@@ -5,7 +5,6 @@
     overflow: hidden;
     max-height: 0;
     opacity: 0;
-    transform: translateY(-10px);
     transition: max-height 0.5s ease, opacity 0.8s ease, transform 0.5s ease;
 }
 
@@ -18,7 +17,6 @@
 .filterClose{
     max-height: 200px;
     opacity: 0;
-    transform: translateY(-10px);
 }
 
 
@@ -51,6 +49,7 @@
 
 .filterTag svg {
     transform: scale(1);
+    color: black;
 }
 
 
@@ -61,4 +60,26 @@
 .active svg {
     fill: #019AFF;
     transform: scale(1);
+}
+
+@media screen and (max-width: 768px){
+    .filterContainer {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .filterOpen{
+        display: flex;
+    }
+    .filterClose{
+        display: none;
+    }
+
+    .filterMenu {
+        width: 100%;
+    }
+
+    abbr {
+        width: fit-content;
+    }
 }

src/index.css

@@ -49,9 +49,9 @@ body {
 
 .glassCard {
   width: 100%;
-  padding: 10px 10px 10px 10px;
+  padding: 10px;
   height: fit-content;
-  background: rgba(184, 184, 184, 0.65);
+  background: rgba(255, 255, 255, 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 30px 4px rgba(255, 255, 255, 0.4);
+          inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
   position: relative;
   overflow: hidden;
 }

src/pages/Events/EventsPage.jsx

@@ -222,11 +222,6 @@ function EventsPage(){
 
     return (
         <div className={styles.eventsContainer}>
-            <div className={styles.eventsList}>
-                {sortedEvents.map((event, index) => (
-                    <Event key={index} event={event} />
-                ))}
-            </div>
             <div className={styles.eventsButtons}>
                 <Link
                     to="/event/create"
@@ -244,6 +239,11 @@ function EventsPage(){
                     </div>
                 </div>
             </div>
+            <div className={styles.eventsList}>
+                {sortedEvents.map((event, index) => (
+                    <Event key={index} event={event} />
+                ))}
+            </div>
         </div>
     )
 }

src/pages/Events/EventsPage.module.css

@@ -72,3 +72,28 @@
 }
 
 
+@media screen and (max-width: 768px) {
+    .eventsButtons {
+        flex-direction: row;
+        position: relative;
+        top: 0;
+        right: 0;
+        align-items: flex-start;
+        width: 100%;
+        margin-top: 16px;
+    }
+
+    .filterContainer{
+        display: flex;
+        width: fit-content;
+    }
+
+    .filterMenu{
+        width: fit-content;
+    }
+
+    .createButton:hover, .mobileFilter:hover {
+        transform: none !important;
+    }
+}
+