[web ui] make page float in center and add progress bars

[matthiasbeyer]

I'd love to have some more CSS in the web UI.

I suggest using zurb foundation as a CSS framework. I had good experiences with it despite I'm not a web dev.

Some points:

• The whole content is floated to the left. I think it'd be better to center the whole thing with nice borders left and right (Like this)
• Progress bars next to the numbers would be awesome to visualize progress (example)
• The tables could be styled a good bit (example) vitiral: I am planning on removing tables

[petejodo]

commenting as a web dev, Foundation (and bootstrap too) may be more than you what need, not sure what requirements @vitiral is looking for. While boring, bootstrap is probably a better pick since it's widely known, making it easier for others to contribute (even though seeing the use of Elm, maybe this isn't a requirement 😉 ). Bootstrap is also easier to use.

Personally, I've been messing around with Bulma and like it a lot

[matthiasbeyer]

Ah, thanks for reminding me. Elm is definitively an idea over JavaScript! Because type safety. Have no experience with it, though.

[vitiral]

One of the reasons I started this project was to learn new things. I tried out Angular2 + typescript (didn't like it) and was switching to react when I discovered Elm -- hence why it was chosen.

I'll take a look at alternativ CSS styles, but I am currently quite happy with what exists.

I took out the tables suggestion, as I am planning on removing them. I agree with progress bars. I'm not sure about your first suggestion... what should not be floated to the left?

[matthiasbeyer]

what should not be floated to the left?

The whole content. For example this:

Is what I see in one of my repos (don't mind the background image, I have transparency if the window is not active 😄). The whole thing is floated to the left, leaving half the screen empty. With a 24" monitor, this is okayish ... with a 27" monitor this is ugly and if we go further up the size of the monitor, this becomes a neck-breaker 😄

[vitiral]

Ah, I see now. Thanks!