PeL/force-orange-2022
PeL/force-orange-2022
1
1
Fork 0
mirror of https://github.com/Paris-est-Ludique/intranet.git synced 2025-06-08 08:34:20 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(#20): 🐛 Fixed the list using a table element

Browse Source 
Changed the TeamMembers to use a html table element instead of a list, and removed a bunch of structuring css on the way

May break if the em@il column is populated.
This commit is contained in:
Simon Pistache 2022-06-18 17:12:45 +02:00
parent d76e5404fc
commit 6654aac4f5
2 changed files with 22 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/TeamMembers/TeamMembers.tsx
View File

@ -33,7 +33,7 @@ type VolunteerEmailProps = {
}
const VolunteerEmail: FC<VolunteerEmailProps> = withUserRole(ROLES.TEAMLEAD, ({ email }) => (
<div className={styles.volunteerEmail}>{email}</div>
<td className={styles.volunteerEmail}>{email}</td>
))
type DaysAvailabilityProps = {
@ -44,19 +44,15 @@ const DaysAvailability: FC<DaysAvailabilityProps> = ({ volunteer }): JSX.Element
if (volunteer.dayWishes.length === 0) {
return (
<>
<div className={classnames(styles.day, styles.unknown)}>S</div>
<div className={classnames(styles.day, styles.unknown)}>D</div>
<td className={classnames(styles.day, styles.unknown)}>S</td>
<td className={classnames(styles.day, styles.unknown)}>D</td>
</>
)
}
return (
<>
<div className={classnames(styles.day, hasDay("S")(volunteer) && styles.available)}>
S
</div>
<div className={classnames(styles.day, hasDay("D")(volunteer) && styles.available)}>
D
</div>
<td className={classnames(styles.day, hasDay("S")(volunteer) && styles.available)} />
<td className={classnames(styles.day, hasDay("D")(volunteer) && styles.available)} />
</>
)
}
@ -73,20 +69,23 @@ const TeamMembers: FC<Props> = ({ teamId }): JSX.Element => {
if (volunteers.length === 0) return <div />
return (
<div className={styles.volunteers}>
<div className={styles.volunteerName} />
<div className={styles.dayTitle}>S ({volunteers.filter(hasDay("S")).length})</div>
<div className={styles.dayTitle}>D ({volunteers.filter(hasDay("D")).length})</div>
<table className={styles.volunteers}>
<tr>
<th className={styles.volunteerName}>Volontaires</th>
<th className={styles.dayTitle}>S ({volunteers.filter(hasDay("S")).length})</th>
<th className={styles.dayTitle}>D ({volunteers.filter(hasDay("D")).length})</th>
<th>@</th>
</tr>
{volunteers.map((volunteer) => (
<>
<div key={volunteer.id} className={styles.volunteerName}>
<tr key={volunteer.id}>
<td className={styles.volunteerName}>
{volunteer.firstname} {volunteer.lastname}
</div>
</td>
<DaysAvailability volunteer={volunteer} />
<VolunteerEmail email={volunteer.email} />
</>
</tr>
))}
</div>
</table>
)
}

18
src/components/TeamMembers/styles.module.scss
View File

@ -1,24 +1,16 @@
@import "../../theme/variables";
@import "../../theme/mixins";
.volunteers {
padding: 0;
list-style: none;
}
$height: 24px;
.volunteer {
display: grid;
//display: grid;
grid-template-columns: minmax(min-content, 5fr) min-content min-content;
}
.volunteerName {
grid-column: first;
}
.day {
display: inline-block;
width: 50px;
height: $height;
margin: 0 2px;
text-align: center;
background-color: $color-red;
color: transparent;
&.unknown {
background-color: $color-grey-medium;
}