myheats

commit a25ee853d3d5910e843a752236f07e989f34063b
parent 436e5fa253bb58d1e83afe37e814f950a1c7459e
Author: Andreas Gruhler <andreas.gruhler@adfinis.com>
Date:   Fri, 21 Apr 2023 01:31:25 +0200

feat: improve display on small screens

Diffstat:
M
src/App.css
 | 
13
+++++++++----
M
src/Leaderboard.js
 | 
10
+++++-----

2 files changed, 14 insertions(+), 9 deletions(-)
diff --git a/src/App.css b/src/App.css
@@ -82,12 +82,17 @@ button:disabled {
     top: 3px;
     left: 3px;
     font-weight: bold;
-    font-size: 10px;
-    color: dimgrey;
+    font-size: 0.8em;
+    color: rgb(112, 112, 112);
     text-transform: uppercase;
   }
 
-  table.leaderboard tr {
-    padding: 0;
+  table.leaderboard td:nth-child(-n+6) {
+    background-color: rgb(243, 243, 243);
+  }
+
+  table.leaderboard td:nth-last-child(-n+3) {
+    font-weight: bold;
+    font-size: 1.5em;
   }
 }
diff --git a/src/Leaderboard.js b/src/Leaderboard.js
@@ -366,13 +366,13 @@ function Leaderboard({session}) {
               <td data-title='School'>{i.school}</td>
               {heatSelection.map(h => (
                 <Fragment key={h.value}>
-                  <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>
+                  <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' className='right'>{i.heats.find(heat => heat.heatId === h.value)?.summary}</td>
                 </Fragment>
               ))}
-              <td data-title='👍 Best'>{i.bestHeat}</td>
-              <td data-title='👎 Worst'>{i.worstHeat}</td>
-              <td data-title='Total'>{i.sum}</td>
+              <td data-title='👍 Best' className='right'>{i.bestHeat}</td>
+              <td data-title='👎 Worst' className='right'>{i.worstHeat}</td>
+              <td data-title='Total' className='right'>{i.sum}</td>
             </tr>
           ))}
           </tbody>