Restyle HTML Report (Screen CSS)

[jason-roberts]

I was thinking we could re-style it in a more flat UI/Metro style. For example remove some of the gradients, text shadows, etc etc.

I think this can be done without needing to change the actual HTML and probably without adding/deleting existing CSS classes etc so as to hopefully not affect too much any visual customizations people have made??

I'd like to pick this up and work on it (and post some images for feedback etc) before issuing a PR, but wanted to run it by y'all before looking into it in case it's something you don't see as useful/nice :)

Cheers
Think this is separate from #55 (print css) as it can be done independently.

[MehdiK]

I personally like it very much when I see a newer cleaner version of the UI of the applications I use and I find it boring when the look and feel of the UI never changes. So 👍

It would be better if we didn't touch html structure and the existing CSS; but go for it if you have to. In fact I wouldn't mind seeing a completely different report :) V4 is the best timing for this. With the new design just keep in mind that failed steps can be expanded - so worth having a few inconclusive, failed and unimplemented steps in your report when you're working it.

Another thing that comes to mind is that we could potentially provide this new report as an option (set through configuration). Some may actually not like the new look and would be good if we could provide this as an added feature - depending on how visually and structurally different it's going to be!

[jason-roberts]

Awesome :)

I'll shy away from altering HTML if at all possible as well :)

[MehdiK]

In that case could you please create a separate CSS file, say BddfyMetroCss, and inject it using configuration? That way we can get the new goodness without losing the old one :)

[jason-roberts]

Ok, no worries :)

[mwhelan]

Hi Jason. If you do want to change the HTML then it might be worth creating a new batch processor, etiher inheriting and extending the current HTML report one or a completely new one. That way we can keep our options open and decide if it makes sense to keep both as alternate options or just go with one. Probably the BddfyMetroCss is the way to go, but just saying there's lots of options, depending on your ambitions. :-)

[MehdiK]

Cool. I am excited about the new look. I am a bit bored by the existing one to be honest :)

A few things that IMO need a bit of love, apart from metro styling, are:

• the empty space in front of the summary pane
• the collapse/expand all links on the top of stories
• maybe the "BDDfy" heading on the top too

[jason-roberts]

Cool, I've started playing with this. I'll just play locally first and put some images here before actually fork/PRing :)

[jason-roberts]

Started looking at this last night, I am changing HTML, both to support the styling but also improve its semantic-ness (e.g. using h1 for header instead of div). So I think I will go ahead and create a new batch processor for this enhancement as suggested :)

[jason-roberts]

Still a work in progress, but looks like this atm

[MehdiK]

Nice :)

[MehdiK]

It would be great if we could get this in soon. There is a massive commit storm coming our way in #15 and it's going to touch all reports including html one.

[robdmoore]

Pretty! :)

[jason-roberts]

Thanks, I'm just working with static html/css atm, once I'm happy I'll go and implement in a new batch processor (??)

[MehdiK]

That's cool.

You don't really have to create a batch processor from scratch. You can create a ReportBuilder like this one and perhaps add a constructor overload to HtmlReporter to get the config and reportBuilder as arguments so we can plugin an html reporter with a custom builder in config easily.