feat: Enhance assessment page visuals #50
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit revamps the student assessment page to improve user experience and visual appeal. Key changes include: - Maximizing the assessment container to utilize the full screen width. - Increasing the font size of questions, titles, and text areas by approximately 70% for better readability. - Changing all text colors to black, removing gray variants, to improve contrast and focus. - Fixing the 'Next' and 'Previous' navigation buttons to the bottom of the screen for constant visibility and access. - Enlarging the navigation buttons to make them more prominent and easier to click. - Applying subtle styling enhancements, such as box shadows and adjusted padding, for a cleaner and more modern look.
This commit addresses feedback on the student assessment page, including: - Fixing a scrolling issue where content could be hidden. - Increasing all font sizes by an additional 40% for improved readability. - Applying a solid black border to all input boxes for better visual definition. These changes further refine the user experience and visual design of the assessment page.
This commit refactors the assessment page to fix a critical scrolling issue. The header and footer are now correctly fixed, and only the main content area is scrollable, providing a much-improved user experience. This commit also includes the final visual enhancements based on user feedback, ensuring all requirements for font size, colors, and layout are met.
This commit fixes a persistent scrolling issue on the assessment page by implementing a robust sticky header layout. The page structure has been refactored to make the main content area scrollable while the header remains fixed at the top. This ensures a smooth and predictable user experience, fully resolving the previously reported scrolling problems.
This commit resolves the long-standing scrolling issue on the student assessment page. The root cause was a conflict between the page's layout and the root `<body>`'s flexbox styling. The page has been refactored to work correctly within this context by using a combination of `flex-grow` and `absolute` positioning to create a reliable, contained scrolling area. This ensures the header is correctly sticky and the content scrolls smoothly, providing a stable and predictable user experience.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This commit revamps the student assessment page to improve user experience and visual appeal.
Key changes include: