Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom UI for a specific client #6

Closed
wants to merge 55 commits into from

Conversation

tecoholic
Copy link
Member

For all changes

  • Ensure adequate tests are in place (or reviewed existing tests cover changes)

Only if submitting a visual change

  • Ensure to attach screenshots
  • Ensure to have UX team confirm screenshots

- The sidebar will house the filtering of the enrollments. So
  the CourseEnrollments component should have access to it.
- Adds support to no-enrollments scenario by hiding the sidebar.
- set max height to avoid cover images stretching the card
- adds some margin below card stack
- switch from horizontal to vertical card on smaller screens
Earlier the card border was only used for the card-body. This
became awkward when orientaiton was switched to vertical in smaller
screens. This commit moves the border to the card itself so both
orientations can have a consistent top accent bar.
Not sure of the reasons, client asked for it.
- set background to white across the board
- moved the pills on the cards above course name
- adds a Learn More button to the card in its Footer
- image on the left
- max height of image set to 460px to prevent long portrait images
  stretching out the header
- breadcrumb moved out of the content area into it's own row
- hide the "program" information
- align the text and button content to center of the div
The icons used in the Figma designs are from material symbols.
So, a npm package that provides them as SVGs is added a
dependency to the MFE and the correct book icon and the
in-progress icons are used.
This doesn't seems to play nice with the themed footer
creating overlap of content and footer.
The enrollment failure URLs were using the React Router's
location.pathname, which omits the basename when the MFE is
deployed in a sub-directory. This commit instead uses the
global.location.pathname (browser location api) to make sure
that the full path including the sub-directory is used.
@tecoholic
Copy link
Member Author

Closing this as this was an adhoc customization done for a quick deployment. We will pursue generic customization separately.

@tecoholic tecoholic closed this Jun 26, 2024
@tecoholic
Copy link
Member Author

NOTE: Do not delete the branch.

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