diff mbox series

[htdocs] schedule: wrap long table for smaller screens

Message ID 20231231052311.24454-1-vapier@gentoo.org
State New
Headers
Series [htdocs] schedule: wrap long table for smaller screens |

Checks

Context Check Description
linaro-tcwg-bot/tcwg_gdb_build--master-aarch64 fail Patch failed to apply
linaro-tcwg-bot/tcwg_gdb_build--master-arm fail Patch failed to apply

Commit Message

Mike Frysinger Dec. 31, 2023, 5:23 a.m. UTC 
  The current table is comfortable on wider screens, but on anything
smaller than ~768px (e.g. most phones), the table exceeds the screen
and is difficult to read.  In this case, switch the table to flexbox
so that the last column (the long comment text) is allowed to wrap
into a row all by itself and take up the entire width of the screen.
This makes reading on small devices much more manageable.

CSS flexbox has been common since 2020, but if the browser doesn't
support it, then it would be ignored and the current table layout
continues to work as-is.
---
 css/schedule.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
diff mbox series

Patch

diff --git a/css/schedule.css b/css/schedule.css
index a5cc139bbe7e..37ca821d7192 100644
--- a/css/schedule.css
+++ b/css/schedule.css
@@ -40,3 +40,27 @@  table#history tr > td:nth-child(6) {
   text-align: left;
   white-space: normal;
 }
+
+/* This is ~768px with 16pt font.  */
+@media only screen and (max-width: 50em) {
+  /* Allow the comment field to wrap onto a row by itself.  */
+  table#history tr {
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+  }
+
+  table#history th,
+  table#history td {
+    flex: 1 1 15%;
+    order: 1;
+  }
+
+  table#history tr > th:nth-child(6),
+  table#history tr > td:nth-child(6) {
+    flex: 5 1 100%;
+    order: 5;
+    padding-bottom: 1em;
+    padding-left: 1em;
+  }
+}