osu!status page design - Githubissues

peppy commented 9 years ago

Trialling some larger bounties. This one involves implementing a design concept fully.

This is a stand-alone status page, which will be replacing http://stat.ppy.sh

Requirements:

Make a blade template to match the attached page style.
Follow existing styling naming standards.
Reuse existing styles where possible.
Write in a way that can easily have functionality hooked up at a later point (be consistent with class names, feel free to use place-holder foreach loops etc.)
The red "active incidents" area at the top is only visible when there's an active incident.
The world map is open to interpretation, but should have some form of interaction on hover of the visible player clusters.
Graph will be using the styling that results from https://github.com/ppy/osu-web/issues/13, so you are welcome to add a placeholder (or use the latest available d3 version from that thread).
This graph shows both online users and score submissions. The two number boxes below are clickable and will change the graph's mode.
Any further visualisations added should also use d3.
Should be animation on the "Uptime" pie displays that tween as you change tabs.

Bounty offered: 350 (+150 for complete ready-to-connect React implementation with placeholder jsx datasource)

As per bounty guidelines, it is recommended that you claim this issue if you are serious about it.

If you are going to react it up, make sure to check out the profile page implementation for examples to follow.

Ask away for further clarifications.

PSD: http://puu.sh/jYocV/527581fc06.psd

troke12 commented 9 years ago

is recent incidents update from twitter ?

peppy commented 9 years ago

The final source isn't important for now. This is purely getting the design in place. If you are going to add a datasource, and are doing so with react, you should just be supplying an array of test data.

Tewki commented 9 years ago

Peer 'it is recommended that you claim this issue if you are serious about it.', I'm quite interested and have started but had to go to work and won't be home for a few hours; Should go rather quick thanks to flexbox & the psd.

Also, instead of those red gradient borders around the active incidents wouldn't it fit more with a semi-light colored flat warning pattern or a flat color instead of giving the flat design depth.

peppy commented 9 years ago

i tend to agree that the gradients feel a bit out of place. @arflyte?

arflyte commented 9 years ago

Feel free to remove the gradients.

Tewki commented 9 years ago

Pretty much done with the design + layout + functionality, only got the graphs + charts left which tends to be the most horrible part.

Partly the map, cuz of the way d3/DataMaps clips the path you can't really rely on a svg pattern to make the circles out getting clipped everywhere which doesn't look as nice.

Currently also looking at c3 and other libraries that has the right licence + uses d3 to see if it's any better than using a pure sulution of d3 (It just generates the d3 chart) due to the little updates to the graph library issue.

Also did the gradients like But it would be nice if I could get the real header background as the current one is a merged layer and my crop doesn't look the best.

peppy commented 9 years ago

I'm all for looking at extension libraries on top of d3 (on its own, as you say, it can be a beast to tame).

I'll follow up with @arflyte for the header layer.

Gradient change looks okay. Should be able to change the yellow to red or green (to match the three statuses in the incident timeline) too :).

Looking forward to going through your implementation! Post early and we can give you more rapid feedback.

arflyte commented 9 years ago

status-header status-header 2x

Here are the headers. Sorry for the late, kinda missed this.

thehowl commented 9 years ago

As Tewki is out of the bounty maximum limit for completion, can I take over?

peppy commented 9 years ago

Go for it! No need to ask.

Tewki commented 9 years ago

Yea I've become rather inactive for the time and I'm missing my files due to a mess up with my laptop being lost in traveling, so given the old rewrite/prototype to Howl.

troke12 commented 9 years ago

just a little suggestion on Uptime Charts i would recommend this chart using Chart.js kmUs4iH

thehowl commented 9 years ago

Any further visualisations added should also use d3.

thehowl commented 9 years ago

Was wondering - as I am going to implement react on the page, shall I provide the user with some data already on the response (server renders the page and then user gets updated data through http request done by js at a later time), or shall I make it user-rendered since the beginning (like on the user profile)?

peppy commented 9 years ago

Why would you require a second round-trip just to display data? Just include it in the initial request. So much faster.

peppy commented 8 years ago

Increasing bounty on this to 350 (+150)