Bug 36559: Add sticky table headers to transport cost matrix

To test:
1. APPLY patch and regenerate CSS. ( yarn build )
2. Have many, many branches. To test it is good to have more branches than in a standard k-t-d.
3. Go to Admin > Transport cost matrix
4. Scroll down and to the right, the table headers should stay visible.
5. Hover over any cell, a title should appear like 'Branch A / Branch B'
6. Test in Chrome and Firefox.

This uses position: sticky which has recently gained more widespread browser support:
https://caniuse.com/?search=sticky

Signed-off-by: Brendan Lawlor <blawlor@clamsnet.org>
Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This commit is contained in:
Lucas Gass 2024-04-12 07:38:23 +00:00 committed by Katrin Fischer
parent cdb07c02c3
commit 0cab6ee3d4
No known key found for this signature in database
GPG Key ID: 0EF6E2C03357A834
2 changed files with 25 additions and 2 deletions

View File

@ -4373,6 +4373,29 @@ input.renew {
}
}
/* transport cost matrix */
#transport-cost-matrix {
table {
border-collapse: separate; /* Don't collapse */
border-spacing: 0;
tbody {
tr {
th,
td {
border: 1px solid #dddddd;
padding: 5px;
}
th {
position: sticky;
top: 0;
left: 0;
}
}
}
}
}
/* Permissions */
#permissionstree {

View File

@ -74,9 +74,9 @@
</tr>
[% FOR bf IN branchfromloop %]
<tr>
<th>[% bf.name | html %]</th>
<th title="[% bf.name | html %]">[% bf.name | html %]</th>
[% FOR bt IN bf.branchtoloop %]
<td>
<td title="[% bf.name | html %] / [% bt.name | html %]">
[% IF bt.skip %]
&nbsp;
[% ELSE %]