Skip to content

Commit

Permalink
Improve the "zebra" style of dynamic tables where rows can be dynamic…
Browse files Browse the repository at this point in the history
…ally hidden
  • Loading branch information
lahwaacz authored and jelly committed Jan 11, 2025
1 parent fcd4736 commit bd4d50b
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 6 deletions.
8 changes: 6 additions & 2 deletions sitestatic/archweb.css
Original file line number Diff line number Diff line change
Expand Up @@ -754,6 +754,10 @@ table.results {
text-align: center;
}

.results [hidden] {
display: none;
}

/* pkglist: layout */
#pkglist-about {
margin-top: 1.5em;
Expand Down Expand Up @@ -1056,12 +1060,12 @@ table td.country {
background: #ffd;
}

.results tr:nth-child(even),
.results tr:nth-child(even of :not([hidden])),
#article-list tr:nth-child(even) {
background: #e4eeff;
}

.results tr:nth-child(odd),
.results tr:nth-child(odd of :not([hidden])),
#article-list tr:nth-child(odd) {
background: #fff;
}
Expand Down
20 changes: 16 additions & 4 deletions sitestatic/archweb.js
Original file line number Diff line number Diff line change
Expand Up @@ -212,8 +212,14 @@ function filter_pkgs_list(filter_ele, tbody_ele) {
rows = rows.has('.incomplete');
}
/* hide all rows, then show the set we care about */
all_rows.hide();
rows.show();
// note that we don't use .hide() from jQuery because it adds display:none
// which is very expensive to query in CSS ([style*="display: none"])
all_rows.each(function() {
$(this).attr('hidden', true);
});
rows.each(function() {
$(this).removeAttr('hidden');
});
$('#filter-count').text(rows.length);
/* make sure we update the odd/even styling from sorting */
$('.results').trigger('applyWidgets', [false]);
Expand Down Expand Up @@ -330,8 +336,14 @@ function filter_signoffs() {
rows = rows.has('td.signoff-no');
}
/* hide all rows, then show the set we care about */
all_rows.hide();
rows.show();
// note that we don't use .hide() from jQuery because it adds display:none
// which is very expensive to query in CSS ([style*="display: none"])
all_rows.each(function() {
$(this).attr('hidden', true);
});
rows.each(function() {
$(this).removeAttr('hidden');
});
$('#filter-count').text(rows.length);
/* make sure we update the odd/even styling from sorting */
$('.results').trigger('applyWidgets', [false]);
Expand Down

0 comments on commit bd4d50b

Please sign in to comment.