Giovanni/SAE-BUT2-frontend
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
2025-12-05 14:58:25 +01:00
parent 79df0f5ab1
commit 80f6408f74
2 changed files with 125 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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 getUserById from "../../utils/users/getUserById.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 }) {
@@ -19,49 +21,63 @@ export default function VolunteerCard({ id }) {
}) ()
}, []);
const navigate = useNavigate();
return (
<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 && (
<p><strong>Téléphone :</strong> {user.phone}</p>
)}
</div>
</div>
</div>
)}
{/* Header : titre + bouton expand */}
<div className={styles.header}>
<h2>{user?.name}</h2>
<button
className={`${styles.expandButton} glassCard`}
onClick={toggleExpand}
>
{isExpanded ? "▼" : "▲"}
</button>
{isExpanded && (
<div className="voirPlus">
<a href="#" className={styles.voirPlus}>VOIR PLUS</a>
</div>
<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>
{isExpanded && (
<div className={styles.bottomBar}>
<Button
onClick={() => navigate(`/profile/${id}`)}
variant="transparent"
>
Voir plus
</Button>
</div>
)}
</div>
);
}
src/pages/Volunteers/VolunteersPage.module.css
+79 -91
View File
@@ -1,125 +1,113 @@
.container {
width: 100%;
padding: 10px;
box-sizing: border-box;
margin-top: 50px;
width: 100%;
padding: 10px;
margin-top: 50px;
box-sizing: border-box;
}
.profileboard {
width: 100%;
padding: 15px;
border-radius: 10px;
box-sizing: border-box;
margin-top: 3%;
position: relative;
width: 100%;
padding: 15px;
margin-top: 3%;
display: flex;
flex-direction: column;
gap: 10px;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.header h2 {
margin: 0;
}
.mainContent {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
width: 100%;
display: flex;
flex-direction: row;
width: 100%;
flex: 1;
}
.basicInfo {
flex: 1;
flex: 1;
}
.expandedContent {
display: flex;
flex-direction: row;
align-items: flex-start;
width: 100%;
}
.profilePictureContainer {
width: 120px;
height: 120px;
margin-right: 20px;
}
.profilePicture {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: flex;
flex-direction: row;
width: 100%;
}
.textInfo {
display: flex;
flex-direction: column;
flex: 1;
display: flex;
flex-direction: column;
flex: 1;
}
.contactInfo {
margin-top: 10px;
margin-top: 10px;
}
.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 {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: transparent;
border: none;
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;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: transparent;
border: none;
font-size: 16px;
}
@media screen and (min-width: 768px) {
.profilePictureContainer {
width: 150px;
height: 150px;
}
.voirPlus{
text-align: right;
}
.profilePictureContainer {
width: 150px;
height: 150px;
}
}
@media screen and (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
margin-top:50px;
margin-bottom: 50px;
}
.container {
max-width: 1200px;
margin: 50px auto;
padding: 20px;
}
.profileboard {
padding: 25px;
}
.profileboard {
padding: 25px;
}
.profilePictureContainer {
width: 200px;
height: auto;
}
.profilePictureContainer {
width: 200px;
height: auto;
}
}