Expanding tiles and return to it's original position
- Dominant language
- JavaScript
- Stars
- 4.3k
- Forks
- 324
- PR merge metrics
- No merged PRs in 30d
Description
I'm having issues when trying to expand elements of the grid and returning them to the original position when clicking again on them.
See example, and desired functionality below:
https://codepen.io/Accao/pen/PKxWvB
Expanded tiles can be one, two, three, or four columns wide (I've used 3 columns for all the tiles expanded in the example).
Tiles in the first and second columns need to expand from the same row position and from the left of the grid (See 5 and 11 how they work, good.) And tiles of the 3rd and 4th column need to expand from the same row position and from the right of the grid.
The tiles 2, 6, 9 and 14 need to expand from the very left, and when clicked again, return to it's original position. Same for the tiles from the 3rd and 4th column, they expand correctly but don't come back to the original position.
I've been trying to achieve this with the fit properties with no luck.
Any help would be much appreciated.
Thank you @desandro ,
Alejandro
Contributor guide
Research direction
Start with the linked CodePen example and review Packery's tile expansion behavior, including the fit properties mentioned in the issue. Reproduce the cases for tiles 2, 6, 9, and 14, then verify that tiles expand from the required grid edge and return to their original positions when clicked again.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100