uptime icon indicating copy to clipboard operation
uptime copied to clipboard

Responsive support for dashboard?

Open phanan opened this issue 10 years ago • 8 comments

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.

phanan avatar Jan 27 '15 03:01 phanan

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

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

soullivaneuh avatar Jan 27 '15 14:01 soullivaneuh

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.

phanan avatar Jan 27 '15 15:01 phanan

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 ? :)

soullivaneuh avatar Jan 27 '15 16:01 soullivaneuh

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?

phanan avatar Jan 28 '15 01:01 phanan

@phanan what is your proposition?

soullivaneuh avatar Jan 28 '15 08:01 soullivaneuh

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.

phanan avatar Jan 28 '15 10:01 phanan

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

brantje avatar Feb 08 '15 12:02 brantje

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

elboletaire avatar Dec 09 '15 14:12 elboletaire