Build: highlight the name of the version

[humitos]

I find pretty hard to know what's the version of the current build on the build details' page, so I want to make it more visible.

I'm following the same style/pattern we are following for the build id and I like it.

[humitos]

This is how it looks with the latest changes.

Versions listing page

Build details page

I like it 👍🏼 . Let me know if you have any other feedback here.

[agjohnson]

I didn't think about the listing view, I don't think this quite works there. As a breadcrumb, Version has gone from a descriptor of the version type to just a navigation item.

The reason the verbose name of the version type is in there is to differentiate between versions and pull request builds:

What you have here is going to make one style for versions (Versions / {name} / #1234) and a separate style for pull requests (Pull request #999 / #1235). I think we should stick with consistency here and not use the extra breadcrumb section in the listing view -- that is, keep what we have now on the listing view.

The header change mostly works on the build detail view though, but I'd suggest we always have the extra Versions breadcrumb for navigation:

• Versions > {name} > Builds > #1234
• Versions > Pull request 999 > Builds > #1235

[agjohnson]

djlint isn't picking up on the conditional start/end tags and is breaking indenting. I believe in other templates we use {# fmt:off #}/fmt:on comments around these conditionals to fix this.

[humitos]

This is how it's looking now. Looks great to me!

---

---

[agjohnson]

The build listing is still off. I don't think we should put a breadcrumb like this in the build list, from my comment here:

• Build: highlight the name of the version #625 (comment)

For consistency that should still be Version latest and Pull request 999. It's too noisy with the Versions breadcrumb in every line.

It's probably easiest overall to just drop the include and have the build listing display what it was previously and the build detail page to use what you have here. The build detail page looks good now, the listing view is the only issue. This would also avoid the djlint formatting issue I noted.

[agjohnson]

And some small adjustments, my main feedback is still at:

• #625 (comment)

[agjohnson]

Ordering is off here, see https://fomantic-ui.com/collections/breadcrumb.html

Suggested change

	<span class="section">
	<span class="divider">/</span>
	<span class="divider">/</span>
	<span class="section">

[agjohnson]

Suggested change

	<span class="section">
	<span class="divider">/</span>
	<span class="divider">/</span>
	<span class="section">

[humitos]

For consistency that should still be Version latest and Pull request 999. It's too noisy with the Versions breadcrumb in every line.

I tend to agree here. However, the motivation of this PR was to visually distinct the word "Version" from the name of the version itself. So, if we are removing the breadcrumb here I would like to use a different color at least for the name of the version.

An idea:

• It uses code for the version name
• It uses grey color for it

I want to highlight the name of the version somehow over the other elements of that row.

[agjohnson]

This breaks styling in a few ways though, and I'm not really sure the version names sticking out on the listing view header is even a problem. I mentioned that using .ui.grey.text breaks links style a couple times, but this type of change also breaks styling consistency from all other listing views. I'd rather we're not altering the look and feel listing view to listing view.

The chip concept was meant to fill this need for a prominent, succinct UI element. The build list already has a version chip for this:

Again, the breadcrumb and header view looks good, I'm only -1 on altering the listing view