Improve branch list UI (#27319) (#27324)

Backport #27319 by @wxiaoguang

1. Put the `"octicon-shield-lock"` into the flex container, then it
doesn't need a separate flex box
2. Remove some unnecessary `gt-df` helpers
3. Make `btn` button has the same flex behavior as `ui button`

![image](https://github.com/go-gitea/gitea/assets/2114189/60ce75f7-7fac-4157-9c42-91c7dee9300e)

![image](https://github.com/go-gitea/gitea/assets/2114189/ea606baf-6f52-41e1-b964-c4840d3b1529)

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index f554c851d36928e5781b1f68dd77f1c8e84f595c..370a412efb8345dc1685af00535239574aa731a4 100644 (file)
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -19,12 +19,10 @@
                                        <tbody>
                                                <tr>
                                                        <td>
-                                                               <div class="gt-df gt-ac">
-                                                                       {{if .DefaultBranchBranch.IsProtected}}
-                                                                               <span class="gt-df gt-pr-2">{{svg "octicon-shield-lock"}}</span>
-                                                                       {{end}}
+                                                               <div class="flex-text-block">
+                                                                       {{if .DefaultBranchBranch.IsProtected}}{{svg "octicon-shield-lock"}}{{end}}
                                                                        <a class="gt-ellipsis" href="{{.RepoLink}}/src/branch/{{PathEscapeSegments .DefaultBranchBranch.DBBranch.Name}}">{{.DefaultBranchBranch.DBBranch.Name}}</a>
-                                                                       <button class="btn interact-fg gt-df gt-p-3" data-clipboard-text="{{.DefaultBranchBranch.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
+                                                                       <button class="btn interact-fg gt-px-2" data-clipboard-text="{{.DefaultBranchBranch.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
                                                                        {{template "repo/commit_statuses" dict "Status" (index $.CommitStatus .DefaultBranchBranch.DBBranch.CommitID) "Statuses" (index $.CommitStatuses .DefaultBranchBranch.DBBranch.CommitID)}}
                                                                </div>
                                                                <p class="info gt-df gt-ac gt-my-2">{{svg "octicon-git-commit" 16 "gt-mr-2"}}<a href="{{.RepoLink}}/commit/{{PathEscape .DefaultBranchBranch.DBBranch.CommitID}}">{{ShortSha .DefaultBranchBranch.DBBranch.CommitID}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .DefaultBranchBranch.DBBranch.CommitMessage .RepoLink .Repository.ComposeMetas}}</span> · {{ctx.Locale.Tr "org.repo_updated"}} {{TimeSince .DefaultBranchBranch.DBBranch.CommitTime.AsTime ctx.Locale}}{{if .DefaultBranchBranch.DBBranch.Pusher}} &nbsp;{{template "shared/user/avatarlink" dict "user" .DefaultBranchBranch.DBBranch.Pusher}}{{template "shared/user/namelink" .DefaultBranchBranch.DBBranch.Pusher}}{{end}}</p>
@@ -91,21 +89,19 @@
                                                        <tr>
                                                                <td class="eight wide">
                                                                {{if .DBBranch.IsDeleted}}
-                                                                       <div class="gt-df gt-ac">
+                                                                       <div class="flex-text-block">
                                                                                <a class="gt-ellipsis" href="{{$.RepoLink}}/src/branch/{{PathEscapeSegments .DBBranch.Name}}">{{.DBBranch.Name}}</a>
-                                                                               <button class="btn interact-fg gt-p-3" data-clipboard-text="{{.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
+                                                                               <button class="btn interact-fg gt-px-2" data-clipboard-text="{{.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
                                                                        </div>
                                                                        <p class="info">{{ctx.Locale.Tr "repo.branch.deleted_by" .DBBranch.DeletedBy.Name}} {{TimeSinceUnix .DBBranch.DeletedUnix ctx.Locale}}</p>
                                                                {{else}}
-                                                                       <div class="gt-df gt-ac">
-                                                                               {{if .IsProtected}}
-                                                                                       <span class="gt-df gt-pr-2">{{svg "octicon-shield-lock"}}</span>
-                                                                               {{end}}
+                                                                       <div class="flex-text-block">
+                                                                               {{if .IsProtected}}{{svg "octicon-shield-lock"}}{{end}}
                                                                                <a class="gt-ellipsis" href="{{$.RepoLink}}/src/branch/{{PathEscapeSegments .DBBranch.Name}}">{{.DBBranch.Name}}</a>
-                                                                               <button class="btn interact-fg gt-df gt-p-3" data-clipboard-text="{{.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
+                                                                               <button class="btn interact-fg gt-px-2" data-clipboard-text="{{.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
                                                                                {{template "repo/commit_statuses" dict "Status" (index $.CommitStatus .DBBranch.CommitID) "Statuses" (index $.CommitStatuses .DBBranch.CommitID)}}
                                                                        </div>
-                                                                               <p class="info gt-df gt-ac gt-my-2">{{svg "octicon-git-commit" 16 "gt-mr-2"}}<a href="{{$.RepoLink}}/commit/{{PathEscape .DBBranch.CommitID}}">{{ShortSha .DBBranch.CommitID}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .DBBranch.CommitMessage $.RepoLink $.Repository.ComposeMetas}}</span> · {{ctx.Locale.Tr "org.repo_updated"}} {{TimeSince .DBBranch.CommitTime.AsTime ctx.Locale}}{{if .DBBranch.Pusher}} &nbsp;{{template "shared/user/avatarlink" dict "user" .DBBranch.Pusher}} &nbsp;{{template "shared/user/namelink" .DBBranch.Pusher}}{{end}}</p>
+                                                                       <p class="info gt-df gt-ac gt-my-2">{{svg "octicon-git-commit" 16 "gt-mr-2"}}<a href="{{$.RepoLink}}/commit/{{PathEscape .DBBranch.CommitID}}">{{ShortSha .DBBranch.CommitID}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .DBBranch.CommitMessage $.RepoLink $.Repository.ComposeMetas}}</span> · {{ctx.Locale.Tr "org.repo_updated"}} {{TimeSince .DBBranch.CommitTime.AsTime ctx.Locale}}{{if .DBBranch.Pusher}} &nbsp;{{template "shared/user/avatarlink" dict "user" .DBBranch.Pusher}} &nbsp;{{template "shared/user/namelink" .DBBranch.Pusher}}{{end}}</p>
                                                                {{end}}
                                                                </td>
                                                                <td class="two wide ui">

diff --git a/templates/repo/commit_status.tmpl b/templates/repo/commit_status.tmpl
index 3dc1da61d3c4e4b1c0ff8423d2ef6157560651cb..ebd8a55f65e38e38f23cfa9bcc4745eb627568ac 100644 (file)
--- a/templates/repo/commit_status.tmpl
+++ b/templates/repo/commit_status.tmpl
@@ -1,5 +1,4 @@
 <!-- make sure this matches the color logic in web_src/js/components/DashboardRepoList.vue -->
-<span class="gt-df">
 {{if eq .State "pending"}}
        {{svg "octicon-dot-fill" 18 "commit-status icon text yellow"}}
 {{end}}
@@ -12,4 +11,3 @@
 {{if eq .State "failure"}}
        {{svg "octicon-x" 18 "commit-status icon text red"}}
 {{end}}
-</span>

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 5efb0bfae541a88af4e56fa74b47af708294a14b..1a4e9d16a14368900af00c224a94897e7d8ee682 100644 (file)
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2242,6 +2242,7 @@ table th[data-sortt-desc] .svg {
   right: 2em;
 }
 
+.btn,
 .ui.ui.button,
 .ui.ui.dropdown,
 .ui.ui.label,

diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index f292231319b08170ecdfcf4083ab55976f9c5ffd..0d30249c9cce8451fbdf5eee5542009e2091d12e 100644 (file)
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -30,7 +30,7 @@
   color: var(--color-red);
 }
 
-/* btn is a plain button without any opinionated styling */
+/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
 
 .btn {
   background: transparent;