Repository navigation
Add crisscross cell highlighting for index tables - #68
Merged
Merged
Conversation
Fivell
force-pushed
the
feat/table-crisscross-js
branch
from
October 13, 2026 13:21
d2ca23d to
d9d30e0
Compare
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
force-pushed
the
feat/table-crisscross-js
branch
from
October 13, 2026 13:30
d9d30e0 to
70aa7a3
Compare
Fivell
added a commit
that referenced
this pull request
Oct 13, 2026
Merged
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.
Crisscross cell highlighting for index tables
Clicking a cell in an ActiveAdmin index table highlights its whole row and column — the cells get class
selected, which the theme already paints withvar(--aa-selected)(added in #66). The clicked value sits at the centre of a highlighted cross, which makes it easy to trace a cell to its row and column in a wide table.The CSS for
td.selectedlanded in #66; this adds the small JS that drives it. The three apps using this theme each shipped their own near-identical copy of this script, so it moves into the theme alongside the server clock and theme toggle — the behaviour now lives with the CSS that styles it. It uses jQuery, which ActiveAdmin loads before the theme JS (AA's own checkbox-toggler is jQuery too).A Table demo page was added to the dummy app, plus
test/crisscross_screenshot.rbproducing the shots below (cellgrace@example.comclicked).Light
Dark