Skip to content

Replace Material Design Lite with Bootstrap 5, with seating's Berkeley colors - #19

Open
pancakereport wants to merge 2 commits into
mainfrom
banner-color
Open

pancakereport wants to merge 2 commits into
mainfrom
banner-color

Conversation

@pancakereport

@pancakereport pancakereport commented Oct 26, 2026 •

Copy link
Copy Markdown

Summary

Follows seating's move off Material Design Lite (berkeley-cdss/seating#146), so the two apps look the same and sections no longer uses anything from MDL.

Server-rendered pages (landing /, /offerings, /offerings/new):

  • Rewritten from MDL to Bootstrap 5.3.8, based on seating's templates: navbar, list groups, buttons, form checkboxes, dismissible flash alerts.
  • Self-hosted: server/assets/vendor/bootstrap/ contains the same files seating vendors. These pages previously loaded MDL, Roboto and Material Icons from Google and cdnjs; they now load nothing from another site.
  • style.css is adapted from seating's (only the parts these pages use), and flash.css is copied from it.

Course pages (the React app, already Bootstrap 5 since #15): the same colors.

Colors, as in seating:

  • Berkeley Blue #003262 replaces Bootstrap's blue for buttons, links, tabs and focus rings.
  • The header is Berkeley Blue with a California Gold (#FDB515) bottom border and white links, underlined in gold on hover.

Template names keep the .j2 suffix (seating's are now .html), because index.html is the React build's page and Flask would mix up the two.

Test plan

  • 33 backend tests, type check, lint and build pass
  • Served both halves locally (signed in as a seeded tutor) and screenshotted the landing, offerings, import, a course's lab page and a section page. Every header measures exactly Berkeley Blue rgb(0, 50, 98), with the gold border.
  • The landing page's HTML references no external URLs, and the vendored Bootstrap CSS and JS are served from /assets/

🤖 Generated with Claude Code

Use the same indigo (#3f51b5) as the header of the server-rendered pages,
which use Material Design Lite's indigo theme, instead of Bootstrap 4's teal.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown

🚀 Staging Preview Deployed!

URL: https://preview-sections-pr-19-137456085712.us-west1.run.app

…y colors

Follow seating (berkeley-cdss/seating#146):
- The landing, offerings and import pages use Bootstrap 5.3.8 instead of
  MDL, Roboto and Material Icons. Bootstrap is self-hosted (the same files
  seating vendors), so these pages load nothing from another site.
- Both they and the course pages (the React app) use Berkeley Blue in place
  of Bootstrap's blue, and a Berkeley Blue header underlined in California
  Gold, as seating does.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@pancakereport pancakereport changed the title Match the course pages' banner to the home and offerings pages Replace Material Design Lite with Bootstrap 5, with seating's Berkeley colors Oct 26, 2026
@pancakereport

Copy link
Copy Markdown
Author

do not merge until preview checked out; waiting for redirect uri to be added (will likely happen within 24 hours of this comment).

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