myheats

Live heats, scoring and leaderboard for sport events
git clone https://git.in0rdr.ch/myheats.git
Log | Files | Refs | Pull requests | README | LICENSE

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:
Msrc/App.css | 41++++++++++++++++++++++++++++++++++++++++-
Msrc/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>