Fix orientation layout issues and enhance landscape support across screens. #77
Conversation
This file contains 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
- Adjusted layout using BoxWithConstraints and LocalConfiguration to dynamically adapt to landscape and portrait modes. - Resized logo and button based on orientation for consistent layout across devices. - Refined layout spacing for better alignment and readability in both orientations. - Updated UI structure for a cleaner, more flexible layout.
…tions - Adjusted layout to dynamically adapt to both landscape and portrait orientations using LocalConfiguration. - Added scrollable content in ProfileScreen for better usability on small and large screens and in case some more buttons are added in the future. - Modified ProfileButton sizes and spacing based on orientation to maintain consistent UI. - Enhanced padding and alignment, particularly for landscape mode, to improve visual balance.
- Adjusted QuizScreen layout to support both landscape and portrait modes using dynamic padding and alignment. - Updated button sizes, text styles, and spacing for consistent UI across orientations. - Modified QuizOptionButton styling to ensure usability and readability in landscape mode. - Improved background blur effect to maintain focus on content in both orientations.
…trait orientations - Updated QuizPlayScreen to adjust layout dynamically for landscape and portrait modes using LocalConfiguration. - Modified button and text sizes, padding, and alignment for consistent UI across orientations. - Added scrollable content in vertical layouts for better usability in landscape mode and in case more questions are added. - Applied conditional size adjustments to buttons, score display, and question text for an optimized user experience on various screen sizes.
…t orientations - Updated SignInScreen to dynamically adjust layout for landscape and portrait modes. - Resized logo and adjusted spacing based on orientation for a balanced visual experience. - Modified Google sign-in button width, height, and font size to enhance readability across orientations. - Improved top bar and padding for consistent UI on different device orientations.
- Implemented landscape mode tests in each screen’s test class to verify UI rendering in horizontal orientation.
…ine home button UI - Updated the background image on LandingScreen to fit more effectively in landscape orientation, enhancing visual consistency. - Removed the unnecessary black background from the home button for a cleaner, more cohesive UI. - Improved overall layout aesthetics and ensured a balanced appearance across both landscape and portrait modes.
…devices in CI - Adjusted layouts in multiple screens (SignIn, Profile, Quiz, Landing) to enhance support for small screens. - Added `scrollTo` support in tests for components that may be out of view on smaller devices used by CI. - Modified fixed sizes to use relative or adaptive dimensions where possible, improving responsiveness across devices. - Ensured all essential UI elements are accessible and visible on a range of screen sizes, reducing layout issues in automated tests. These updates aim to make the app and tests more resilient on various device sizes, particularly improving CI test pass rates.
…tton accessibility - Updated end-to-end test to use performScrollTo for the Home button, ensuring it remains visible across layouts
- Implemented vertical scroll across various screens, replacing static padding and layout adjustments. - Enhances usability and accessibility for different screen sizes and orientations. - Provides a consistent user experience by preventing layout shifts and enabling smooth scrolling.
…its in tests - Added performScrollTo() for key UI elements in tests to ensure visibility in scrollable containers - Included waitForIdle() after interactions (e.g., clicks) to allow UI to stabilize before assertions
|
rihabbelmekki
approved these changes
Nov 2, 2024
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 pull request enhances layout handling for landscape orientation across multiple screens and ensures UI consistency and improved responsiveness.
SignInScreen,QuizPlayScreen,ProfileScreen, andLandingScreen.LandingScreento better fit landscape orientation.LandingScreenhome button for a cleaner look.Testing: