search

sjsakib / cfviz

Visualizes user data from codeforces.com using the official API
http://cfviz.netlify.com
1.12k stars 70 forks source link

Not responsive for all screen sizes #25

Closed gauravdas014 closed 4 years ago

gauravdas014 commented 4 years ago

Screenshot (222) It will be nice if the website is made responsive to different screen sizes, I would like to contribute to this if permitted.

sjsakib commented 4 years ago

Thank you for reporting.

What screen size causes problem? And how do you plan to fix it?

On Thu, Jul 2, 2020, 7:27 PM Gaurav Das notifications@github.com wrote:

It will be nice if the website is made responsive to different screen sizes, I would like to contribute to this if permitted.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/sjsakib/cfviz/issues/25, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADXT3U2Q27PNZELBP732KLLRZSDKZANCNFSM4OO4NUCQ .

gauravdas014 commented 4 years ago

The problem starts appearing at screen size: 1020 px. After this screen size, the submission heatmap graph gets cropped. At 900 px the chart of verdicts and languages starts getting cropped. I thought to fix the bug using flex. On smaller screen sizes I thought to use the flex-direction column so that the charts align vertically. But it's not working this way. Suggest me if you have any idea how to fix it. I will try to figure it out on my local device and if I can do it, I will let you know.

sjsakib commented 4 years ago

The screenshots you included, they are intended behavior. The charts are horizontally scroll-able. I think they work pretty well. And besides you probably resized the screen after the charts were drawn. If the screen is smaller when the graphs are being drawn, smaller graphs will be drawn.

sjsakib commented 4 years ago

I am closing the issue for now, let me know if you still have something