Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reduce repetitive code of Frontend Roadmap Component #292

Merged
merged 4 commits into from
Jul 16, 2024

Conversation

NegiSushant
Copy link
Contributor

Description
This pull request improves the UI and maintainability of the frontend Roadmap component. The changes include:

  • Organizing course data in an array and mapping through it for rendering.
  • Enhancing responsiveness using Tailwind CSS utilities.
  • Improving styling by adding a background color and adjusting padding.
  • Simplifying JSX by reducing repetitive code.

These changes make the component easier to manage, more responsive, and visually appealing.

This PR fixes #291

Copy link

netlify bot commented Jul 10, 2024

Deploy Preview for fossc ready!

Name Link
🔨 Latest commit d0f2065
🔍 Latest deploy log https://app.netlify.com/sites/fossc/deploys/6695d4a12b1cfc0008e89fe1
😎 Deploy Preview https://deploy-preview-292--fossc.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Mr-Sunglasses
Copy link
Member

Hey @NegiSushant , can you please fix the incorrect placement of the arrows ?

Screenshot 2024-07-15 at 10 18 24 PM


</div>
);
<div className="flex flex-wrap justify-center gap-4 mx-4 md:mx-20">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use grid-cols-7 which allows for better control over the placement of the courses and arrows.

);
<div className="flex flex-wrap justify-center gap-4 mx-4 md:mx-20">
{courses.map((course, index) => (
<div key={index}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can also use React.Fragment to group each course with its corresponding arrow which can help ensure that the arrow is placed in the next grid column.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

got it! fixed.

@NegiSushant
Copy link
Contributor Author

NegiSushant commented Jul 15, 2024

hey @Mr-Sunglasses ! I review my code and the result show me after change is:
image
is ok to?

@Mr-Sunglasses
Copy link
Member

Yeah @NegiSushant It looks good, please push those changes :-)

Copy link
Member

@Mr-Sunglasses Mr-Sunglasses left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @NegiSushant

@Mr-Sunglasses Mr-Sunglasses merged commit 6d4dcf1 into FOSS-Community:main Jul 16, 2024
9 checks passed
@NegiSushant NegiSushant deleted the modify_frontend branch August 3, 2024 13:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve UI and Maintainability of Frontend Roadmap Component
2 participants