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:
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>