4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ Manage offices responsive

Browse Source
This commit is contained in:
Maxime Lalo 2023-07-24 12:21:55 +02:00
parent 0d9e2f95d9
commit a34fcc8a10
2 changed files with 71 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/front/Components/Layouts/Offices/OfficeInformations/classes.module.scss
View File

@ -64,23 +64,50 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
@media (max-width: $screen-l) {
text-align: left;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: $screen-s) {
grid-template-columns: repeat(1, 1fr);
}
.first-line, .first-line,
.user-line { .user-line-desktop {
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
padding: 24px; padding: 24px;
background-color: var(--purple-soft); background-color: var(--purple-soft);
@media (max-width: $screen-l) {
display: none;
}
} }
.user-line { .user-line-desktop {
background-color: var(--grey-soft); background-color: var(--grey-soft);
} }
.user-line { .user-line-desktop {
&:nth-child(odd) { &:nth-child(odd) {
background-color: var(--grey-medium); background-color: var(--grey-medium);
} }
} }
.user-line-mobile {
display: none;
@media (max-width: $screen-l) {
display: flex;
flex-direction: column;
gap: 24px;
background-color: var(--grey-soft);
padding: 24px 16px;
}
}
} }
} }
} }

36
src/front/Components/Layouts/Offices/OfficeInformations/index.tsx
View File

@ -37,13 +37,47 @@ export default function OfficeInformations(props: IProps) {
}, [officeUid]); }, [officeUid]);
const renderUser = (user: User) => ( const renderUser = (user: User) => (
<div key={user.uid} className={classes["user-line"]}> <>
<div key={user.uid} className={classes["user-line-desktop"]}>
<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography> <Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography> <Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography> <Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography> <Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography> <Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
</div> </div>
<div key={user.uid} className={classes["user-line-mobile"]}>
<div className={classes["line"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
Nom
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
Prénom
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
E-mail pro
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
Numéro de téléphone
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
Rôle
</Typography>
<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
</div>
</div>
</>
); );
return ( return (
<DefaultOfficeDashboard mobileBackText={"Liste des utilisateurs"}> <DefaultOfficeDashboard mobileBackText={"Liste des utilisateurs"}>