commit c091ec7d1f610bb3d611d261cc55704e7ad25107
parent 5c34fedb13342a9c23c51c319f33dbba1528191b
Author: Andreas Gruhler <andreas.gruhler@adfinis.com>
Date: Fri, 11 Oct 2024 00:08:20 +0200
feat: add overflow-x to all tables
Diffstat:
4 files changed, 178 insertions(+), 170 deletions(-)
diff --git a/src/frontend/Athletes.jsx b/src/frontend/Athletes.jsx
@@ -101,55 +101,57 @@ function AthleteForm({session}) {
<div className='AthleteForm'>
<button disabled={!loading} className='loading'>↺ loading</button>
<form method='post' onSubmit={e => addAthlete(e, session)}>
- <table>
- <thead>
- <tr>
- <th>Created at</th>
- <th className="right">Start Nr. *</th>
- <th>Firstname *</th>
- <th>Lastname</th>
- <th>Birthday</th>
- <th>School</th>
- <th>New/delete</th>
- </tr>
- </thead>
- <tbody>
- {athletes.map(a => (
- <tr key={a.id}>
- <td data-title='Created at' className='right'>{new Date(a.created_at).toLocaleDateString(locale, dateOptions)}</td>
- <td data-title='Start Nr.' className='right'>{a.nr}</td>
- <td data-title='Firstname'>{a.firstname}</td>
- <td data-title='Lastname'>{a.lastname}</td>
- <td data-title='Birthday'>{a.birthday ? new Date(a.birthday).toLocaleDateString(locale, dateOptions) : ''}</td>
- <td data-title='School'>{a.school}</td>
- <td><button onClick={e => deleteAthlete(e, a.id, a.firstname, a.lastname, session)}>– del</button></td>
+ <div className="table-container">
+ <table>
+ <thead>
+ <tr>
+ <th>Created at</th>
+ <th className="right">Start Nr. *</th>
+ <th>Firstname *</th>
+ <th>Lastname</th>
+ <th>Birthday</th>
+ <th>School</th>
+ <th>New/delete</th>
</tr>
- ))}
- <tr className='input'>
- <td className='right'><i>* required</i></td>
- <td data-title='Start Nr. *' className='right'>
- <input type='number' name='nr' />
- </td>
- <td data-title='Firstname *'>
- <input type='text' name='firstname' />
- </td>
- <td data-title='Lastname'>
- <input type='text' name='lastname' />
- </td>
- <td data-title='Birthday' className='right'>
- <input
- type='date'
- name='birthday' />
- </td>
- <td data-title='School'>
- <input type='text' name='school' />
- </td>
- <td>
- <button type='submit'>+ new</button>
- </td>
- </tr>
- </tbody>
- </table>
+ </thead>
+ <tbody>
+ {athletes.map(a => (
+ <tr key={a.id}>
+ <td data-title='Created at' className='right'>{new Date(a.created_at).toLocaleDateString(locale, dateOptions)}</td>
+ <td data-title='Start Nr.' className='right'>{a.nr}</td>
+ <td data-title='Firstname'>{a.firstname}</td>
+ <td data-title='Lastname'>{a.lastname}</td>
+ <td data-title='Birthday'>{a.birthday ? new Date(a.birthday).toLocaleDateString(locale, dateOptions) : ''}</td>
+ <td data-title='School'>{a.school}</td>
+ <td><button onClick={e => deleteAthlete(e, a.id, a.firstname, a.lastname, session)}>– del</button></td>
+ </tr>
+ ))}
+ <tr className='input'>
+ <td className='right'><i>* required</i></td>
+ <td data-title='Start Nr. *' className='right'>
+ <input type='number' name='nr' />
+ </td>
+ <td data-title='Firstname *'>
+ <input type='text' name='firstname' />
+ </td>
+ <td data-title='Lastname'>
+ <input type='text' name='lastname' />
+ </td>
+ <td data-title='Birthday' className='right'>
+ <input
+ type='date'
+ name='birthday' />
+ </td>
+ <td data-title='School'>
+ <input type='text' name='school' />
+ </td>
+ <td>
+ <button type='submit'>+ new</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</form>
<ExportForm athletes={athletes} />
</div>
diff --git a/src/frontend/Heats.jsx b/src/frontend/Heats.jsx
@@ -116,45 +116,47 @@ function HeatForm({session}) {
<div className='HeatForm'>
<button disabled={!loading} className='loading'>↺ loading</button>
<form method='post' onSubmit={e => addHeat(e, session)}>
- <table>
- <thead>
- <tr>
- <th>Created at</th>
- <th>Name *</th>
- <th>Location</th>
- <th>Planned start</th>
- <th>New/delete</th>
- </tr>
- </thead>
- <tbody>
- {heats.map(h => (
- <tr key={h.id}>
- <td data-title='Created at' className='right'>{new Date(h.created_at).toLocaleDateString(locale, dateOptions)}</td>
- <td data-title='Name'><Link to={generatePath('/startlist/:heatId', {heatId:h.id})}>{h.name}</Link></td>
- <td data-title='Location'>{h.location}</td>
- <td data-title='Planned start'>{h.planned_start}</td>
- <td><button onClick={e => deleteHeat(e, h.id, h.name, session)}>– del</button></td>
+ <div className="table-container">
+ <table>
+ <thead>
+ <tr>
+ <th>Created at</th>
+ <th>Name *</th>
+ <th>Location</th>
+ <th>Planned start</th>
+ <th>New/delete</th>
</tr>
- ))}
- <tr className='input'>
- <td className='right'><i>* required</i></td>
- <td data-title='Name *'>
- <input type='text' name='name' />
- </td>
- <td data-title='Location'>
- <input type='text' name='location' />
- </td>
- <td data-title='Planned start' className='right'>
- <input
- type='time'
- name='planned_start' />
- </td>
- <td>
- <button type='submit'>+ new</button>
- </td>
- </tr>
- </tbody>
- </table>
+ </thead>
+ <tbody>
+ {heats.map(h => (
+ <tr key={h.id}>
+ <td data-title='Created at' className='right'>{new Date(h.created_at).toLocaleDateString(locale, dateOptions)}</td>
+ <td data-title='Name'><Link to={generatePath('/startlist/:heatId', {heatId:h.id})}>{h.name}</Link></td>
+ <td data-title='Location'>{h.location}</td>
+ <td data-title='Planned start'>{h.planned_start}</td>
+ <td><button onClick={e => deleteHeat(e, h.id, h.name, session)}>– del</button></td>
+ </tr>
+ ))}
+ <tr className='input'>
+ <td className='right'><i>* required</i></td>
+ <td data-title='Name *'>
+ <input type='text' name='name' />
+ </td>
+ <td data-title='Location'>
+ <input type='text' name='location' />
+ </td>
+ <td data-title='Planned start' className='right'>
+ <input
+ type='time'
+ name='planned_start' />
+ </td>
+ <td>
+ <button type='submit'>+ new</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</form>
<ExportForm heats={heats} />
</div>
diff --git a/src/frontend/Settings.jsx b/src/frontend/Settings.jsx
@@ -92,53 +92,55 @@ function SettingsForm({session}) {
<div className='Settings'>
<button disabled={!loading} className='loading'>↺ loading</button>
<form method='post' onSubmit={e => updateSetting(e, session)}>
- <table>
- <thead>
- <tr>
- <th></th>
- <th>Setting *</th>
- <th>Value *</th>
- <th>New/delete</th>
- </tr>
- </thead>
- <tbody>
- {settings.map(s => (
- <tr key={s.name} data-name={s.name}>
+ <div className="table-container">
+ <table>
+ <thead>
+ <tr>
+ <th></th>
+ <th>Setting *</th>
+ <th>Value *</th>
+ <th>New/delete</th>
+ </tr>
+ </thead>
+ <tbody>
+ {settings.map(s => (
+ <tr key={s.name} data-name={s.name}>
+ <td></td>
+ <td data-title='Setting'>
+ {s.name}
+ </td>
+ <td data-title='Value'>
+ {s.value}
+ </td>
+ <td>
+ <button onClick={e => deleteSetting(e, s.name, session)}>– del</button>
+ </td>
+ </tr>
+ ))}
+ <tr className='input'>
+ <td className='right'><i>* required</i></td>
+ <td data-title='Setting *'>
+ <input type='text' name='name' />
+ </td>
+ <td data-title='Value *'>
+ <input type='text' name='value' />
+ </td>
+ <td>
+ <button type='submit'>+ new</button>
+ </td>
+ </tr>
+ </tbody>
+ <tfoot>
+ <tr>
+ <td></td>
+ <td></td>
<td></td>
- <td data-title='Setting'>
- {s.name}
- </td>
- <td data-title='Value'>
- {s.value}
- </td>
<td>
- <button onClick={e => deleteSetting(e, s.name, session)}>– del</button>
</td>
</tr>
- ))}
- <tr className='input'>
- <td className='right'><i>* required</i></td>
- <td data-title='Setting *'>
- <input type='text' name='name' />
- </td>
- <td data-title='Value *'>
- <input type='text' name='value' />
- </td>
- <td>
- <button type='submit'>+ new</button>
- </td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td></td>
- <td></td>
- <td></td>
- <td>
- </td>
- </tr>
- </tfoot>
- </table>
+ </tfoot>
+ </table>
+ </div>
</form>
</div>
)
diff --git a/src/frontend/Startlist.jsx b/src/frontend/Startlist.jsx
@@ -134,48 +134,50 @@ function StartlistForm({heatId, session}) {
<li><b>Planned start:</b> {heatStart ? heatStart : 'n/a'}</li>
</ul>
</div>
- <table>
- <thead>
- <tr>
- <th>Start Nr.</th>
- <th>Firstname</th>
- <th>Lastname</th>
- <th>Birthday</th>
- <th>School</th>
- <th>Add/Delete</th>
- </tr>
- </thead>
- <tbody>
- {startlist.map(i => (
- <tr key={i.startlist_id}>
- <td data-title='Start Nr.' className='right'>{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>
- <td><button onClick={e => removeAthleteFromHeat(
- e,
- i.startlist_id,
- i.firstname,
- i.lastname,
- heatName,
- session
- )}>– del</button></td>
+ <div className="table-container">
+ <table>
+ <thead>
+ <tr>
+ <th>Start Nr.</th>
+ <th>Firstname</th>
+ <th>Lastname</th>
+ <th>Birthday</th>
+ <th>School</th>
+ <th>Add/Delete</th>
</tr>
- ))}
- <tr className='input'>
- <td data-title='Athlete' colSpan={5}>
- <Select
- options={athleteOpts}
- onChange={(e) => setselectedAthlete(e)}
- />
- </td>
- <td>
- <button onClick={(e) => addtoHeat(e, selectedAthlete, heatId, session)}>+ add</button>
- </td>
- </tr>
- </tbody>
- </table>
+ </thead>
+ <tbody>
+ {startlist.map(i => (
+ <tr key={i.startlist_id}>
+ <td data-title='Start Nr.' className='right'>{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>
+ <td><button onClick={e => removeAthleteFromHeat(
+ e,
+ i.startlist_id,
+ i.firstname,
+ i.lastname,
+ heatName,
+ session
+ )}>– del</button></td>
+ </tr>
+ ))}
+ <tr className='input'>
+ <td data-title='Athlete' colSpan={5}>
+ <Select
+ options={athleteOpts}
+ onChange={(e) => setselectedAthlete(e)}
+ />
+ </td>
+ <td>
+ <button onClick={(e) => addtoHeat(e, selectedAthlete, heatId, session)}>+ add</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
)
}
