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-09 17:14:21 +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 }) => ( const VolunteerEmail: FC<VolunteerEmailProps> = withUserRole(ROLES.TEAMLEAD, ({ email }) => (
<div className={styles.volunteerEmail}>{email}</div> <td className={styles.volunteerEmail}>{email}</td>
)) ))
type DaysAvailabilityProps = { type DaysAvailabilityProps = {
@ -44,19 +44,15 @@ const DaysAvailability: FC<DaysAvailabilityProps> = ({ volunteer }): JSX.Element
if (volunteer.dayWishes.length === 0) { if (volunteer.dayWishes.length === 0) {
return ( return (
<> <>
<div className={classnames(styles.day, styles.unknown)}>S</div> <td className={classnames(styles.day, styles.unknown)}>S</td>
<div className={classnames(styles.day, styles.unknown)}>D</div> <td className={classnames(styles.day, styles.unknown)}>D</td>
</> </>
) )
} }
return ( return (
<> <>
<div className={classnames(styles.day, hasDay("S")(volunteer) && styles.available)}> <td className={classnames(styles.day, hasDay("S")(volunteer) && styles.available)} />
S <td className={classnames(styles.day, hasDay("D")(volunteer) && styles.available)} />
</div>
<div className={classnames(styles.day, hasDay("D")(volunteer) && styles.available)}>
D
</div>
</> </>
) )
} }
@ -73,20 +69,23 @@ const TeamMembers: FC<Props> = ({ teamId }): JSX.Element => {
if (volunteers.length === 0) return <div /> if (volunteers.length === 0) return <div />
return ( return (
<div className={styles.volunteers}> <table className={styles.volunteers}>
<div className={styles.volunteerName} /> <tr>
<div className={styles.dayTitle}>S ({volunteers.filter(hasDay("S")).length})</div> <th className={styles.volunteerName}>Volontaires</th>
<div className={styles.dayTitle}>D ({volunteers.filter(hasDay("D")).length})</div> <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) => ( {volunteers.map((volunteer) => (
<> <tr key={volunteer.id}>
<div key={volunteer.id} className={styles.volunteerName}> <td className={styles.volunteerName}>
{volunteer.firstname} {volunteer.lastname} {volunteer.firstname} {volunteer.lastname}
</div> </td>
<DaysAvailability volunteer={volunteer} /> <DaysAvailability volunteer={volunteer} />
<VolunteerEmail email={volunteer.email} /> <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/variables";
@import "../../theme/mixins"; @import "../../theme/mixins";
.volunteers { .volunteers {
padding: 0; //display: grid;
list-style: none;
}
$height: 24px;
.volunteer {
display: grid;
grid-template-columns: minmax(min-content, 5fr) min-content min-content; grid-template-columns: minmax(min-content, 5fr) min-content min-content;
} }
.volunteerName {
grid-column: first;
}
.day { .day {
display: inline-block;
width: 50px;
height: $height;
margin: 0 2px;
text-align: center;
background-color: $color-red; background-color: $color-red;
color: transparent;
&.unknown { &.unknown {
background-color: $color-grey-medium; background-color: $color-grey-medium;
} }