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

fully responsive event page and components

Browse Source
This commit is contained in:
Giovanni
2025-11-23 18:58:27 +01:00
parent fc4c9a1a94
commit d5d664716e
6 changed files with 158 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Event/Event.jsx
+56 -30
View File
@@ -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.eventImageDiv}`}>
{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" />
)}
</div>
<div>
<p className={styles.eventTitle}>{event.name}</p>
<p>{event.description}</p>
<div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
<ul>
{event.tasks
.slice(0,5)
.map((task, index) => (
<li key={index}> - {task.name}</li>
))}
{event.tasks.length > 5 ? (
<li>...</li>
) : null}
</ul>
<div className={styles.eventContainerTop}>
<div className={styles.eventContent}>
<div className={`${styles.eventImageDiv}`}>
{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" />
)}
</div>
<div className={styles.eventInfos}>
<p className={styles.eventTitle}>{event.name}</p>
<p>{event.description}</p>
<div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
<ul>
{event.tasks
.slice(0,5)
.map((task, index) => (
<li key={index}> - {task.name}</li>
))}
{event.tasks.length > 5 ? (
<li>...</li>
) : 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}>
<button
className={`${styles.moreButton} ${eventMenu ? styles.moreButtonClicked : ""}`}
onClick={()=>{seteventMenu(!eventMenu)}}>
>
</button>
<div className={styles.eventContainerBottom}>
{(windowSize.width <= 768 || eventMenu) ? (
<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
+46 -2
View File
@@ -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
+23 -2
View File
@@ -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
+3 -3
View File
@@ -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
+5 -5
View File
@@ -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
+25
View File
@@ -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;
}
}