Website is not responsive

[Graphicscore]

Currently the website is not really responsive and doesn't scale well on mobile viewports.

Currently the biggest issues are that the charts (bar and pie charts) overflow and do not really scale at all. They should be atleast somewhat readable on mobile devices. I'll attach a screenshot for this. Pie charts next to each other could be placed beneath each other to save space.

The other issue is that the top navigation isn't really suitable for mobile navigation either. I don't really like how the navigation bar on top looks anayway, I think it should be replaced with something more "material style" which would support a burger/expandable menu für smaller viewports.

[yamanidev]

Hello, I'd like to contribute to the project, so please assign this issue to me.
A brief description of the issue would be of tremendous help, for example describing how you wish the website to look on smaller viewports.

[Graphicscore]

@yamanidev Hello, yes ofcourse, I created this issue for myself as a reminder and didn't really thought someone would actually want to help me in this project. I've updated the inital description for this issue (hopefully it is now better understandable). As you may have already seen this is a fork of the ffxivcensus website. The original project doesn't seem to be updated anymore and I plan to bring it back to life with an updated website and updated statistics, probably add more features as well.

If you should have an idea for a better suitable design, feel free to experiment. The current design is more or less unchanged from the original repository.

The generation of the statistics data is still in progress but you can see the current state of the website on https://xiv2.graphicscore.dev . For working with this repository locally, originally this was an php website, which would generate static HTML, I've since removed the php part of the website itself, so it will load the statistics as an XHR json. I will attach an sample json for you to test the UI with, so you have visible data for the statistics. Just place the file into the data folder of the website.

xivdata.zip

[Graphicscore]

@yamanidev Are you still interested in taking on this ticket?

[yamanidev]

Hello, thank you for the mock data, I needed that.
Of course I am interested, unless you're too eager not to share the work haha.

[Graphicscore]

Haha, not at all! There is still plenty of work to be done. The next issue I'll be tackling will be bringing back the most used gear statistics.

[yamanidev]

I will be adding commits to the pull request I created yesterday.

[Graphicscore]

I converted your pull request to a draft so I won't accidentally merge it into master😄

[yamanidev]

Great then :3

[yamanidev]

Upon diving into the codebase, I noticed a lot of things that I personally find off.
Do you mind if we communicate via DMs (I don't have a preference for platform) to discuss the issues I found and what we could do about them?

[Graphicscore]

Sure thing, do you have telegram or discord or something similar?
Discord: Graphicscore#4522
Telegram: Graphicscore

[yamanidev]

I added you on Discord, I have the same cool picture :3