#16 problems section #18
Conversation
✅ Deploy Preview for codeutsava ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
For proper animation you can try to explore some library like react-spring. They usually help with these animations. |
Sir I wanted to use Framer, or maybe this also works. But I did not know we can use libraries, I wanted to install react icons also but sir said to use pngs |
|
"Load More" functionality is correct but when "Show less" is pressed it isn't cascading smoothly. |
|
@sahil9001 @prakhar-asaiya Please review the animations, (only fadeIn works) and tell as required. |
|
This answer describes what I'm exactly pointing at https://stackoverflow.com/a/33931219 . I think this should be achievable by using the mentioned css in the answer |
| padding-bottom: 0; | ||
| box-sizing: border-box; | ||
| font-family: "Poppins", sans-serif; | ||
| } |
There was a problem hiding this comment.
All mentioned properties are redundant. Already covered in the base css.
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| gap: 4rem; | ||
| width: 100%; | ||
| } |
There was a problem hiding this comment.
Use display : grid instead of flex, with grid-template-columns: repeat(2 ,1fr) for keeping 2 items per row.
|
|
||
| .codeutsava__section8-image { | ||
| transition: all 0.2s ease-in-out; | ||
| width: 100%; |
There was a problem hiding this comment.
Add image height as 20rem
|
Added the fadeOut animation. |
|
Impressed by your work! Keep it up! |
Structured previous issue into right folders along with few styling changes
Added problemsData
Added LoadMore and ShowLess button to show all or only 2 problems at a time
Added Modal opening on each problem passing its data to the modal child component
Styling of the modal can be better done once full statements are received.
Added animation wherever possible.
Not able to figure out how to add load more and show less animation, as I'm slicing the array Data rather than controlling single cards