myheats

commit 436e5fa253bb58d1e83afe37e814f950a1c7459e
parent 3635e2ce24cf479914a0292dcac08dc55a5ef15d
Author: Andreas Gruhler <andreas.gruhler@adfinis.com>
Date:   Fri, 21 Apr 2023 00:53:08 +0200

feat(leaderboard): mobile flex table

Diffstat:
M
src/App.css
 | 
41
++++++++++++++++++++++++++++++++++++++++-
M
src/Leaderboard.js
 | 
20
++++++++++----------

2 files changed, 50 insertions(+), 11 deletions(-)
diff --git a/src/App.css b/src/App.css
@@ -2,7 +2,7 @@ table {
   border-collapse: collapse;
 }
 
-tr, th, td {
+th, td {
   border: 1px solid black;
   padding: 5px;
 }
@@ -52,3 +52,42 @@ button:disabled {
 .newHeatForm tr, .newHeatForm  th, .newHeatForm td {
   border: none;
 }
+
+/* https://css-tricks.com/making-tables-responsive-with-minimal-css */
+@media(max-width: 800px) {
+  table.leaderboard thead {
+    left: -9999px;
+    position: absolute;
+    visibility: hidden;
+  }
+
+  table.leaderboard tr {
+    border-bottom: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-bottom: 40px;
+  }
+
+  table.leaderboard td {
+    margin: 0 -1px -1px 0;
+    padding-top: 35px;
+    position: relative;
+    width: 45%;
+  }
+
+  table.leaderboard td:before {
+    content: attr(data-title);
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    font-weight: bold;
+    font-size: 10px;
+    color: dimgrey;
+    text-transform: uppercase;
+  }
+
+  table.leaderboard tr {
+    padding: 0;
+  }
+}
diff --git a/src/Leaderboard.js b/src/Leaderboard.js
@@ -359,20 +359,20 @@ function Leaderboard({session}) {
           {leaderboard.sort(rankByHeat(rankingComp)).map(i => (
             <tr key={i.id}>
               <td></td>
-              <td>{i.nr}</td>
-              <td>{i.firstname}</td>
-              <td>{i.lastname}</td>
-              <td>{i.birthday}</td>
-              <td>{i.school}</td>
+              <td data-title='Start Nr.'>{i.nr}</td>
+              <td data-title='Firstname'>{i.firstname}</td>
+              <td data-title='Lastname'>{i.lastname}</td>
+              <td data-title='Birthday'>{i.birthday}</td>
+              <td data-title='School'>{i.school}</td>
               {heatSelection.map(h => (
                 <Fragment key={h.value}>
-                  <td className='right'>{i.heats.find(heat => heat.heatId === h.value)?.scores?.map(s => s.score).join(" / ")}</td>
-                  <td className='right'>{i.heats.find(heat => heat.heatId === h.value)?.summary}</td>
+                  <td data-title={'Scores "' + h.label} className='right'>{i.heats.find(heat => heat.heatId === h.value)?.scores?.map(s => s.score).join(" / ")}</td>
+                  <td data-title={'Sum "' + h.label} className='right'>{i.heats.find(heat => heat.heatId === h.value)?.summary}</td>
                 </Fragment>
               ))}
-              <td>{i.bestHeat}</td>
-              <td>{i.worstHeat}</td>
-              <td>{i.sum}</td>
+              <td data-title='👍 Best'>{i.bestHeat}</td>
+              <td data-title='👎 Worst'>{i.worstHeat}</td>
+              <td data-title='Total'>{i.sum}</td>
             </tr>
           ))}
           </tbody>