feat: collapsible section bands and a flat table treatment for INQUIRE listings - #7
Open
cjt-0627 wants to merge 3 commits into
Open
feat: collapsible section bands and a flat table treatment for INQUIRE listings#7cjt-0627 wants to merge 3 commits into
cjt-0627 wants to merge 3 commits into
Conversation
CCXP styles its section header rows through the .class1 rule in its own stylesheet, which paints white text on a blue band. The main scope clears that band along with every other table background, but none of the white text rules can reach the row: they all match on a colour attribute or an inline style, and .class1 sets the colour from a stylesheet instead. The headings were left as white text on the white page. Restore a muted band for those rows so the headings stay visible, for example the 向度 groupings on the general education listing. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Long listings such as the general education curriculum stack every course of every section into one table, so reaching a later section means scrolling past all of the earlier ones. Turn each section band into a toggle that folds the rows underneath it, up to the next band. CCXP reuses .class1 for column header rows too, so a band is recognised by its structure instead: a row holding a single spanning cell. The heading nodes move inside the button, which keeps the heading text as the accessible name and leaves aria-expanded to carry the state. Sections start collapsed and the state lasts for the page view. A toggled row drops the restored band and reads as a heading with a rule under it and a chevron at the end of the row. Sections that hold nothing are dropped rather than shown: a band with no rows under it is hidden, as is a table rendered without a single row, along with the heading sitting directly above it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
CCXP renders every listing with ridged table borders and cellspacing, so each page reads as a grid of boxed cells. Collapse the frame down to horizontal rules: drop the table border, keep the cells tight, underline the column header row more heavily than the data rows, shade alternate rows, and tint a row on hover. Listings carry a dozen columns, so the padding stays small and the header wraps rather than pushing the page into a sideways scroll. Only tables carrying CCXP's listing header rows are treated this way. The same markup builds forms and page layout elsewhere, and those tables lean on the original frame to stay legible. Table widths are left alone for the same reason. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
cjt-0627
changed the title
cjt-0627
changed the title
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.
Depends on #6. Please merge that one first — this branch is built
on top of it.
What this changes
Two related improvements to INQUIRE listings, kept as separate commits.
1. Section bands become toggles
The general education listing puts every course of every section into a single
83-row table, so reaching a later section means scrolling past all the earlier
ones. Each section band now folds the rows underneath it, up to the next band.
2. Listings get a flat table treatment
CCXP renders listings with ridged borders and cellspacing, so a page reads as a
grid of boxes. Listings now use horizontal rules only, a more heavily
underlined column header row, alternating row shading and a hover tint.
This is scoped with
table:has(tr.class1, tr.class2)so it only reaches reallistings. The same markup builds forms and page layout elsewhere — the entry
form on
JH62f001.php, for one — and those tables need CCXP's original frameto stay legible. Table widths are left alone for the same reason.
Trade-offs worth reviewing
:has()support (Chrome 105+, Firefox 121+). The alternative is tagginglisting tables from
sections.tsand selecting on a data attribute, whichwould make the styling commit depend on the feature commit. Happy to switch
if the support floor matters.
and there is no persistence, so a reload collapses everything again. Both are
easy to change if you would rather have it the other way.
without sideways scrolling once the content area is about 930px — a 1280px
window with the classic sidebar just clears it. Narrower windows still
scroll. Forcing mid-word breaks would close the gap but shreds course codes
(
11510GEC 110301breaks into four lines), so it was left out.Testing
Five tests in
test/main/main-sections.test.tscover the collapse/expand roundtrip, column header rows not being mistaken for bands, empty bands and empty
tables being hidden while populated ones are left alone, and the enhancement
being idempotent.
bun run check: typecheck, lint and format pass. Tests are 67 passed, 1failed —
test/inquire/inquire-captcha.test.tsalready fails on a cleancheckout of
mainat 06daa52 and is unrelated to this PR.Demo