Achievements Page Mobile View #2868
Conversation
tsconfig.json
Outdated
There was a problem hiding this comment.
I was having errors compiling the frontend code, and could not export sharedb-ace.ts to fix it. However, renaming the files seemed to fix it so I have reverted the change in tsconfig.json.
|
Could you provide a screenshot of the UI in the PR description? |
Pull Request Test Coverage Report for Build 8463885828Details
💛 - Coveralls |
| label="View Hidden Achievements" | ||
| onChange={() => changeViewHidden(!viewHidden)} | ||
| /> | ||
| <div className="achievement-manual-editor"> |
There was a problem hiding this comment.
You are wrapping an achievement-manual-editor inside an achievement-manual-editor, is this intentional?
There was a problem hiding this comment.
Nope, I have undid this change in a newer commit.
|
Found another issue while testing the Achievements View, more specifically in the control page. The preview was not formatting the achievements correctly, I'm not too sure if this is also the case in production as I do not have admin access. 
Have edited so now it would reflect what its supposed to look like in the achievements page. 
|
* updated for mobile * fixed formatting * ran test suites * minor achievement card changes * Revert snapshot change * Remove committed temporary file * Revert unnecessary changes * Remove test coverage file * reverted tsconfig change * made achievement card scrollable * Removed additional div * Add css to achivementcontrol so it would format the page properly * fixed formatting issues --------- Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Co-authored-by: sayomaki <sayomayomaki@gmail.com>
Description
Closes #2150
Reorganised the achievements page so that its mobile-friendly. The layout has been adjusted to ensure better readability and interaction on smaller screens. Components are now stacked vertically and wrap properly when the screen size does not allow for horizontal alignment.
Before: There was no mobile display for the achievements page and elements where displayed for landscape view.
After: Elements now stack vertically with each other when reaching mobile breakpoint.
There would be auto scroll for child divs which are larger than their parent divs.
Type of Change
How to Test
Please provide any additional steps or configurations if applicable.
Checklist