On Fri, Jul 05, 2024 at 10:53:04PM GMT, James McCoy wrote:
> Rather than go through all that mess, I poked around some more with some
> CSS adjustments and was able to put something together that didn't
> require updating anything related to datatables.
>
> https://salsa.debian.org/qa/udd/-/merge_requests/53
>
> I've also attached the patch.
Actually attached this time.
Cheers,
--
James
GPG Key: 4096R/91BF BF4D 6956 BD5D F7B7 2D23 DFE6 91AE 331B A3DB
>From 95b8c26ff0012f08ad86cf2d6b4bc7e18b0b578f Mon Sep 17 00:00:00 2001
From: James McCoy <james...@debian.org>
Date: Fri, 5 Jul 2024 22:24:08 -0400
Subject: [PATCH] dmd: Make the first row/column of dmddetails table sticky
When dmddetails has many rows, it can be easy to lose track of what each
column represents. Similarly, since the table is wide, one can lose
track of what package a row corresponds to when scrolling to columns on
the right.
In order to keep them visible, a few more css rules are needed.
To keep the headers visible, the entire thead, rather than just the th,
needs to be sticky to the top of the viewport. This ensures both rows of
the table header are visible.
To keep the first column visible, change the first column in the tbody
to a th and mark it sticky to the left of the viewport. Since debian.css
makes th bold, also set these th back to normal font-weight.
In addition, the th in the first row of the table head needs to be
sticky to the left. We can't simply select the first th of the table
head because there are two rows and a rowspan involved.
Closes: #1075725
Signed-off-by: James McCoy <james...@debian.org>
---
web/css/dmd.css | 21 +++++++++++++++++++++
web/templates/dmd.erb | 2 +-
2 files changed, 22 insertions(+), 1 deletion(-)
diff --git a/web/css/dmd.css b/web/css/dmd.css
index 40dafef..c0829fd 100644
--- a/web/css/dmd.css
+++ b/web/css/dmd.css
@@ -26,3 +26,24 @@ table#todolist tbody td {
font-size: 14px;
overflow-wrap: anywhere;
}
+
+table#dmddetails thead {
+ position: sticky;
+ z-index: 1;
+ top: 0;
+ background: white;
+}
+
+table#dmddetails thead tr:first-child>th:first-child {
+ position: sticky;
+ z-index: 2;
+ left: 0;
+ background: white;
+}
+
+table#dmddetails tbody th {
+ position: sticky;
+ left: 0;
+ background: white;
+ font-weight: normal;
+}
diff --git a/web/templates/dmd.erb b/web/templates/dmd.erb
index 44997c0..329b605 100644
--- a/web/templates/dmd.erb
+++ b/web/templates/dmd.erb
@@ -185,7 +185,7 @@
%>
<% next if not uddd.versions.include?(src) %>
<% next if not uddd.versions[src].include?('debian') %>
- <tr><td><a href="https://tracker.debian.org/<%= ERB::Util::url_encode(src) %>" title="<%= h[:reason] %>"><%= src %></a></td>
+ <tr><th><a href="https://tracker.debian.org/<%= ERB::Util::url_encode(src) %>" title="<%= h[:reason] %>"><%= src %></a></th>
<% h[:versions].each do |v| %>
<%= v %>
--
2.45.2
