Fix and move "Use this template" button (#23398)

Before:
<img width="1157" alt="Screenshot 2023-03-09 at 23 21 25"
src="https://user-images.githubusercontent.com/115237/224174168-869966cc-fa59-4231-b449-23bd9db12862.png">

After:
<img width="1145" alt="Screenshot 2023-03-09 at 23 24 34"
src="https://user-images.githubusercontent.com/115237/224174173-7f5b9c22-44c4-4eed-990c-da49d749eb0e.png">

---------

Co-authored-by: techknowlogick <techknowlogick@gitea.io>

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 2a79c51ddf9462f24e22da2a208affda6eb3bc4b..73afbd663db39944f0df2bf21adf3733c2773808 100644 (file)
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -63,7 +63,7 @@
                {{end}}
                {{template "repo/sub_menu" .}}
                <div class="repo-button-row gt-df gt-ac gt-sb gt-fw">
-                       <div class="gt-df gt-ac">
+                       <div class="gt-df gt-ac gt-fw gt-gap-y-3">
                                {{template "repo/branch_dropdown" dict "root" .}}
                                {{$n := len .TreeNames}}
                                {{$l := Subtract $n 1}}
@@ -99,20 +99,16 @@
                                                {{svg "octicon-triangle-down" 14 "dropdown icon"}}
                                        </button>
                                {{end}}
+                               {{if and (eq $n 0) (.Repository.IsTemplate)}}
+                                       <a role="button" class="ui primary compact button" href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}">
+                                               {{.locale.Tr "repo.use_template"}}
+                                       </a>
+                               {{end}}
                                {{if ne $n 0}}
                                        <span class="ui breadcrumb repo-path gt-ml-2"><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="gt-df gt-ac">
-                               {{if eq $n 0}}
-                                       {{if .Repository.IsTemplate}}
-                                               <div class="ui tiny primary buttons">
-                                                       <a href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}" class="ui button">
-                                                               {{.locale.Tr "repo.use_template"}}
-                                                       </a>
-                                               </div>
-                                       {{end}}
-                               {{end}}
                                <!-- Only show clone panel in repository home page -->
                                {{if eq $n 0}}
                                        <div class="ui action tiny input" id="clone-panel">

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 3b93a76a16ebc6f9b0dcee17d077b53a9bca1ad1..2c47135a2452b3b224be4c0bb2aedaf90119b68d 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2876,7 +2876,7 @@
 }
 
 .repo-button-row > * {
-  margin-top: 10px;
+  margin-top: 8px;
 }
 
 .wiki .repo-button-row {

diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index baa5959946e82165b60e84107d785c19f8fe6f52..08589fdaab9ff352197d995da22f9e8e22d36a0c 100644 (file)
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -172,6 +172,27 @@
 .gt-py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
 .gt-py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
 
+.gt-gap-0 { gap: 0 !important; }
+.gt-gap-1 { gap: .125rem !important; }
+.gt-gap-2 { gap: .25rem !important; }
+.gt-gap-3 { gap: .5rem !important; }
+.gt-gap-4 { gap: 1rem !important; }
+.gt-gap-5 { gap: 2rem !important; }
+
+.gt-gap-x-0 { column-gap: 0 !important; }
+.gt-gap-x-1 { column-gap: .125rem !important; }
+.gt-gap-x-2 { column-gap: .25rem !important; }
+.gt-gap-x-3 { column-gap: .5rem !important; }
+.gt-gap-x-4 { column-gap: 1rem !important; }
+.gt-gap-x-5 { column-gap: 2rem !important; }
+
+.gt-gap-y-0 { row-gap: 0 !important; }
+.gt-gap-y-1 { row-gap: .125rem !important; }
+.gt-gap-y-2 { row-gap: .25rem !important; }
+.gt-gap-y-3 { row-gap: .5rem !important; }
+.gt-gap-y-4 { row-gap: 1rem !important; }
+.gt-gap-y-5 { row-gap: 2rem !important; }
+
 .gt-content-center { align-content: center !important; }
 
 @media @mediaSm {