Make branch icon stand out more

[Gusted]

• Currently the branch icon is "squashed" between the two branch names and feels a bit "amateur-ish" to my feeling(relative to other UI elements).
• This patch tries to improve that by making the icon bigger and by adding some margin to not have a "squashed" icon.
• This patch also includes a "fix", for some reason this symbol is not centering correctly. So apply allign-items: center to the top div

Before:

After:

[silverwind]

Font glyphs will render differently based on the used font. Use svg gitea-double-chevron-left instead:

[silverwind]

Did a few tweaks, try this patch:

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index d6d95e900..86d67cb17 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -63,21 +63,19 @@	{{else}}	{{$.locale.Tr .GetLastEventLabelFake $timeStr (.Poster.GetDisplayName | Escape) | Safe}}	{{end}}	{{if .IsPull}} -<div class="branches"> +<div class="branches df ac">	<div class="branch"> -<a class="bold" href="{{.PullRequest.BaseRepo.HTMLURL}}/src/branch/{{PathEscapeSegments .PullRequest.BaseBranch}}"> +<a href="{{.PullRequest.BaseRepo.HTMLURL}}/src/branch/{{PathEscapeSegments .PullRequest.BaseBranch}}">	{{/* inline to remove the spaces between spans */}}	{{if ne .RepoID .PullRequest.BaseRepoID}}<span class="truncated-name">{{.PullRequest.BaseRepo.OwnerName}}</span>:{{end}}<span class="truncated-name">{{.PullRequest.BaseBranch}}</span>	</a>	</div> - -<span class="branch-icon">{{svg "gitea-double-chevron-left"}}</span> - +{{svg "gitea-double-chevron-left" 12 "mx-1"}}	{{if .PullRequest.HeadRepo}}	<div class="branch"> -<a class="bold" href="{{.PullRequest.HeadRepo.HTMLURL}}/src/branch/{{PathEscapeSegments .PullRequest.HeadBranch}}"> +<a href="{{.PullRequest.HeadRepo.HTMLURL}}/src/branch/{{PathEscapeSegments .PullRequest.HeadBranch}}">	{{/* inline to remove the spaces between spans */}}	{{if ne .RepoID .PullRequest.HeadRepoID}}<span class="truncated-name">{{.PullRequest.HeadRepo.OwnerName}}</span>:{{end}}<span class="truncated-name">{{.PullRequest.HeadBranch}}</span>	</a>	</div> diff --git a/web_src/less/shared/issuelist.less b/web_src/less/shared/issuelist.less index 1d7f87ad8..2dffe1990 100644 --- a/web_src/less/shared/issuelist.less +++ b/web_src/less/shared/issuelist.less @@ -121,9 +121,9 @@ } .branches { display: inline-flex; - padding: 0 6px; + padding: 0 4px; .branch { background-color: var(--color-secondary); border-radius: 3px; @@ -134,14 +134,8 @@ overflow: hidden; text-overflow: ellipsis; max-width: 10em; } - - .branch-icon { - top: 1.5px; - margin: 0 .2em; - position: relative; - } } > .item + .item { border-top: 1px solid var(--color-secondary);

[Gusted]

Thanks @silverwind! Applied the patch, d5f772b