Make It Mobile Responsive

[amanjagdev]

In order to make the web app mobile responsive, the following tasks need to be implemented.

• Only the left panel should be visible on the mobile view.
• If people are on a mobile device, it should show a small card at the bottom which will say "open this website on the desktop to access it".
• The visitor's and users count along with the GitHub buttons should also be visible on the mobile view also.

[vj-abishek]

@amanjagdev Can I work in it? Then please assign me.

[amanjagdev]

@vj-abishek Sure.. you can work on that 👍

[vj-abishek]

"open this website on the desktop to access it". @amanjagdev This should be fixed at the bottom?

[lakbychance]

Hey @amanjagdev can I pick this up too ?

I have few ideas :-

1. Your instructions panel becomes irrelevant for mobile and tablets so user-agent should be used as a means to identify the device type and not render it.

2. So in mobile/tablets instead of instructions panel, show them disclaimer to open the same in desktop. Also Settings Pane won't be rendered.

3. For desktop, a user might open browser window in split mode so using width as a means to distinguish wouldn't be best alternative. Instead from a certain width - make your app vertically scrollable by placing Settings Pane beneath your Info Pane and also update Instructions Panel text to reflect the same.

4. Also I think it's good to abstract Github metrics in a separate component and reuse it as per requirement.

If you think these are valid suggestions, let me know and I will start working on them.

[amanjagdev]

@vj-abishek I will review your PR In a while...
@lapstjup Those suggestions look great to me... You can also make a PR for the same.

Whosoever's implementation will be good will be accepted and merged :)

[amanjagdev]

@lapstjup There is one thing I would like to add, It's regarding your point 3.
Making the application vertically scrollable and placing InfoPane above SettingsPane would destroy the overall look of it on bigger screen sizes and ratio.
Maybe if you can use queries for the device they are using then after a certain point, the settings pane would be shifted downwards. That would be a better solution in my eyes.
Can you do that?
Rest all the points are great and you may start implementing it.

[vj-abishek]

@amanjagdev I'm working on the PR.

[lakbychance]

@amanjagdev Hey yes I will do that as per width only. I like the current look and feel with left - right focus. I will identify a suitable breakpoint and do the vertical change.

Also I will start working on them probably after an hour or so ? I hope time isn't a problem here.

[vj-abishek]

@amanjagdev here is the preview URL https://react-builder-2f3sx4qo3.vercel.app/. Here is mine #22. Made with pure css

[lakbychance]

This took longer than expected but here is the pull request for this issue - #23.

[amanjagdev]

The issue has been resolved by #23