correction graphique box EventList
This commit is contained in:
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user