search

fzaninotto / uptime

A remote monitoring application using Node.js, MongoDB, and Twitter Bootstrap.
http://fzaninotto.github.com/uptime/
MIT License
3.62k stars 703 forks source link

Responsive support for dashboard? #297

Open phanan opened 9 years ago

phanan commented 9 years ago

The current dashboard is built on Bootstrap (v2 originally, and v3 with my fork), which means responsive support should be easy if not out of the box. Problem is, the way the datetime navigator is currently structured -- .btn-group mixing with a dynamically-created progressbar -- makes things ugly and even wrong on a smaller screen:

image

Anyone has an idea how to fix this? I'd be happy to implement the solution.

soullivaneuh commented 9 years ago

Hard to figure a nice solution with this buttons...

Maybe single line table with table-responsive div wrapping them?

phanan commented 9 years ago

Hmm... div.table-responsive is not a bad idea actually. But then we'll need to implement at least 2 of them: the one wrapping those btn, and another for the progress bar above it.

Then, because the bar actually corresponds to the charts underneath it, we may need to wrap them into div.table-responsive as well... And how do (or should) we sync them when user scrolls horizontally?

image

Final concern: If users need to scroll anyway, what's the point of a "responsive" layout? Anyway I'll find some time to implement this and let you guys know.

soullivaneuh commented 9 years ago

Final concern: If users need to scroll anyway, what's the point of a "responsive" layout?

Well, I agreed with that. But how do you want to render responsive a line of 26 buttons without some scroll ? :)

phanan commented 9 years ago

Well, I agreed with that. But how do you want to render responsive a line of 26 buttons without some scroll ? :)

Exactly. But is it a must that we use buttons? Is there another way to achieve the same purpose without them?

soullivaneuh commented 9 years ago

@phanan what is your proposition?

phanan commented 9 years ago

I don't have any :(... that's why I raised this question up. Then again, will try your solution and see how well it goes.

brantje commented 9 years ago

I've tried something, its far from perfect. https://github.com/brantje/uptime/tree/responsive

elboletaire commented 8 years ago

Sooo... still not being responsive? :cry: