Skip to content

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

Merged
pancakereport merged 3 commits into
mainfrom
banner-color
Oct 27, 2026
Merged

pancakereport merged 3 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.

Templates are now .html, and autoescaped:

  • They were named .html.j2, which Flask does not autoescape, and unlike seating (#116, then #139) sections had no override, so Canvas course names and user names went into the page as raw HTML.
  • Renamed to .html, as seating's are. The landing page is landing.html, not index.html, because main.py searches the React build first and its index.html would take its place.
  • server/test_autoescape.py checks that every template is escaped, that none shares the React page's name, and that a <script> in a course or user name comes out escaped on /offerings and /offerings/new.

Test plan

  • 37 backend tests (4 new), type check, lint and build pass
  • With the old .j2 names, the new escaping tests fail, and the <script> reaches the page unescaped
  • 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).

Flask autoescapes templates whose name ends in .html (or .htm, .xml,
.xhtml, .svg). Ours were named *.html.j2, as seating's were before
berkeley-cdss/seating#139, but without seating's autoescape override, so
Canvas course names and user names were rendered as raw HTML.

Rename them to *.html, as seating now does. The landing page becomes
landing.html rather than index.html, because main.py looks in the React
build first and its index.html would take its place.

test_autoescape.py checks Flask's rule, that every template is escaped,
that no template shares the React page's name, and that a course and
user name containing <script> are escaped on /offerings and
/offerings/new.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@pancakereport
pancakereport merged commit 9ae5efe into main Oct 27, 2026
10 checks passed
@pancakereport
pancakereport deleted the banner-color branch October 27, 2026 21:04
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