feat/course-details-page

[pns-opswerks]

Summary

The course about page (/courses/<id>/about) now uses the Course Details layout from Figma 92:4016, covering LMS 9 (Course Detail Page): course metadata, rating, due-date status and enrollment actions in one view. Enrollment still uses the standard Open edX flow and disabled states, so only the look changes. When the course_assignments app is installed, the page reads provider, content type, duration and the learner's due date from it, with Overdue / Due Soon badges that match the learner dashboard's 7-day window.

Related Ticket / Issue

LMS 9 - Course Details Page:

Type of Change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore / Maintenance

What Changed?

• course_about.html is rebuilt as the Course Details layout: back link, title/rating/published/provider meta, duration and due-date stats, tags, the confidentiality note, hero banner (opens the course video when there is one), status row, CTAs, Description, Objectives, Course Outline and Related Courses.
• Enroll CTAs keep the stock Open edX behavior: View Course, Enroll and Start, and the disabled states for full, invitation-only, closed and already enrolled. The hidden enroll form and AJAX handler are unchanged.
• The description falls back from short_description to overview (sanitized with clean_dangerous_html) to default copy.
• The optional course_assignments integration reads CourseExtraInfo (provider, content type, duration) and the learner's CourseAssignment due date. "Overdue" comes from is_overdue; "Due Soon" only shows within 7 days and never for completed assignments, the same window as DUE_SOON_WINDOW_DAYS in the learner dashboard.
• courseware/_about.scss holds all the Course Details styles, with Google Sans Flex across the page (a scoped rule overrides the global Rockford !important), $cd-* variables, $primary for the main CTA, a responsive related-courses grid and dark-mode overrides.
• Google Sans Flex loads through a <link> in headextra, using the same URL as notifications.js so the browser only fetches it once.
• The old about-page header styles are gone from _extras.scss, and course_about_sidebar_header.html is now a comment-only stub, since the design has no social sidebar.
• New icons and mock related-course art are added under static/images/course-about/.

How Was This Tested?

• Unit tests
• Integration tests
• Manual testing
• Not tested, explanation below:

Testing notes (optional):
Ran just theme-scss (compiles and collectstatic cleanly) and loaded https://local.openedx.io/courses/course-v1:Opswerks+NODE201+2017_T1/about (200). Checked that every image under images/course-about/ and the no_course_image.png fallback return 200. Checked the Due Soon logic against a real NODE201 assignment: in progress, due in 19 days, so no badge. The ship gate passes.

Screenshots / Recordings

Kindly check this card https://app.clickup.com/t/9016295640/PROJ-3515 (I'm unable to attach the demo here - 10mb limit)

Checklist

• Code follows project standards
• Tests were added or updated (or not applicable)
• Documentation was updated if needed
• No secrets, credentials, or sensitive data were committed
• I reviewed my own changes before requesting review

Notes for Reviewers

This is a theme-only PR against release: no backend, OpenLMS parent or MFE changes. course_assignments is optional; without it the page shows placeholders instead of provider, duration and due-date data. Course Outline, Related Courses (disabled CTAs), the rating and the "EASY" / "UI DESIGN" tags are intentional mocks until the backing APIs exist. Google Sans Flex comes from fonts.googleapis.com. After pulling, run just theme to see the changes locally.