diff mbox series

[3/3] support/scripts/pkg-stats: re-implement the sortable_hint

Message ID 20220728232357.270130-3-sen@phobosdpl.com
State Accepted
Headers show
Series [1/3] support/scripts/pkg-stats: make cells with many CVEs collapsible | expand

Commit Message

Sen Hastings July 28, 2022, 11:23 p.m. UTC 
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>
---
 support/scripts/pkg-stats | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

Comments

Thomas Petazzoni Aug. 1, 2022, 5:02 p.m. UTC | #1 
On Thu, 28 Jul 2022 18:23:57 -0500
Sen Hastings <sen@phobosdpl.com> wrote:

> 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>
> ---
>  support/scripts/pkg-stats | 20 +++++++-------------
>  1 file changed, 7 insertions(+), 13 deletions(-)

Applied to master, thanks.

Thomas
diff mbox series

Patch

diff --git a/support/scripts/pkg-stats b/support/scripts/pkg-stats
index 4b396d3217..7a68b5dca9 100755
--- a/support/scripts/pkg-stats
+++ b/support/scripts/pkg-stats
@@ -750,11 +750,13 @@  var lastColumnName = false;
 const styleElement = document.createElement('style');
 document.head.insertAdjacentElement("afterend", styleElement);
 const styleSheet = styleElement.sheet;
-const collapseRule = ".collapse{ height: 200px; overflow: hidden scroll;}"
-const buttonRule = ".see-more{ display: block;}"
+addedCSSRules = [
+".collapse{ height: 200px; overflow: hidden scroll;}",
+".see-more{ display: block;}",
+".label:hover,.see-more:hover { cursor: pointer; background: #d2ffc4;}"
+];
 
-styleSheet.insertRule(collapseRule);
-styleSheet.insertRule(buttonRule);
+addedCSSRules.forEach(rule => styleSheet.insertRule(rule));
 
 function sortGrid(sortLabel){
 	let i = 0;
@@ -816,8 +818,7 @@  function sortGrid(sortLabel){
 		let rule = "." + listing[0] + " { grid-row: " + i + "; }";
 		styleSheet.insertRule(rule);
         });
-	styleSheet.insertRule(collapseRule);
-	styleSheet.insertRule(buttonRule);
+	addedCSSRules.forEach(rule => styleSheet.insertRule(rule));
 };
 
 function expandField(fieldId){
@@ -887,17 +888,10 @@  function expandField(fieldId){
 
 <a href=\"#results\">Results</a><br/>
 
-<p id=\"sortable_hint\"></p>
 """  # noqa - tabs and spaces
 
 
 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>
 </html>
 """