Reorder repo search/branch-picker/buttons; use dropdown for clone.

public/custom-style.css

@@ -30,4 +30,17 @@
 }
 #repo-desc {
     font-size: 1.2em;
-}
+}
+
+/* Undo gitea's repurposing of left/right for attached objects (e.g. buttons) */
+.ui.left.attached, .ui.right.attached, .ui.left.action {
+  float: unset;
+}
+
+.clone-grid {
+  display: grid;
+  grid-template-columns: 0fr 1fr;
+  grid-column-gap: 1em;
+  align-items: center;
+  text-align: right;
+}

templates/repo/branch_dropdown.tmpl

@@ -1,6 +1,8 @@
 <div class="fitted item choose reference">
+	{{ $showCommitCount := and (.Repository.UnitEnabled $.UnitTypeCode) (not .IsBareRepo)}}
 	<div class="ui floating filter dropdown custom" data-can-create-branch="{{.CanCreateBranch}}" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}">
-		<div class="ui basic small compact left attached button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
+		<div class="ui basic {{if $showCommitCount}}labeled button{{else}}buttons{{end}}">
+		<div class="ui basic button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
 			<span class="text">
 				<i class="octicon octicon-git-branch"></i>
 				{{if .IsViewBranch}}{{.i18n.Tr "repo.branch"}}{{else}}{{.i18n.Tr "repo.tree"}}{{end}}:
@@ -8,6 +10,12 @@
 			</span>
 			<i class="dropdown icon"></i>
 		</div>
+		{{if $showCommitCount}}
+			<div class="ui basic label">
+				<a href="{{.RepoLink}}/commits{{if .IsViewBranch}}/branch{{else if .IsViewTag}}/tag{{else if .IsViewCommit}}/commit{{end}}/{{EscapePound .BranchName}}"><i class="octicon octicon-history"></i> <b>{{.CommitsCount}}</b> {{.i18n.Tr (TrN .i18n.Lang .CommitsCount "repo.commit" "repo.commits") }}</a>
+			</div>
+		{{end}}
+		</div>
 		<div class="data" style="display: none" data-mode="{{if .IsViewTag}}tags{{else}}branches{{end}}">
 			{{range .Branches}}
 				<div class="item branch {{if eq $.BranchName .}}selected{{end}}" data-url="{{$.RepoLink}}/{{if $.PageIsCommits}}commits{{else}}src{{end}}/branch/{{EscapePound .}}{{if $.TreePath}}/{{EscapePound $.TreePath}}{{end}}">{{.}}</div>
@@ -62,9 +70,4 @@
 			<div class="message" v-if="showNoResults">${ noResults }</div>
 		</div>
 	</div>
-	{{if and (.Repository.UnitEnabled $.UnitTypeCode) (not .IsBareRepo)}}
-		<div class="ui basic small compact right attached button">
-			<a href="{{.RepoLink}}/commits{{if .IsViewBranch}}/branch{{else if .IsViewTag}}/tag{{else if .IsViewCommit}}/commit{{end}}/{{EscapePound .BranchName}}"><i class="octicon octicon-history"></i> <b>{{.CommitsCount}}</b> {{.i18n.Tr (TrN .i18n.Lang .CommitsCount "repo.commit" "repo.commits") }}</a>
-		</div>
-	{{end}}
 </div>

templates/repo/home.tmpl

@@ -3,14 +3,18 @@
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "base/alert" .}}
-		<div>
+		<div class="ui three column stackable grid">
+			<div class="column">
+				{{template "repo/branch_dropdown" .}}
+			</div>
+
 			{{if .RepoSearchEnabled}}
-				<div class="ui repo-search">
+				<div class="ui column center aligned repo-search">
 					<form class="ui form" action="{{.RepoLink}}/search" method="get">
 						<div class="field">
 							<div class="ui action input">
 								<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "repo.search.search_repo"}}">
-								<button class="ui icon button" type="submit">
+								<button class="ui basic icon button" type="submit">
 									<i class="search icon"></i>
 								</button>
 							</div>
@@ -18,21 +22,55 @@
 					</form>
 				</div>
 			{{end}}
-		</div>
-		{{template "repo/sub_menu" .}}
-		<div class="ui stackable secondary menu mobile--margin-between-items mobile--no-negative-margins">
-			{{if and .PullRequestCtx.Allowed .IsViewBranch}}
-				<div class="fitted item">
-					<a href="{{.BaseRepo.Link}}/compare/{{.BaseRepo.DefaultBranch}}...{{.Repository.Owner.Name}}:{{.BranchName}}">
-						<button class="ui green tiny compact button"><i class="octicon octicon-git-compare"></i></button>
-					</a>
-				</div>
-			{{end}}
-			{{template "repo/branch_dropdown" .}}
+
 			{{ $n := len .TreeNames}}
 			{{ $l := Subtract $n 1}}
-			<div class="fitted item"><span class="ui breadcrumb repo-path"><a class="section" href="{{.RepoLink}}/src/{{EscapePound .BranchNameSubURL}}">{{EllipsisString .Repository.Name 30}}</a>{{range $i, $v := .TreeNames}}<span class="divider">/</span>{{if eq $i $l}}<span class="active section">{{EllipsisString $v 30}}</span>{{else}}{{ $p := index $.Paths $i}}<span class="section"><a href="{{EscapePound $.BranchLink}}/{{EscapePound $p}}">{{EllipsisString $v 30}}</a></span>{{end}}{{end}}</span></div>
-			<div class="right fitted item" id="file-buttons">
+			<div class="column right aligned">
+				<div class="ui dropdown">
+					<button class="ui basic left attached labeled icon button"><i class="clone icon"></i>Clone</button>
+					<div class="menu">
+						<div class="message">
+							<div class="clone-grid">
+								{{if not $.DisableHTTP}}
+									<div>
+										{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
+									</div>
+									<div class="ui left action input">
+										<button class="ui tiny compact basic icon button poping up clipboard" id="clipboard-btn-https" data-original="{{.i18n.Tr "repo.copy_link"}}" data-success="{{.i18n.Tr "repo.copy_link_success"}}" data-error="{{.i18n.Tr "repo.copy_link_error"}}" data-content="{{.i18n.Tr "repo.copy_link"}}" data-variation="inverted tiny" data-clipboard-target="#repo-clone-url-https">
+											<i class="copy outline icon"></i>
+										</button>
+										<input id="repo-clone-url-https" value="{{$.CloneLink.HTTPS}}" readonly>
+									</div>
+								{{end}}
+								{{if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
+									<div>
+										SSH
+									</div>
+									<div class="ui left action input">
+										<button class="ui tiny compact basic icon button poping up clipboard" id="clipboard-btn-ssh" data-original="{{.i18n.Tr "repo.copy_link"}}" data-success="{{.i18n.Tr "repo.copy_link_success"}}" data-error="{{.i18n.Tr "repo.copy_link_error"}}" data-content="{{.i18n.Tr "repo.copy_link"}}" data-variation="inverted tiny" data-clipboard-target="#repo-clone-url-ssh">
+											<i class="copy outline icon"></i>
+										</button>
+										<input id="repo-clone-url-ssh" value="{{$.CloneLink.SSH}}" readonly>
+									</div>
+								{{end}}
+							</div>
+						</div>
+					</div>
+				</div><!--
+				--><div class="ui dropdown">
+					<button class="ui basic right attached labeled icon button">
+						<i class="download icon"></i>Download
+					</button>
+					<div class="menu">
+						<a class="item" href="{{$.RepoLink}}/archive/{{EscapePound $.BranchName}}.zip"><i class="octicon octicon-file-zip"></i> ZIP</a>
+						<a class="item" href="{{$.RepoLink}}/archive/{{EscapePound $.BranchName}}.tar.gz"><i class="octicon octicon-file-zip"></i> TAR.GZ</a>
+					</div>
+				</div>
+			</div>
+
+			<div><span class="ui breadcrumb repo-path"><a class="section" href="{{.RepoLink}}/src/{{EscapePound .BranchNameSubURL}}">{{EllipsisString .Repository.Name 30}}</a>{{range $i, $v := .TreeNames}}<span class="divider">/</span>{{if eq $i $l}}<span class="active section">{{EllipsisString $v 30}}</span>{{else}}{{ $p := index $.Paths $i}}<span class="section"><a href="{{EscapePound $.BranchLink}}/{{EscapePound $p}}">{{EllipsisString $v 30}}</a></span>{{end}}{{end}}</span></div>
+
+			<div id="file-buttons">
 				{{if .Repository.CanEnableEditor}}
 					<div class="ui tiny blue buttons">
 						{{if .CanAddFile}}
@@ -47,42 +85,6 @@
 						{{end}}
 					</div>
 				{{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">
-						{{if not $.DisableHTTP}}
-							<button class="ui basic clone button" id="repo-clone-https" data-link="{{.CloneLink.HTTPS}}">
-								{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
-							</button>
-						{{end}}
-						{{if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
-							<button class="ui basic clone button" id="repo-clone-ssh" data-link="{{.CloneLink.SSH}}">
-								SSH
-							</button>
-						{{end}}
-						{{if not $.DisableHTTP}}
-							<input id="repo-clone-url" value="{{$.CloneLink.HTTPS}}" readonly>
-						{{else if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
-							<input id="repo-clone-url" value="{{$.CloneLink.SSH}}" readonly>
-						{{end}}
-						{{if or ((not $.DisableHTTP) (and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)))}}
-							<button class="ui basic icon button poping up clipboard" id="clipboard-btn" data-original="{{.i18n.Tr "repo.copy_link"}}" data-success="{{.i18n.Tr "repo.copy_link_success"}}" data-error="{{.i18n.Tr "repo.copy_link_error"}}" data-content="{{.i18n.Tr "repo.copy_link"}}" data-variation="inverted tiny" data-clipboard-target="#repo-clone-url">
-								<i class="octicon octicon-clippy"></i>
-							</button>
-						{{end}}
-						<div class="ui basic jump dropdown icon button poping up" data-content="{{.i18n.Tr "repo.download_archive"}}" data-variation="tiny inverted" data-position="top right">
-							<i class="download icon"></i>
-							<div class="menu">
-								<a class="item" href="{{$.RepoLink}}/archive/{{EscapePound $.BranchName}}.zip"><i class="octicon octicon-file-zip"></i> ZIP</a>
-								<a class="item" href="{{$.RepoLink}}/archive/{{EscapePound $.BranchName}}.tar.gz"><i class="octicon octicon-file-zip"></i> TAR.GZ</a>
-							</div>
-						</div>
-					</div>
-				{{end}}
 			</div>
 		</div>
 		{{if .IsViewFile}}