Your message dated Sun, 14 Jul 2024 04:10:58 +0000
with message-id <66934fd3864a_393c9e96050...@godard.mail>
and subject line Bug#1075725 fixed in qa.debian.org
has caused the Debian Bug report #1075725,
regarding UDD/dmd: Make the header row of tables sticky/fixed
to be marked as done.

This means that you claim that the problem has been dealt with.
If this is not the case it is now your responsibility to reopen the
Bug report if necessary, and/or fix the problem forthwith.

(NB: If you are a system administrator and have no idea what this
message is talking about, this may indicate a serious mail system
misconfiguration somewhere. Please contact ow...@bugs.debian.org
immediately.)


-- 
1075725: https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=1075725
Debian Bug Tracking System
Contact ow...@bugs.debian.org with problems
--- Begin Message ---
Package: qa.debian.org
Severity: wishlist
User: qa.debian....@packages.debian.org
Usertags: udd

The todolist and dmddetails tables can be quite long, which makes it
difficult to keep track of what data each column is displaying. It would
be useful if the header row could be made sticky so it stays visible
when scrolling through the table.

The tables are using datatables[0] to format the data. It has an
extension called FixedHeader[1] which supports adding this
functionality.

[0]: https://datatables.net/
[1]: https://datatables.net/extensions/fixedheader/

I tested locally by downloading a new bundled datatables.css /
datatables.jss with fixedheader included and adjusting the dmd template
and javascript with the attached patch.

It does work nicely with the todolist table, but I think the colspan /
rowspan in the dmddetails table throws off the sizing of the header when
it becomes sticky. The header cells become larger and then don't align
with the actual columns of the table.

It would be nice if someone who understands web stuff better could turn
this a functional patch.

Cheers,
-- 
James
GPG Key: 4096R/91BF BF4D 6956 BD5D F7B7  2D23 DFE6 91AE 331B A3DB
diff --git i/web/js/dmd.js w/web/js/dmd.js
index 4925098..2fb12bf 100644
--- i/web/js/dmd.js
+++ w/web/js/dmd.js
@@ -32,7 +32,8 @@ $(document).ready(function() {
 
 $('#todolist').DataTable( {
    "paging": false,
-    "info": false
+    "info": false,
+   fixedHeader: true,
 });
 
 var dmddetails = $('#dmddetails').DataTable( {
@@ -40,6 +41,7 @@ var dmddetails = $('#dmddetails').DataTable( {
    "paging": false,
    "info": false,
    "autoWidth": false,
+   fixedHeader: true,
    stateSave: true,
    buttons: [ {
      extend: 'colvis',
diff --git i/web/templates/dmd.erb w/web/templates/dmd.erb
index 44997c0..45519b3 100644
--- i/web/templates/dmd.erb
+++ w/web/templates/dmd.erb
@@ -2,9 +2,7 @@
 <html>
 <head>
 <link href="/css/debian.css" rel="stylesheet" type="text/css">
-<link rel="stylesheet" type="text/css" 
href="/js/jquery-ui-1.13.2/jquery-ui.min.css"/>
-<link rel="stylesheet" type="text/css" 
href="/css/jquery.dataTables.1.13.6.css"/>
-<link rel="stylesheet" type="text/css" 
href="/css/buttons.2.4.1.dataTables.min.css"/>
+<link rel="stylesheet" type="text/css" href="/css/datatables.css"/>
 <link href="/css/udd.css" rel="stylesheet" type="text/css">
 <link href="/css/dmd.css" rel="stylesheet" type="text/css">
 <title>Debian Maintainer Dashboard</title>
@@ -382,14 +380,10 @@
     </p>
 </div>
 </div>
-<script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
-<script type="text/javascript" src="/js/jquery.dataTables.1.13.6.js"></script>
-<script type="text/javascript" 
src="/js/jquery-ui-1.13.2/jquery-ui.min.js"></script>
+<script type="text/javascript" src="/js/datatables.js"></script>
 <script type="text/javascript" src="/js/jquery.cookie.min.js"></script>
 <script type="text/javascript" src="/js/dmd.js"></script>
 <script type="text/javascript" src="/js/removeblankfields.js"></script>
 <script type="text/javascript" src="/js/quicknav.js"></script>
-<script type="text/javascript" 
src="/js/dataTables.buttons.2.4.1.min.js"></script>
-<script type="text/javascript" src="/js/buttons.colVis.2.4.1.min.js"></script>
 </body>
 </html>

--- End Message ---
--- Begin Message ---
Hello,

Bug #1075725 in qa.debian.org reported by you has been fixed in the Git 
repository.
You can see the commit message below and you can check the diff of the fix at:

https://salsa.debian.org/qa/udd/-/commit/95b8c26ff0012f08ad86cf2d6b4bc7e18b0b578f

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

(this message was generated automatically)
-- 
Greetings

https://bugs.debian.org/1075725

--- End Message ---

Reply via email to