Make branch icon stand out more (#20726)

* Make branch icon stand out more

- 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 within the span(or without for that matter), so
simply manually patch this by adding `bottom: 1.px`.

* Use svg

* Apply suggestion

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index f4e0674be40718e4964b8c1877fc99e5d17febb0..86d67cb178748d72f5941b0c30316a551638d553 100644 (file)
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -64,19 +64,17 @@
                                                {{$.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>
-
-                                                       &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>

diff --git a/web_src/less/shared/issuelist.less b/web_src/less/shared/issuelist.less
index a0331a1cbeb5d7675497456ec78ad5bd4e9f926a..2dffe19909a28ce3a830fc3d0fc7fcd28602fc74 100644 (file)
--- a/web_src/less/shared/issuelist.less
+++ b/web_src/less/shared/issuelist.less
@@ -122,7 +122,7 @@
 
   .branches {
     display: inline-flex;
-    padding: 0 6px;
+    padding: 0 4px;
 
     .branch {
       background-color: var(--color-secondary);