support/scripts/pkg-stats: re-implement the sortable_hint

This attempts to re-implement the "sortable_hint" feature without
relying on words. The column headers and CVE expand/contract buttons
change color and cursor style on hover.

If Javascript is enabled:

Just like [PATCH 1/3] more rules are applied to the
generated stylesheet before content is loaded.

If Javascript is disabled:

The headers stay pearly white. :-)

Signed-off-by: Sen Hastings <sen@phobosdpl.com>
Signed-off-by: Thomas Petazzoni <thomas.petazzoni@bootlin.com>
This commit is contained in:
Sen Hastings
2022-07-28 18:23:57 -05:00
committed by Thomas Petazzoni
parent d45b5377c1
commit 559648a257

View File

@@ -750,11 +750,13 @@ var lastColumnName = false;
const styleElement = document.createElement('style'); const styleElement = document.createElement('style');
document.head.insertAdjacentElement("afterend", styleElement); document.head.insertAdjacentElement("afterend", styleElement);
const styleSheet = styleElement.sheet; const styleSheet = styleElement.sheet;
const collapseRule = ".collapse{ height: 200px; overflow: hidden scroll;}" addedCSSRules = [
const buttonRule = ".see-more{ display: block;}" ".collapse{ height: 200px; overflow: hidden scroll;}",
".see-more{ display: block;}",
".label:hover,.see-more:hover { cursor: pointer; background: #d2ffc4;}"
];
styleSheet.insertRule(collapseRule); addedCSSRules.forEach(rule => styleSheet.insertRule(rule));
styleSheet.insertRule(buttonRule);
function sortGrid(sortLabel){ function sortGrid(sortLabel){
let i = 0; let i = 0;
@@ -816,8 +818,7 @@ function sortGrid(sortLabel){
let rule = "." + listing[0] + " { grid-row: " + i + "; }"; let rule = "." + listing[0] + " { grid-row: " + i + "; }";
styleSheet.insertRule(rule); styleSheet.insertRule(rule);
}); });
styleSheet.insertRule(collapseRule); addedCSSRules.forEach(rule => styleSheet.insertRule(rule));
styleSheet.insertRule(buttonRule);
}; };
function expandField(fieldId){ function expandField(fieldId){
@@ -887,17 +888,10 @@ function expandField(fieldId){
<a href=\"#results\">Results</a><br/> <a href=\"#results\">Results</a><br/>
<p id=\"sortable_hint\"></p>
""" # noqa - tabs and spaces """ # noqa - tabs and spaces
html_footer = """ html_footer = """
<script>
if (typeof sortGrid === "function") {
document.getElementById("sortable_hint").innerHTML =
"hint: the table can be sorted by clicking the column headers"
}
</script>
</body> </body>
</html> </html>
""" """