Repository navigation
Highlight crisscross td.selected cells, not just selected rows - #66
Merged
Merged
Conversation
The selected-row rule covered tr.selected (batch-action ticks) but not the individual td.selected cells that the click-to-highlight row+column feature marks, so the zebra/hover rules shadowed them and the column highlight was invisible. Extend the rule to td.selected (and its :hover variant) at the same specificity.
Fivell
added a commit
that referenced
this pull request
Oct 13, 2026
Clicking a cell in an index table highlights its whole row and column (the cells get class "selected"), so the clicked value sits at the centre of a cross — handy for tracing a cell to its row and column in a wide table. The three apps that use this theme each shipped their own copy of this JS; move it into the theme alongside the server clock and theme toggle so it lives with the CSS that styles it. Uses jQuery, which ActiveAdmin loads before the theme JS. Also fixes the td.selected fill from #66: the even-stripe rule is `...tbody tr:nth-child(even) > td` (specificity 0,0,2,4) while the selected fill was `...tbody td.selected` (0,0,2,3), so the stripe won on every even row and the cross came out dashed. Matching the `tr >` ties the specificity and lets source order win, so the cross is solid on all rows. Adds a Table demo page to the dummy app plus a screenshot task producing img/crisscross-{light,dark}.png.
Fivell
added a commit
that referenced
this pull request
Oct 13, 2026
Clicking a cell in an index table highlights its whole row and column (the cells get class "selected"), so the clicked value sits at the centre of a cross — handy for tracing a cell to its row and column in a wide table. The clicked cell itself gets "selected-cell" and an accent outline so the origin of the cross stands apart from the row/column tint. The three apps that use this theme each shipped their own copy of this JS; move it into the theme alongside the server clock and theme toggle so it lives with the CSS that styles it. Uses jQuery, which ActiveAdmin loads before the theme JS. Also fixes the td.selected fill from #66: the even-stripe rule is `...tbody tr:nth-child(even) > td` (specificity 0,0,2,4) while the selected fill was `...tbody td.selected` (0,0,2,3), so the stripe won on every even row and the cross came out dashed. Matching the `tr >` ties the specificity and lets source order win, so the cross is solid on all rows. Adds a Table demo page to the dummy app plus a screenshot task producing img/crisscross-{light,dark}.png.
Fivell
added a commit
that referenced
this pull request
Oct 13, 2026
Clicking a cell in an index table highlights its whole row and column (the cells get class "selected"), so the clicked value sits at the centre of a cross — handy for tracing a cell to its row and column in a wide table. The clicked cell itself gets "selected-cell" and an accent outline so the origin of the cross stands apart from the row/column tint. The three apps that use this theme each shipped their own copy of this JS; move it into the theme alongside the server clock and theme toggle so it lives with the CSS that styles it. Uses jQuery, which ActiveAdmin loads before the theme JS. Also fixes the td.selected fill from #66: the even-stripe rule is `...tbody tr:nth-child(even) > td` (specificity 0,0,2,4) while the selected fill was `...tbody td.selected` (0,0,2,3), so the stripe won on every even row and the cross came out dashed. Matching the `tr >` ties the specificity and lets source order win, so the cross is solid on all rows. Adds a Table demo page to the dummy app plus a screenshot task producing img/crisscross-{light,dark}.png.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The selected-row rule highlighted
tr.selectedcells (batch-action ticks) but not the individualtd.selectedcells that the click-to-highlight row + column feature (table_highlight_init.js) marks on a column. The theme's own zebra and hover rules outrank a baretd.selected, so the column half of the crisscross highlight was invisible in both light and dark mode.Extend the existing rule to cover
td.selected(andtr:hover > td.selected, so the highlight survives row hover) at the same specificity. Lets consumers drop their local crisscross overrides.