Closed pbelokon closed 8 months ago
Awesome work, can you fix the spacing here? Also, the button should be a toggle and not a normal button, which indicates whether it is enabled or not.
I will add the hacktoberfest labels once this solution is accepted and ready to be merged.
Please check the mobile responsiveness as well.
@manancodes Just added toggle like effect when patterns are clicked and fixed it's margin on mobile. Is there anything else I should change ?
Hey great work! but can you check it again? Spacing is still not fixed. This is how it looks on the desktop. Check the left and right side of the white container with all the controls.
Also, although the current implementation of the toggle button serves the purpose and fits with the UI. The toggle button is a bad UX implementation. Which will cause confusion. And it is not actually a toggle element.
A toggle button like this would be much better. With sharp corners and black colour. The size of the square toggle should be matched with the size of the square shuffle
button that we have.
And a label on top saying patterns. Like the width
label here:
Lastly, try to add screenshots in your PRs.
@manancodes just fixed it here are the screenshots:
mobile
desktop
By the way I was not sure how mach spacing you wanted me to add so I just added a little let me know if you want me to change it.
shuffle
button. Please ask questions if you are not clear with something. Happy coding!
Sure will do thanks for the explanation
@manancodes I have moved all css components before media, made sure button and top have the same spacing, changed color and size of the toggle. Let me know if there is anything else you want me to change
Great progress! Although this looks much better and consistent to me. Using width 700px instead of 600px. Make sure to have equal spacing between all the controls. It is uneven right now.
Lastly, the toggle button is going out of view in the on
position. Can you look into that again? It needs some adjustments.
@manancodes I my latest commit I did change console width to 700px and fixed overflow of the toggle on. I did try to make spacing equal but I don't think it worked that well maybe create a new issue for that.
Closes #15 @manancodes could you please add hacktoberfest tags to this issue
I have added the toggle patterns button, when enabled shuffling would result in random background patterns. For now I just added 4 patterns but I made the solution scalable, all you need to do it add pattern to the array of objects.