Make branch icon stand out more (#20726) (#20774)

- Backport #20726
  - 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
This commit is contained in:
Gusted 2022-08-12 19:38:17 +00:00 committed by GitHub
parent eacab6b10d
commit 85034564c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 7 deletions

View file

@ -60,19 +60,17 @@
{{$.i18n.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>
&laquo;
{{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>

View file

@ -122,7 +122,7 @@
.branches {
display: inline-flex;
padding: 0 6px;
padding: 0 4px;
.branch {
background-color: var(--color-secondary);