Skip to content

fix: curriculum map sidebar spacing and donate campaign param - #66

Draft
ahmaxed wants to merge 1 commit into
mainfrom
fix/curriculum-map-sidebar-and-donate-campaign
Draft

fix: curriculum map sidebar spacing and donate campaign param#66
ahmaxed wants to merge 1 commit into
mainfrom
fix/curriculum-map-sidebar-and-donate-campaign

Conversation

@ahmaxed

@ahmaxed ahmaxed commented Aug 9, 2026

Copy link
Copy Markdown

Reworks the curriculum map sidebar in the astro-react template and corrects the donate link's campaign tag.

Sidebar structure (curriculum-map.astro)

  • Section headers show a module count (3 modules), module headers show a lesson count (0/6), filled in from stored progress.
  • Modules are wrapped in a .modules element so they share one vertical rail.
  • The completed badge is replaced with an inline checkbox plus screen-reader-only status text.
  • Stored progress slugs are validated against /^[a-z0-9-]+$/ before being applied.

Sidebar spacing and alignment (curriculum-map.css)

Section divider was not centred. .navigation's grid gap and .section + .section's padding-top are both --space-lg, so the border is centred in the box model. But the section above does not end at its last visible text: the last lesson row adds padding-bottom: var(--space-sm) (9px), and global.css's li { margin-bottom: var(--space-xs) } leaks into .list for another 4.5px. Real gap was ~40px above vs 27px below. .modules now carries a matching negative margin-bottom to pull the section's bottom edge back to the text.

Active row border was left of the module rail. Taking x = 0 at the section's content edge:

x
.modules rail (border-left) 0.25rem
.item-link left edge, before -0.5rem + 1px
.item-link left edge, after 0.25rem

The row started 0.75rem left of the rail, bleeding into the sidebar padding. margin-left is now calc(-1 * (var(--space-md) + 1px)) so the 3px indicator lands on the rail, with padding-left compensating to keep the checkbox and title at 2.25rem + 4px, pixel-identical to before. The right bleed is unchanged.

Colour. The active row's border and checkbox both use --blue-mid instead of --yellow-gold.

Nav (nav.css)

Header bottom border, inset nav divider, tighter button line height.

Donate link (nav.tsx)

campaign=test-2026 to campaign=universal-nav-button. The value was a hardcoded literal, not interpolated, and was the only occurrence in the repo.

Testing

pnpm test passes: 4 files, 144 passed, 1 skipped.

Note that the suite covers layer generation, schemas, template validity, and framework package.json files. Nothing imports these components or checks the donate URL, so the CSS and nav changes are not covered by automated tests and were verified by reading the box model rather than in a browser. files/framework/astro-react/ has no node_modules locally, so the template's own typecheck and lint were not run.

Unrelated issue spotted

nav.tsx:5 imports ../../donation-config.json, which resolves to files/framework/astro-react/donation-config.json. That file does not exist anywhere under files/. If it is not generated at scaffold time, cfg.donationId in the donate URL is broken independently of this change. Not touched here.

🤖 Generated with Claude Code

Rework the curriculum map sidebar and correct the donate link's campaign
tag in the astro-react template.

curriculum-map.astro
- Add module and lesson counts to the section and module headers
- Wrap modules in a .modules element so they share one vertical rail
- Replace the completed badge with an inline checkbox and screen reader
  only status text
- Validate stored progress slugs before applying them

curriculum-map.css
- Centre the section divider: the last lesson row's padding and the
  global li bottom margin sit below the last visible text and pushed the
  divider low, so pull the section's bottom edge back up to the text
- Align the active lesson row's left border with the module rail instead
  of letting it bleed into the sidebar padding, keeping the row content
  at its original position
- Use --blue-mid for the active row's border and checkbox

nav.css
- Add a header bottom border, inset the nav divider, and tighten button
  line height

nav.tsx
- Rename the donate link campaign from test-2026 to universal-nav-button

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@ahmaxed
ahmaxed marked this pull request as draft August 10, 2026 11:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant