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

fix ui

Browse Source
This commit is contained in:
T'JAMPENS QUENTIN p2406187 committed 2025-12-05 14:58:25 +01:00
1 parent 79df0f5ab1
commit 80f6408f74
2 files changed
+125 -121
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/Volunteers/VolunteerCard.jsx
+46 -30
View File
@@ -2,6 +2,8 @@ import React, {useEffect, useState} from "react";
import styles from "./VolunteersPage.module.css"; import styles from "./VolunteersPage.module.css";
import getUserById from "../../utils/users/getUserById.js"; import getUserById from "../../utils/users/getUserById.js";
import formatDate from "../../utils/date/formatDate.js"; import formatDate from "../../utils/date/formatDate.js";
import { useNavigate } from "react-router";
import Button from "../../components/ui/button/button.jsx";
export default function VolunteerCard({ id }) { export default function VolunteerCard({ id }) {
@@ -19,49 +21,63 @@ export default function VolunteerCard({ id }) {
}) () }) ()
}, []); }, []);
const navigate = useNavigate();
return ( return (
<div className={`${styles.profileboard} glassCard`}> <div className={`${styles.profileboard} glassCard`}>
<div className={styles.mainContent}>
{!isExpanded ? (
<div className={styles.basicInfo}>
<h2>{user?.name}</h2>
<p><strong>Rôle :</strong> {user?.role} </p>
<p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)} </p>
</div>
) : (
<div className={styles.expandedContent}>
<div className={styles.profilePictureContainer}>
<img src={"/react.svg"} alt={`profile photo`} className={styles.profilePicture} />
</div>
<div className={styles.textInfo}>
<div className={styles.basicInfo}>
<h2>{user?.name}</h2>
<p><strong>Rôle :</strong> {user?.role} </p>
<p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)} </p>
</div>
<div className={styles.contactInfo}>
<p><strong>Email :</strong> {user?.email}</p>
{user?.phone && ( {/* Header : titre + bouton expand */}
<p><strong>Téléphone :</strong> {user.phone}</p> <div className={styles.header}>
)} <h2>{user?.name}</h2>
</div>
</div>
</div>
)}
<button <button
className={`${styles.expandButton} glassCard`} className={`${styles.expandButton} glassCard`}
onClick={toggleExpand} onClick={toggleExpand}
> >
{isExpanded ? "▼" : "▲"} {isExpanded ? "▼" : "▲"}
</button> </button>
{isExpanded && ( </div>
<div className="voirPlus">
<a href="#" className={styles.voirPlus}>VOIR PLUS</a> <div className={styles.mainContent}>
{!isExpanded ? (
<div className={styles.basicInfo}>
<p><strong>Rôle :</strong> {user?.role}</p>
<p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
</div>
) : (
<div className={styles.expandedContent}>
<div className={styles.profilePictureContainer}>
<img src={"/react.svg"} alt="profile" className={styles.profilePicture} />
</div>
<div className={styles.textInfo}>
<div className={styles.basicInfo}>
<p><strong>Rôle :</strong> {user?.role}</p>
<p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
</div>
<div className={styles.contactInfo}>
<p><strong>Email :</strong> {user?.email}</p>
{user?.phone && <p><strong>Téléphone :</strong> {user.phone}</p>}
</div>
</div>
</div> </div>
)} )}
</div> </div>
{isExpanded && (
<div className={styles.bottomBar}>
<Button
onClick={() => navigate(`/profile/${id}`)}
variant="transparent"
>
Voir plus
</Button>
</div>
)}
</div> </div>
); );
} }
src/pages/Volunteers/VolunteersPage.module.css
+79 -91
View File
@@ -1,125 +1,113 @@
.container { .container {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
box-sizing: border-box; margin-top: 50px;
margin-top: 50px; box-sizing: border-box;
} }
.profileboard { .profileboard {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
border-radius: 10px; margin-top: 3%;
box-sizing: border-box; display: flex;
margin-top: 3%; flex-direction: column;
position: relative; gap: 10px;
box-sizing: border-box;
} }
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.header h2 {
margin: 0;
}
.mainContent { .mainContent {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; width: 100%;
align-items: flex-start; flex: 1;
width: 100%;
} }
.basicInfo { .basicInfo {
flex: 1; flex: 1;
} }
.expandedContent { .expandedContent {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; width: 100%;
width: 100%;
}
.profilePictureContainer {
width: 120px;
height: 120px;
margin-right: 20px;
}
.profilePicture {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
} }
.textInfo { .textInfo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
} }
.contactInfo { .contactInfo {
margin-top: 10px; margin-top: 10px;
} }
.contactInfo p { .contactInfo p {
margin: 5px 0; margin: 5px 0;
}
.bottomBar {
display: flex;
justify-content: flex-end;
}
.profilePictureContainer {
width: 120px;
height: 120px;
margin-right: 20px;
}
.profilePicture {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
} }
.expandButton { .expandButton {
width: 30px; width: 30px;
height: 30px; height: 30px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
border: none; border: none;
font-size: 16px; font-size: 16px;
margin-left: 10px;
position: absolute;
top: 10px;
right: 10px;
}
.voirPlus {
position: absolute;
bottom: 10px;
right: 10px;
color: #007bff;
text-decoration: none;
font-weight: bold;
cursor: pointer;
}
.voirPlus:hover {
text-decoration: underline;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.profilePictureContainer { .profilePictureContainer {
width: 150px; width: 150px;
height: 150px; height: 150px;
} }
.voirPlus{
text-align: right;
}
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 50px auto;
padding: 20px; padding: 20px;
margin-top:50px; }
margin-bottom: 50px;
}
.profileboard { .profileboard {
padding: 25px; padding: 25px;
} }
.profilePictureContainer { .profilePictureContainer {
width: 200px; width: 200px;
height: auto; height: auto;
} }
} }