commit 5c34fedb13342a9c23c51c319f33dbba1528191b
parent 07c739cbcd5990fa9058ee47a2df4a26f1d4b93b
Author: Andreas Gruhler <andreas.gruhler@adfinis.com>
Date: Thu, 10 Oct 2024 22:31:27 +0200
feat: compact mobile display
Diffstat:
5 files changed, 28 insertions(+), 38 deletions(-)
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
- <meta name="viewport" content="width=device-width" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
diff --git a/src/frontend/Athletes.jsx b/src/frontend/Athletes.jsx
@@ -105,7 +105,7 @@ function AthleteForm({session}) {
<thead>
<tr>
<th>Created at</th>
- <th>Start Nr. *</th>
+ <th className="right">Start Nr. *</th>
<th>Firstname *</th>
<th>Lastname</th>
<th>Birthday</th>
diff --git a/src/frontend/Heats.jsx b/src/frontend/Heats.jsx
@@ -132,7 +132,7 @@ function HeatForm({session}) {
<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' className='right'>{h.planned_start}</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>
))}
diff --git a/src/frontend/css/App.css b/src/frontend/css/App.css
@@ -53,7 +53,7 @@ table {
}
th, td {
- padding: 5px 20px;
+ padding: 5px 10px;
text-align: left;
}
@@ -64,6 +64,7 @@ th, label {
color: #b0b0b6;
}
+/* don't color rows of tables with input forms */
tbody tr:nth-child(even):not(.input) {
background-color: #f9f9fc;
}
@@ -85,8 +86,6 @@ footer span a {
font-size: 1em;
}
footer span button {
- font-size: 1.5em;
- flex: 1;
margin-left: 20px;
}
@@ -100,7 +99,7 @@ footer span button {
.loginForm, .exportForm {
margin: auto;
- padding: 3rem;
+ padding: 1em;
}
.loginForm button, .loginForm input, .exportForm button {
width: 100%;
@@ -127,7 +126,7 @@ footer span button {
}
.table-container {
- padding-top: 1rem;
+ padding-top: 1em;
overflow-x: auto;
}
@@ -222,48 +221,41 @@ td.total {
/* https://css-tricks.com/making-tables-responsive-with-minimal-css */
/* Mobile / Small screen styles */
@media (max-width: 768px) {
- table.leaderboard {
- display: block;
- }
-
table.leaderboard thead {
display: none;
}
- table.leaderboard tbody,
- table.leaderboard tr,
- table.leaderboard td {
- display: block;
- }
-
- table.leaderboard tr {
- padding: 2rem;
- }
-
table.leaderboard td {
display: flex;
- padding: 10px;
- border-bottom: 1px solid #ddd;
- position: relative;
+ border-bottom: 1px solid #e1e1e7;
+ font-size: 0.8em;
}
+ table.leaderboard:not(.hide-rank) tr td:first-child {
+ background: #f3f2f7;
+ color: #b0b0b6;
+ font-size: 0.8em;
+ font-weight: bold;
+ }
table.leaderboard:not(.hide-rank) tr td:first-child::before {
- content: counter(rowNumber) ". Rank";
+ content: counter(rowNumber) ". RANK";
}
table.leaderboard td[data-title]:before {
- content: attr(data-title) ": ";
- display: inline-block;
- width: 50%;
- padding-right: 1rem;
- text-align: right;
+ content: attr(data-title);
+ width: 25%;
+ margin-right: 1em;
align-content: center;
- font-size: 0.8em;
+ text-align: right;
text-transform: uppercase;
color: #b0b0b6;
}
table.leaderboard tr {
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid white;
+ }
+
+ table.leaderboard td:not(td:first-child):empty {
+ display: none;
}
}
diff --git a/src/frontend/css/index.css b/src/frontend/css/index.css
@@ -1,13 +1,11 @@
* {
padding: 0;
margin: 0;
+ /* Include border and padding in element size (form fields):
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing */
box-sizing: border-box;
font-family: monospace;
- font-size: 1.125rem;
-}
-
-html, body {
- height: 100%;
+ font-size: 18px;
}
a {
