Add Masonry Grid Layout for Uploaded Images with Expandable View #40
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
✅ Deploy Preview for reachat-storybook ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@steppy452 @amcdnl Please review this PR when you get a chance. |
amcdnl
reviewed
Aug 26, 2024
amcdnl
reviewed
Aug 26, 2024
amcdnl
reviewed
Aug 26, 2024
amcdnl
reviewed
Aug 26, 2024
amcdnl
requested changes
Aug 26, 2024
steppy452
reviewed
Aug 26, 2024
steppy452
requested changes
Aug 26, 2024
|
Hi @amcdnl @steppy452, Thank you for your feedback. I've fixed the issues you pointed out. Please review the changes and let me know your thoughts. |
steppy452
reviewed
Aug 27, 2024
steppy452
reviewed
Aug 27, 2024
| <div | ||
| className={cn( | ||
| theme.messages.message.files.base, | ||
| imageFiles.length < 4 || expanded ? '' : 'grid grid-cols-3 gap-2 w-1/2' |
There was a problem hiding this comment.
and here we can use truncateImages instead
steppy452
requested changes
Aug 27, 2024
There was a problem hiding this comment.
@AntonJames-Sistence just a minor comment to help w/ future maintenance but otherwise lgtm!
…nt breakpoints for masonry grid; apply minor style improvements for handling more than 3 images in the Masonry layout
|
@steppy452, thanks for the review. I addressed your comment and Implemented the maxImageLength variable, let me know what you think. |
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.
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Currently, when users upload images, there is no masonry layout or a way to handle displaying more than three images in a compact and user-friendly manner.
Issue Number: 7
What is the new behavior?
This PR introduces a new feature that allows users to view their uploaded images in a masonry grid layout. When users upload more than three images, the first three images are displayed in a compact masonry grid. If there are more than three images, a +N overlay appears on the third image, indicating the number of additional images. When the user clicks on the +N overlay, the grid expands to show all images.
The update leverages native CSS for the masonry layout, ensuring that the layout is handled efficiently by the browser without the need for additional JavaScript for positioning. This improves both performance and user experience.
Does this PR introduce a breaking change?
Other information