[test-case-reporting] Make test run list page prettier with CSS

[Rafer45]

Works toward #964.
Looks like this:

[rcebulko]

I think one thing that would work well visually is if each row started with a small tile indicating the status, like a green/red/yellow/orange icons or something similar (or even just a yellow box with the word 'SKIP'). Something like this might work/be a good starting point:

.status-badge {
  width: 60px;
  padding: 2.5px;
  display: inline-block;
  font-family: sans-serif;
  font-variant: small-caps;
  color: white;
}
.status-pass { background-color: green; }
.status-fail { background-color: orange; }
.status-skip { background-color: gray; }
.status-error { background-color: red; }

<span class='status-badge status-pass'>Pass</span>
<span><a href=''>this is a test case blah blah</a></span>

Hopefully this gets close to working out of the box, have not tested yet

[Rafer45]

Hopefully this gets close to working out of the box, have not tested yet

It mostly worked, but the badge looked a little weird, so I tried applying the color to the background of the collapsible -- let me know what you think.

[rcebulko]

Hopefully this gets close to working out of the box, have not tested yet

It mostly worked, but the badge looked a little weird, so I tried applying the color to the background of the collapsible -- let me know what you think.

Screenshot? :)

[Rafer45]

Hopefully this gets close to working out of the box, have not tested yet

It mostly worked, but the badge looked a little weird, so I tried applying the color to the background of the collapsible -- let me know what you think.

Screenshot? :)

Of what looked weird, or to the collapsibles with background colors? I have screenshots of the latter at the top.

[rcebulko]

The reason I prefer the badges over just coloring the collapsibles is a) the color-to-status relation is non-obvious unless you provide a legend or something and b) color-only approach is very inaccessible to color-impaired users and screen-readers

[Rafer45]

Makes sense, let's go with the badge approach. It currently looks like this --

[rcebulko]

Try adding the following rules to .status-badge

margin-right: 10px;
text-align: center;
font-weight: bold;

And try to put it inside the collabsible label section so it lines up with the test name, then we can remove the "had status X" at the end

[Rafer45]

@rcebulko, would you support swapping the colors for fail and error, so that error is orange and fail is yellow?

[rcebulko]

@rcebulko, would you support swapping the colors for fail and error, so that error is orange and fail is yellow?

However you have it in the screenshot in the description right now looks good to me 👍

[Rafer45]

Ok, keeping the colors like that, then.

[rcebulko]

I like the collapsibles too. Right now it's pretty empty, but down the line I can see including test case stats, metadata about the build/PR, duration, and even spaces where people could leave comments with related issues, error info, or reasons why something was skipped. Seems super flexible