myheats

commit 893aafc6ad5f6dbb809881972bdfd168c407350b
parent 0d6af38c7a3f6b44911928fd12bd58050d8214b4
Author: Andreas Gruhler <andreas.gruhler@adfinis.com>
Date:   Sun,  6 Oct 2024 22:54:46 +0200

feat: improve scoring flex display

Diffstat:
M
src/frontend/Score.jsx
 | 
58
+++++++++++++++++++++++++---------------------------------
M
src/frontend/css/App.css
 | 
13
++++++++++++-

2 files changed, 37 insertions(+), 34 deletions(-)
diff --git a/src/frontend/Score.jsx b/src/frontend/Score.jsx
@@ -127,39 +127,31 @@ function ScoringForm({session}) {
       <header>
         <button disabled={!loading} className='loading'>↺ loading</button>
       </header>
-      <table>
-        <thead>
-          <tr>
-            <th>Heat</th>
-            <th>Athlete</th>
-            <th>Score</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td data-title='Heat'>
-              <Select
-                options={heatOpts}
-                onChange={h => { setHeatSelection(h); setScore(0) }}
-              />
-            </td>
-            <td data-title='Athlete'>
-              <Select
-                options={athleteOpts}
-                onChange={a => { setAthleteSelection(a); setScore(0) }}
-              />
-            </td>
-            <td data-title='Score'>
-              <input
-                className='scoreInput'
-                type="number"
-                value={score}
-                onChange={(e) => setScore(e.target.value)}
-              />
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <ul>
+        <li>
+          <label htmlFor='heat'>Heat</label>
+          <Select
+            options={heatOpts}
+            onChange={h => { setHeatSelection(h); setScore(0) }}
+            id='heat' />
+        </li>
+        <li>
+          <label htmlFor='athlete'>Athlete</label>
+          <Select
+            options={athleteOpts}
+            onChange={a => { setAthleteSelection(a); setScore(0) }}
+            id='athlete' />
+        </li>
+        <li>
+          <label htmlFor='score'>Score</label>
+          <input
+            className='scoreInput'
+            type="number"
+            value={score}
+            onChange={(e) => setScore(e.target.value)}
+            id='score' />
+        </li>
+      </ul>
     </div>
   )
 }
diff --git a/src/frontend/css/App.css b/src/frontend/css/App.css
@@ -121,10 +121,21 @@ footer span button {
   position: relative;
 }
 
-.Leaderboard header {
+.Leaderboard header, .Scoring {
   padding: 0 20px;
 }
 
+.Scoring ul {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.Scoring li {
+  list-style: none;
+  padding-right: 20px;
+}
+
 .loading {
   top: -19px;
   right: 10px;