DEV Community 👩‍💻👨‍💻


Posted on

OSD600 r0.4 release

Im my previous two posts, planning and progress I outlined the reason why I chose this project, what my original plans were, and later how and why I deviated from those original plans.

In short, I discovered that the project already uses an outdated version of Material UI, so to be as close to the original stack as possible, I decided make more heavy use of MUI to alter the project in order to make it responsive.

In my PR, I made the following changes:

  • Upgraded Material UI to V5 (latest stable version)
  • Implemented a Theme Provider for MUI
  • Added responsive font support (used in the nav title)
  • Reworked navigation, so react-router-dom is now capable of doing in-site, SPA style navigations (no complete page reload needed)
  • Implemented NavButton, that reacts to the current in-site history API navigation pathname (active buttons are disabled)
  • Altered the top navigation bar, in mobile view a hamburger menu is shown instead of the normal nav buttons
  • Implemented a navigation drawer, only visible on mobile view
  • Removed the limitation that bails out of rendering in mobile view
  • Moved the game cards to MUI cards
  • Introduced logic to break the camera view below the hand card in mobile view

Because of the extent of my changes and subsequent merges from the maintainer, I had to resolve merge conflicts between the repo's main branch and my PR. Also, I did extensive testing on both desktop and mobile devices to make sure the application works as expected.

During this process I did get a chance to brush up on, and deepen my Material-UI knowledge. The project had some significant changes since I last had a chance to work with it.

At the time of writing, the PR was not yet merged, because of the relatively large amount of code and busy schedule of the code maintainer. The PR was posted on the 5th of December, so ample time was given to review and merge. Any additional questions were, and will be promptly answered.

Top comments (0)

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.