correction graphique box EventList

This commit is contained in:
ORDONNEAU Antoine
2026-03-12 11:06:16 +01:00
parent bdd47b7a0e
commit 29db4467a2
2 changed files with 13 additions and 9 deletions
@@ -1,12 +1,13 @@
import styles from "./eventList.module.css"; import styles from "./eventList.module.css";
import { formatDateLetter } from "../../../../utils/date/formatDateLetter.js"; import {formatDateLetter} from "../../../../utils/date/formatDateLetter.js";
import { useState } from "react"; import {useState} from "react";
export default function EventItem({ eventGroup }) { export default function EventItem({eventGroup}) {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`} onClick={() => setIsVisible(!isVisible)}> return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`}
onClick={() => setIsVisible(!isVisible)}>
<div className={styles.eventTitle}> <div className={styles.eventTitle}>
<p className={styles.title}>{eventGroup.name}</p> <p className={styles.title}>{eventGroup.name}</p>
<p>{formatDateLetter(eventGroup.start)}</p> <p>{formatDateLetter(eventGroup.start)}</p>
@@ -15,8 +16,8 @@ export default function EventItem({ eventGroup }) {
<ul className={styles.eventDetails}> <ul className={styles.eventDetails}>
{eventGroup.tasks.map((task, i) => ( {eventGroup.tasks.map((task, i) => (
<li key={i} className={styles.eventTasks}> <li key={i} className={styles.eventTasks}>
<p>- {task.name} - {task.description}</p> <p className={styles.taskName}>{task.name} - {task.description}</p>
<p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p> <p className={styles.taskDate}>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
</li> </li>
))} ))}
</ul> </ul>
@@ -68,9 +68,12 @@ h2{
} }
.eventTasks { .eventTasks {
display: flex; list-style: none;
flex-direction: row; margin: 10px;
justify-content: space-between; }
.taskDate{
font-size: 13px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {