gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stripe large table rows by visible order

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-04 19:40:49 +02:00
parent 2a21a4550c
commit 85b8926877
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/data-display.html
+8
View File
@@ -334,11 +334,19 @@
return compareValues(leftValue, rightValue, state.direction); return compareValues(leftValue, rightValue, state.direction);
}); });
let visibleIndex = 0;
sortedRows.forEach((row) => { sortedRows.forEach((row) => {
table.appendChild(row); table.appendChild(row);
const isVisible = rowMatchesQuery(row, state.query); const isVisible = rowMatchesQuery(row, state.query);
row.classList.toggle('sg-large-table__row--hidden', !isVisible); row.classList.toggle('sg-large-table__row--hidden', !isVisible);
row.setAttribute('aria-hidden', isVisible ? 'false' : 'true'); row.setAttribute('aria-hidden', isVisible ? 'false' : 'true');
row.classList.remove('sg-large-table__row--striped-light');
if (isVisible && visibleIndex % 2 === 0) {
row.classList.add('sg-large-table__row--striped-light');
}
if (isVisible) {
visibleIndex += 1;
}
}); });
if (loadMoreRow) { if (loadMoreRow) {
styles/42-components-data-display.css
+1 -1
View File
@@ -97,7 +97,7 @@
background: var(--color-medium-grey); background: var(--color-medium-grey);
} }
.sg-large-table > .sg-large-table__row:nth-child(odd) { .sg-large-table__row--striped-light {
background: var(--color-light-grey); background: var(--color-light-grey);
} }