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>
