courses: add courses UI revamp (fixes #9977)#9978
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 87226202b5
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
Pull request overview
This PR implements the “Add Courses” UI revamp (fixes #9977) by making the course details form collapsible to prioritize step editing space, and by updating the step action UI to a card-based attachment layout.
Changes:
- Wrap the course details form in a Material expansion panel and auto-collapse it when step editing opens.
- Replace the step action button row (test/resource/survey) with a responsive “attach card” grid.
- Update layout/styling in the add-courses view to support the new structure.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/courses/add-courses/courses-step.scss | Adds styling for the new card-based step attachment action UI. |
| src/app/courses/add-courses/courses-step.component.ts | Replaces the old “add step” output with a stepEditorOpenChange signal used to collapse course details while editing steps. |
| src/app/courses/add-courses/courses-step.component.html | Updates step actions to a 3-card grid for adding/updating tests, resources, and surveys. |
| src/app/courses/add-courses/courses-add.scss | Adjusts layout and styles for the new collapsible course-details panel and field layout grid. |
| src/app/courses/add-courses/courses-add.component.ts | Adds expansion state + submit attempt state; collapses details when step editor opens and expands on invalid submit. |
| src/app/courses/add-courses/courses-add.component.html | Introduces the expansion panel around course details and wires up step-editor open events. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@codex review |
|
Codex Review: Didn't find any major issues. Keep them coming! ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
Fixes #9977