myheats

commit 0d6af38c7a3f6b44911928fd12bd58050d8214b4
parent 2dc264ed0d6faad8aa6dec910dffb8be1840b2ce
Author: Andreas Gruhler <andreas.gruhler@adfinis.com>
Date:   Sun,  6 Oct 2024 22:39:45 +0200

feat: improve loading button

Diffstat:
M
src/frontend/Athletes.jsx
 | 
4
++--
M
src/frontend/Heats.jsx
 | 
4
++--
M
src/frontend/Leaderboard.jsx
 | 
2
+-
M
src/frontend/Score.jsx
 | 
10
++++++----
M
src/frontend/Settings.jsx
 | 
4
++--
M
src/frontend/Startlist.jsx
 | 
4
++--
M
src/frontend/css/App.css
 | 
11
++++++++---

7 files changed, 23 insertions(+), 16 deletions(-)
diff --git a/src/frontend/Athletes.jsx b/src/frontend/Athletes.jsx
@@ -98,8 +98,8 @@ function AthleteForm({session}) {
   }, [])
 
   return (
-    <div>
-      <button disabled={!loading}>{loading ? '↺ loading' : ''}</button>
+    <div className='AthleteForm'>
+      <button disabled={!loading} className='loading'>↺ loading</button>
       <form method='post' onSubmit={e => addAthlete(e, session)}>
         <table>
           <thead>
diff --git a/src/frontend/Heats.jsx b/src/frontend/Heats.jsx
@@ -113,8 +113,8 @@ function HeatForm({session}) {
   }, [])
 
   return (
-    <div>
-      <button disabled={!loading}>{loading ? '↺ loading' : ''}</button>
+    <div className='HeatForm'>
+      <button disabled={!loading} className='loading'>↺ loading</button>
       <form method='post' onSubmit={e => addHeat(e, session)}>
         <table>
           <thead>
diff --git a/src/frontend/Leaderboard.jsx b/src/frontend/Leaderboard.jsx
@@ -354,7 +354,7 @@ function Leaderboard({session}) {
     <div>
       <div className='Leaderboard'>
         <header>
-          <button className='loading' disabled={!loading}>↺ loading</button>
+          <button disabled={!loading} className='loading' >↺ loading</button>
           <button className={`show-details ${details ? 'toggled' : ''}`} onClick={() => showDetails(!details)}>
             <div className='thumb'></div>
             <span>{details ? 'less' : 'more'}</span>
diff --git a/src/frontend/Score.jsx b/src/frontend/Score.jsx
@@ -10,7 +10,7 @@ async function getScore(heatId, athleteId, session) {
   const res = await fetch(`${api_uri}:${api_port}/v1/leaderboard/getScore`, {
     method: 'POST',
     headers: {
-	    'Content-Type': 'application/json',
+            'Content-Type': 'application/json',
             'Authorization': `Bearer ${session.auth.token}`,
     },
     body: JSON.stringify({
@@ -30,7 +30,7 @@ async function updateScore(score, heatId, athleteId, session) {
   const res = await fetch(`${api_uri}:${api_port}/v1/leaderboard/setScore`, {
     method: 'POST',
     headers: {
-	    'Content-Type': 'application/json',
+            'Content-Type': 'application/json',
             'Authorization': `Bearer ${session.auth.token}`,
     },
     body: JSON.stringify({
@@ -123,8 +123,10 @@ function ScoringForm({session}) {
   }, [heatSelection, athleteSelection, session.auth.id, score]);
 
   return (
-    <div>
-      <button disabled={!loading}>{loading ? '↺ loading' : ''}</button>
+    <div className='Scoring'>
+      <header>
+        <button disabled={!loading} className='loading'>↺ loading</button>
+      </header>
       <table>
         <thead>
           <tr>
diff --git a/src/frontend/Settings.jsx b/src/frontend/Settings.jsx
@@ -89,8 +89,8 @@ function SettingsForm({session}) {
   }, [])
 
   return (
-    <div>
-      <button disabled={!loading}>{loading ? '↺ loading' : ''}</button>
+    <div className='Settings'>
+      <button disabled={!loading} className='loading'>↺ loading</button>
       <form method='post' onSubmit={e => updateSetting(e, session)}>
         <table>
           <thead>
diff --git a/src/frontend/Startlist.jsx b/src/frontend/Startlist.jsx
@@ -125,8 +125,8 @@ function StartlistForm({heatId, session}) {
   }, [heatId])
 
   return (
-    <div>
-      <button disabled={!loading}>{loading ? '↺ loading' : ''}</button>
+    <div className='StartlistForm'>
+      <button disabled={!loading} className='loading'>↺ loading</button>
       <h1>Startlist #{heatId} {heatName}</h1>
       <div className='heatInfo'>
         <ul>
diff --git a/src/frontend/css/App.css b/src/frontend/css/App.css
@@ -117,7 +117,7 @@ footer span button {
   display: none
 }
 
-.Leaderboard {
+.Leaderboard, .Scoring, .StartlistForm, .AthleteForm, .HeatForm, .Settings {
   position: relative;
 }
 
@@ -126,15 +126,20 @@ footer span button {
 }
 
 .loading {
+  top: -19px;
+  right: 10px;
   width: 80px;
   position: absolute;
-  right: 120px;
-  top: -29px;
   font-size: 0.8em;
   text-transform: uppercase;
   color: #b0b0b6;
 }
 
+.Leaderboard .loading {
+  right: 120px;
+  top: -29px;
+}
+
 /* Show details toggle button */
 .show-details {
   width: 50px;