[UI] : Implement Mobile Responsiveness for Home page - Githubissues

juspay / hyperswitch

An open source payments switch written in Rust to make payments fast, reliable and affordable

https://hyperswitch.io/

Apache License 2.0

12.34k stars 1.34k forks source link

[UI] : Implement Mobile Responsiveness for Home page #6127

Open Riddhiagrawal001 opened 1 month ago

Riddhiagrawal001 commented 1 month ago

Description

Home page need to be optimised for mobile devices to ensure a seamless user experience across various screen sizes and resolutions.

Pages to Update:

Home page (Route:/dashboard/home)

Requirements

Ensure all elements (text, images, buttons, etc.) scale appropriately for mobile viewports.
Changes for mobile responsiveness doesn't hamper the existing web view
Test across multiple devices and browsers (iOS, Android, Chrome, Safari, etc.).

Current pages in mobile view

Acceptance Criteria

Each page must be fully functional and visually optimised for mobile devices.
Navigation elements (menus, buttons) should be easily clickable and accessible on touchscreens.
The design should maintain visual consistency with the desktop version while being mobile-friendly.
Proper testing and verification on different devices and screen sizes.
Changes for mobile responsiveness doesn't hamper the existing web view

Submission Process:

Ask the maintainers for assignment of the issue, you can request for assignment by commenting on the issue itself.
Once assigned, submit a pull request (PR).
Maintainers will review and provide feedback, if any.
Maintainers can unassign issues due to inactivity, read more here.
For this issue, submit a PR on https://github.com/juspay/hyperswitch-control-center, and link to the issue.

Refer here for Terms and conditions for the contest.

Vaibhav91one commented 1 month ago

Please assign this issue to me @Riddhiagrawal001 .

Riddhiagrawal001 commented 1 month ago

Hi @Vaibhav91one , I have assigned the issue to you, and it is now ready for you to pick up . Let me know if you have issues regarding this

Vaibhav91one commented 1 month ago

Thanks @Riddhiagrawal001. Will let you know if I have any queires.

Vaibhav91one commented 1 month ago

Hi @Riddhiagrawal001, I am having a little trouble with finding the right files. I found the component to work with in the following repo, control center. Please do guide.

gorakhnathy7 commented 1 month ago

yes @Vaibhav91one You need to submit a PR on https://github.com/juspay/hyperswitch-control-center repo itself.

Vaibhav91one commented 1 month ago

Thanks @gorakhnathy7 for the clarification.

Vaibhav91one commented 1 month ago

Hi @gorakhnathy7, when I do npm run start, I get the following error. Is the start script using environment variables by an chance.

Screenshot 2024-10-09 234245

Vaibhav91one commented 3 weeks ago

@gorakhnathy7 Attached the ss, I dont know how it got removed. I was just checking for your response and saw that ss is not present. 😂😂

Vaibhav91one commented 3 weeks ago

Hi @gorakhnathy7 , @Riddhiagrawal001 Does this work ? and also should I make changes in .res or in .res.js.

fix-1

Vaibhav91one commented 2 weeks ago

Please provide feedback @gorakhnathy7 @Riddhiagrawal001.

Riddhiagrawal001 commented 2 weeks ago

Hi @gorakhnathy7 , @Riddhiagrawal001 Does this work ? and also should I make changes in .res or in .res.js.

Also make changes in .res file as .res.js is the trasnpiled version of .res Yes this does looks fine . You can add some padding at the top to look better in mobile version

Vaibhav91one commented 2 weeks ago

Hi @gorakhnathy7 , @Riddhiagrawal001 Does this work ? and also should I make changes in .res or in .res.js.

Also make changes in .res file as .res.js is the trasnpiled version of .res Yes this does looks fine . You can add some padding at the top to look better in mobile version

Will do @Riddhiagrawal001.

Vaibhav91one commented 1 week ago

@Riddhiagrawal001, Raised PR Request