Two row layout for title and context of pipeline list

[qwerty287]

supersedes #3976

Before:

After:

[pat-s]

Can you add a screenshot?

[xoxys]

Added one to the PR description.

[xoxys]

Im really missing the #<pipeline number> information. Can we add it back?

[qwerty287]

[pat-s]

Would it be better to have it in the second line? This line already holds other static metadata while the first one holds the title information.

[xoxys]

Fine for me as well even if I like it more in the title. If we add it to the second line I would add as the first element and we need to add an pound icon instead of the text #.

[qwerty287]

Can do that, but then I need you CSS help.

The problem is that I'd like to have it in a grid to have icons under icons and text under text. That works for the commit hash because it's always 8 chars, so the width can be fixed, but the pipeline number can be endless. Is there a way to "sync" the width of the ID field over all pipelines in the list?

[xoxys]

Not sure if I can follow. But IMO this is getting way too complicated now. Either keep it in the title as it was before or leave it out and improve it in a dedicated PR.

[qwerty287]

I want to have a consistency in all the second lines. I.e. all pipeline numbers, all commit hashs, all contexts (branch, pr) in one line.
I don't know how to do that with CSS if you can't use a fixed size.

But I also think first line is fine

[xoxys]

Ok got it, thanks. I can look into this in another PR if you like.

[xoxys]

I have looked into this and I am sure that this will not work, at least not with pure CSS.

[xoxys]

@pat-s @anbraten Are you ok to keep it in the title for now until we find a way to add it to the second line? Otherwise we might want to remove it again from this PR to get forward.

[pat-s]

Temporary OK, if you commit to look into this in more detail. The question is just what happens if this is "not so easy" or gets stuck - then we have a complicated discussion.

Maybe the motivation would be higher for a follow-up PR if the workaround wouldn't be included? 🙈️

Your choice, I'm either way.

[xoxys]

Just dont like that we loose a functionality here. To be honest I dont know how to solve the issue with the second line. This is not only an issue with the pipeline number. With the current approach we will get this problem with every other information that can have a dynamic length.

[xoxys]

The other alternative it to accept that we will get a similar look like this with the second line:

@qwerty287 could we live with that? I know its not optimal but I dont even see a way with javascript without adding a lot of complexity.

[qwerty287]

I think on github it looks better, maybe because you can really see the different widths. In the pipeline list these are very small differences, so not directly visible, but you still see that something is wrong and unaligned there.

[xoxys]

Ok then I have no idea how to proceed.

[woodpecker-bot]

Tearing down https://woodpecker-ci-woodpecker-pr-4625.surge.sh