Rework repo buttons (#20602)

* Rework repo buttons

- Replace "New PR" and "Go to File" button with Icon Button
- Move all "Add File" actions into a dropdown button
- Remove most custom styling of clone buttons
- Margin and wiki tweaks

Buttons are now all equal height, mobile layout wraps gracefully.

Fixes: https://github.com/go-gitea/gitea/issues/13671
Replaces: https://github.com/go-gitea/gitea/pull/20375

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

1 files changed, 47 insertions, 52 deletions

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 0734076eff..74eaa6ab32 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -60,55 +60,52 @@
 			</div>
 		{{end}}
 		{{template "repo/sub_menu" .}}
-		<div class="ui stackable secondary menu mobile--margin-between-items mobile--no-negative-margins no-vertical-tabs">
-			{{template "repo/branch_dropdown" dict "root" .}}
-			{{ $n := len .TreeNames}}
-			{{ $l := Subtract $n 1}}
-			<!-- If home page, show new PR. If not, show breadcrumb -->
-			{{if eq $n 0}}
-				{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
-					<div class="fitted item mx-0">
+		<div class="repo-button-row df ac sb fw">
+			<div class="df ac">
+				{{template "repo/branch_dropdown" dict "root" .}}
+				{{ $n := len .TreeNames}}
+				{{ $l := Subtract $n 1}}
+				<!-- If home page, show new PR. If not, show breadcrumb -->
+				{{if eq $n 0}}
+					{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
 						<a href="{{.BaseRepo.Link}}/compare/{{PathEscapeSegments .BaseRepo.DefaultBranch}}...{{if ne .Repository.Owner.Name .BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}{{if .BaseRepo.IsFork}}/{{PathEscape .Repository.Name}}{{end}}:{{end}}{{PathEscapeSegments .BranchName}}">
-							<button id="new-pull-request" class="ui compact basic button">{{if .PullRequestCtx.Allowed}}{{.locale.Tr "repo.pulls.compare_changes"}}{{else}}{{.locale.Tr "action.compare_branch"}}{{end}}</button>
-						</a>
-					</div>
-				{{end}}
-				<div class="fitted item mx-0">
-					<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">
-						{{.locale.Tr "repo.find_file.go_to_file"}}
-					</a>
-				</div>
-			{{else}}
-				<div class="fitted item"><span class="ui breadcrumb repo-path"><a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{EllipsisString .Repository.Name 30}}</a>{{range $i, $v := .TreeNames}}<span class="divider">/</span>{{if eq $i $l}}<span class="active section" title="{{$v}}">{{EllipsisString $v 30}}</span>{{else}}{{ $p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{EllipsisString $v 30}}</a></span>{{end}}{{end}}</span></div>
-			{{end}}
-			<div class="right fitted item mr-0" id="file-buttons">
-				<div class="ui tiny primary buttons">
-					{{if .Repository.CanEnableEditor}}
-						{{if .CanAddFile}}
-							<a href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
-								{{.locale.Tr "repo.editor.new_file"}}
-							</a>
-						{{end}}
-						{{if .CanUploadFile}}
-							<a href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
-								{{.locale.Tr "repo.editor.upload_file"}}
-							</a>
-						{{end}}
-						{{if .CanAddFile}}
-							<a href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
-								{{.locale.Tr "repo.editor.patch"}}
-							</a>
-						{{end}}
-					{{end}}
-					{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame) }}
-						<a href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}" class="ui button">
-							{{.locale.Tr "repo.file_history"}}
+							<button id="new-pull-request" class="ui compact basic button tooltip" data-content="{{if .PullRequestCtx.Allowed}}{{.locale.Tr "repo.pulls.compare_changes"}}{{else}}{{.locale.Tr "action.compare_branch"}}{{end}}"><span class="text">{{svg "octicon-git-pull-request"}}</span></button>
 						</a>
 					{{end}}
-				</div>
-
+					<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button tooltip" data-content="{{.locale.Tr "repo.find_file.go_to_file"}}">{{svg "octicon-file-moved" 15}}</a>
+					<button class="ui basic small compact dropdown jump icon button mr-2">
+						<span class="text">{{.locale.Tr "repo.editor.add_file"}}</span>
+						<div class="menu">
+							{{if .Repository.CanEnableEditor}}
+								{{if .CanAddFile}}
+									<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
+										{{.locale.Tr "repo.editor.new_file"}}
+									</a>
+								{{end}}
+								{{if .CanUploadFile}}
+									<a class="item" href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
+										{{.locale.Tr "repo.editor.upload_file"}}
+									</a>
+								{{end}}
+								{{if .CanAddFile}}
+									<a class="item" href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
+										{{.locale.Tr "repo.editor.patch"}}
+									</a>
+								{{end}}
+							{{end}}
+							{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame) }}
+								<a class="item"href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
+									{{.locale.Tr "repo.file_history"}}
+								</a>
+							{{end}}
+						</div>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+					</button>
+				{{else}}
+					<span class="ui breadcrumb repo-path"><a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{EllipsisString .Repository.Name 30}}</a>{{range $i, $v := .TreeNames}}<span class="divider">/</span>{{if eq $i $l}}<span class="active section" title="{{$v}}">{{EllipsisString $v 30}}</span>{{else}}{{ $p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{EllipsisString $v 30}}</a></span>{{end}}{{end}}</span>
+				{{end}}
 			</div>
-			<div class="fitted item">
+			<div class="df ac">
 				{{if eq $n 0}}
 					{{if .Repository.IsTemplate}}
 						<div class="ui tiny primary buttons">
@@ -118,15 +115,13 @@
 						</div>
 					{{end}}
 				{{end}}
-			</div>
-			<div class="fitted item">
 				<!-- Only show clone panel in repository home page -->
 				{{if eq $n 0}}
 					<div class="ui action tiny input" id="clone-panel">
-						{{template "repo/clone_buttons" .}}
-						{{template "repo/clone_script" .}}
-						{{if not .DisableDownloadSourceArchives}}
-						<button id="download-btn" class="ui basic jump dropdown icon button tooltip" data-content="{{.locale.Tr "repo.download_archive"}}" data-position="top right">
+					{{template "repo/clone_buttons" .}}
+					{{template "repo/clone_script" .}}
+					{{if not .DisableDownloadSourceArchives}}
+						<button id="download-btn" class="ui basic small compact jump dropdown icon button tooltip" data-content="{{.locale.Tr "repo.download_archive"}}" data-position="top right">
 							{{svg "octicon-download"}}
 							<div class="menu">
 								<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.BranchName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-3"}}{{.locale.Tr "repo.download_zip"}}</a>
@@ -135,7 +130,7 @@
 								<a class="item" href="vscode://vscode.git/clone?url={{$.RepoCloneLink.HTTPS}}">{{svg "gitea-vscode" 16 "mr-3"}}{{.locale.Tr "repo.clone_in_vsc"}}</a>
 							</div>
 						</button>
-						{{end}}
+					{{end}}
 					</div>
 				{{end}}
 			</div>