Merge pull request #21 from Thoscellen/fix-responsive-team-list

(#19) Fix responsive team list

.gitignore

@@ -1,6 +1,11 @@
 # Dependencies
 node_modules
 
+# Sass compiled files
+*.module.css
+*.css.map
+*.css
+
 # Testing
 coverage
 
@@ -19,3 +24,8 @@ access/*
 *.log
 .idea
 announces/*
+/styles.module.css
+
+# VS Code stuff
+.vscode/settings.json
+.vscode/launch.json

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "eslint.lintTask.enable": true
-}

package.json

@@ -190,7 +190,6 @@
         "jest": "^27.0.6",
         "lint-staged": "^11.0.0",
         "mini-css-extract-plugin": "^2.1.0",
-        "node-sass": "^6.0.1",
         "nodemon": "^2.0.9",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.3.5",
@@ -199,6 +198,7 @@
         "react-refresh": "^0.10.0",
         "react-test-renderer": "^17.0.2",
         "redux-mock-store": "^1.5.4",
+        "sass": "^1.52.3",
         "sass-loader": "^12.1.0",
         "source-map-support": "^0.5.19",
         "stylelint": "^13.13.1",

src/components/TeamMembers/TeamMembers.tsx

@@ -33,7 +33,7 @@ type VolunteerEmailProps = {
 }
 
 const VolunteerEmail: FC<VolunteerEmailProps> = withUserRole(ROLES.TEAMLEAD, ({ email }) => (
-    <div className={styles.volunteerEmail}>{email}</div>
+    <td> {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,22 +69,23 @@ const TeamMembers: FC<Props> = ({ teamId }): JSX.Element => {
     if (volunteers.length === 0) return <div />
 
     return (
-        <ul className={styles.volunteers}>
-            <li>
-                <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>
-            </li>
+        <table>
+            <tr>
+                <th>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) => (
-                <li key={volunteer.id} className={styles.volunteer}>
-                    <div className={styles.volunteerName}>
+                <tr key={volunteer.id}>
+                    <td>
                         {volunteer.firstname} {volunteer.lastname}
-                    </div>
+                    </td>
                     <DaysAvailability volunteer={volunteer} />
                     <VolunteerEmail email={volunteer.email} />
-                </li>
+                </tr>
             ))}
-        </ul>
+        </table>
     )
 }
 

src/components/TeamMembers/styles.module.scss

@@ -1,54 +1,10 @@
 @import "../../theme/variables";
 @import "../../theme/mixins";
-
-.volunteers {
-    padding: 0;
-    list-style: none;
-}
-
-$height: 24px;
-
-.volunteer {
-    height: $height;
-    line-height: $height;
-    margin-bottom: 3px;
-}
-
-.volunteerName {
-    display: inline-block;
-    height: $height;
-    width: 230px;
-    padding-right: 4px;
-    text-align: right;
-}
-
-.volunteerEmail {
-    display: inline-block;
-    height: $height;
-    padding-left: 4px;
-}
-
-.dayTitle {
-    display: inline-block;
-    width: 50px;
-    height: $height;
-    margin: 0 2px;
-    text-align: center;
-}
-
 .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;
     }
-
     &.available {
         background-color: $color-green;
     }