refactor(ui): implement responsive layout for Home, User Profile, and Topics#40
Merged
refactor(ui): implement responsive layout for Home, User Profile, and Topics#40
Conversation
This commit replaces the `LazyColumn` in `HomeScreen` with an adaptive `LazyVerticalGrid` to better support various screen sizes and improves the preview configuration. Key changes: - **Layout**: Migrated from a single-column list to a `LazyVerticalGrid` using `GridCells.Adaptive(minSize = 250.dp)`. - **Styling**: Updated padding and spacing logic to utilize `Arrangement.spacedBy` for both horizontal and vertical axes within the grid. - **Cleanup**: Removed the "Available Services" header text to streamline the grid presentation. - **Previews**: Added explicit "Mobile" and "Desktop" `@Preview` configurations with specific dimensions to verify responsiveness.
This commit refactors the topics display to be more responsive and increases the number of topics loaded per request. Key changes: - **UI**: Updated `TopicGrid` to use `GridCells.Adaptive` with a minimum size of `200.dp`, replacing the fixed 2-column layout for better multi-device support. - **ViewModel**: Increased `perPage` parameter from 10 to 20 in `fetchTopics` to improve content density during pagination. - **Documentation**: Fixed a minor casing inconsistency in the `AttributionDisplay` documentation.
This commit refactors the `UserHeader` component to improve its layout and responsiveness across different screen sizes.
Key changes:
- **Responsive Design**: Introduced `BoxWithConstraints` to detect screen width. On large screens (>600dp), social links are now moved to the same row as user statistics to optimize space.
- **Component Refactoring**: Extracted social link logic into a standalone `SocialLinkItems` composable to reduce duplication and improve maintainability.
- **UI Tweaks**:
- Updated `UserStatItem` row to use explicit spacing (`24.dp`) instead of `Arrangement.spacedBy`.
- Adjusted vertical padding and spacing between the avatar, stats, bio, and social links for a tighter visual density.
- Added `modifier` support to `UserHeader` and `SocialLinkItems`.
lackary
added
the
refactor
|
🎉 This PR is included in version 0.14.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Related Issues
Closes #39
Type of Change
Please check the main type of change this PR introduces. If there are multiple, please select the most significant one.
Description
This PR refactors the UI of the main screens (
HomeScreen,UserDetailScreen, andGalleryScreen) to implement Responsive Web Design (RWD), ensuring a better user experience across mobile and desktop devices.Key Changes:
User Profile (
UserHeader):BoxWithConstraintsto detect screen width.SocialLinkItemscomponent to reduce duplication.UserStatItemto use explicit24.dpspacing for better visual separation.Home Screen:
LazyColumnwith an adaptiveLazyVerticalGridusingGridCells.Adaptive(minSize = 250.dp).Topic List (Gallery):
GridCells.Adaptive(minSize = 200.dp)instead of a fixed 2-column layout.perPage) from 10 to 20 to improve content density on larger screens.How to test it?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.
Tested Platforms:
Test Details:
HomeScreenshows a single column (or 2 narrow ones) andUserHeaderstacks social links at the bottom.HomeScreendisplays multiple columns adaptive to width.UserHeadermoves the social links next to the "Likes/Photos" stats.Review Checklist
Before submitting this PR, please confirm the following: