Merge branch 'feat/redesign-user-page' into dev
This commit is contained in:
T'JAMPENS QUENTIN p2406187
@@ -4,163 +4,102 @@
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.usersList {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
.tableWrapper {
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr;
|
||||
overflow-x: auto;
|
||||
padding: 8px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.usersList > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profileboard {
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
box-sizing: border-box;
|
||||
margin: 1rem 0;
|
||||
padding: 12px 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
.table thead tr {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.table th {
|
||||
padding: 16px 20px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
opacity: 0.7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.row {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.row:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 14px 20px;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 70%;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.expandButton {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
.avatarCell {
|
||||
width: 52px;
|
||||
padding: 10px 16px !important;
|
||||
}
|
||||
|
||||
.moreButtonClicked {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.basicInfo {
|
||||
flex: 1;
|
||||
}
|
||||
.expandedContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
.textInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
.contactInfo {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.contactInfo p {
|
||||
margin: 4px 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.bottomBar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.profilePictureContainer {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.profilePicture {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
@keyframes slideInMember {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.profileboard {
|
||||
max-width: 600px;
|
||||
padding: 16px 12px;
|
||||
}
|
||||
.header h2 {
|
||||
font-size: 1.2rem;
|
||||
max-width: 75%;
|
||||
}
|
||||
.profilePictureContainer {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.expandedContent {
|
||||
flex-direction: row;
|
||||
gap: 15px;
|
||||
}
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.1rem;
|
||||
.actionCell {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.viewBtn {
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.6;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.row:hover .viewBtn {
|
||||
opacity: 1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.container {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.table th:nth-child(4),
|
||||
.table td:nth-child(4),
|
||||
.table th:nth-child(5),
|
||||
.table td:nth-child(5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
.usersList {
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding-right: 5em;
|
||||
padding-left: 5em;
|
||||
}
|
||||
.profileboard {
|
||||
max-width: 700px;
|
||||
padding: 20px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header h2 {
|
||||
font-size: 1.4rem;
|
||||
max-width: 80%;
|
||||
}
|
||||
.expandedContent {
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
}
|
||||
.profilePictureContainer {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
.contactInfo p {
|
||||
font-size: 1rem;
|
||||
|
||||
.tableWrapper {
|
||||
padding: 0 5em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router";
|
||||
import styles from "./VolunteersPage.module.css";
|
||||
import VolunteerCard from "./components/VolunteersCard/VolunteerCard";
|
||||
import getAllUser from "../../utils/users/getAllUsers";
|
||||
import ToolBar from "../../components/ToolBar/ToolBar";
|
||||
import filter from "../../utils/filter";
|
||||
@@ -14,6 +14,7 @@ interface Filters {
|
||||
}
|
||||
|
||||
const VolunteerPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [filters, setFilters] = useState<Filters>({
|
||||
alphabetical: "asc",
|
||||
yearOrder: "desc",
|
||||
@@ -58,7 +59,9 @@ const VolunteerPage: React.FC = () => {
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
if(loading) return <Loading />;
|
||||
if (loading) return <Loading />;
|
||||
|
||||
const filteredUsers = filter(users, filters, "user") as User[];
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
@@ -68,12 +71,45 @@ const VolunteerPage: React.FC = () => {
|
||||
showCreate={false}
|
||||
/>
|
||||
|
||||
<div className={styles.usersList}>
|
||||
{filter(users, filters, "user").map((user: User) => (
|
||||
<VolunteerCard key={user.id} user={user} />
|
||||
))}
|
||||
<div className={`glassCard ${styles.tableWrapper}`}>
|
||||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Nom</th>
|
||||
<th>Email</th>
|
||||
<th>Rôle</th>
|
||||
<th>Téléphone</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredUsers.map((user: User) => {
|
||||
const avatar = user.profile_photo_path
|
||||
? `${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`
|
||||
: "/react.svg";
|
||||
return (
|
||||
<tr
|
||||
key={user.id}
|
||||
className={styles.row}
|
||||
onClick={() => navigate(`/profile/${user.id}`)}
|
||||
>
|
||||
<td className={styles.avatarCell}>
|
||||
<img src={avatar} alt="avatar" className={styles.avatar} />
|
||||
</td>
|
||||
<td>{user.name} {user.lastname}</td>
|
||||
<td>{user.email}</td>
|
||||
<td>{user.role}</td>
|
||||
<td>{user.phone ?? "/"}</td>
|
||||
<td className={styles.actionCell}>
|
||||
<span className={styles.viewBtn}>Voir</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user