Cleaner ui for admin, repo settings, and user settings page (#1269) (#1270)

10 files changed, 488 insertions, 523 deletions

diff --git a/templates/repo/settings/branches.tmpl b/templates/repo/settings/branches.tmpl
index 2a55691efc..d9d19845a5 100644
--- a/templates/repo/settings/branches.tmpl
+++ b/templates/repo/settings/branches.tmpl
@@ -1,88 +1,84 @@
 {{template "base/head" .}}
 <div class="repository settings edit">
 	{{template "repo/header" .}}
+	{{template "repo/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "repo/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "repo.default_branch"}}
-				</h4>
-				<div class="ui attached table segment">
-					<form class="ui hook list form" action="{{.Link}}" method="post">
-						{{.CsrfTokenHtml}}
-						<input type="hidden" name="action" value="default_branch">
-						<div class="item">
-							{{.i18n.Tr "repo.settings.default_branch_desc"}}
-						</div>
-						{{if not .Repository.IsBare}}
-						<div class="ui grid padded">
-							<div class="eight wide column">
-								<div class="ui fluid dropdown selection visible" tabindex="0">
-									<select name="branch">
-										<option value="{{.Repository.DefaultBranch}}">{{.Repository.DefaultBranch}}</option>
-										{{range .Branches}}
-											<option value="{{.}}">{{.}}</option>
-										{{end}}
-          							</select><i class="dropdown icon"></i>
-									<div class="default text">{{.Repository.DefaultBranch}}</div>
-									<div class="menu transition hidden" tabindex="-1" style="display: block !important;">
-										{{range .Branches}}
-											<div class="item" data-value="{{.}}">{{.}}</div>
-										{{end}}
-									</div>
-								</div>
-							</div>
-						</div>
-						{{end}}
-						<div class="item field">
-							<button class="ui green button">{{$.i18n.Tr "repo.settings.update_settings"}}</button>
-						</div>
-					</form>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "repo.default_branch"}}
+		</h4>
+		<div class="ui attached table segment">
+			<form class="ui hook list form" action="{{.Link}}" method="post">
+				{{.CsrfTokenHtml}}
+				<input type="hidden" name="action" value="default_branch">
+				<div class="item">
+					{{.i18n.Tr "repo.settings.default_branch_desc"}}
 				</div>
-
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "repo.settings.protected_branch"}}
-				</h4>
-				<div class="ui attached table segment">
-					<div class="ui grid padded">
-						<div class="eight wide column">
-							<div class="ui fluid dropdown selection visible" tabindex="0">
-								<select id="protectedBranch" name="branch" data-url="{{.Repository.Link}}/settings/branches?action=protected_branch">
-									{{range .LeftBranches}}
-										<option value="">{{$.i18n.Tr "repo.settings.choose_branch"}}</option>
-										<option value="{{.}}">{{.}}</option>
-									{{end}}
-								</select><i class="dropdown icon"></i>
-								<div class="default text">{{.i18n.Tr "repo.settings.choose_branch"}}</div>
-								<div class="menu transition hidden" tabindex="-1" style="display: block !important;">
-									{{range .LeftBranches}}
-										<div class="item" data-value="{{.}}">{{.}}</div>
-									{{end}}
-								</div>
+				{{if not .Repository.IsBare}}
+				<div class="ui grid padded">
+					<div class="eight wide column">
+						<div class="ui fluid dropdown selection visible" tabindex="0">
+							<select name="branch">
+								<option value="{{.Repository.DefaultBranch}}">{{.Repository.DefaultBranch}}</option>
+								{{range .Branches}}
+									<option value="{{.}}">{{.}}</option>
+								{{end}}
+							</select><i class="dropdown icon"></i>
+							<div class="default text">{{.Repository.DefaultBranch}}</div>
+							<div class="menu transition hidden" tabindex="-1" style="display: block !important;">
+								{{range .Branches}}
+									<div class="item" data-value="{{.}}">{{.}}</div>
+								{{end}}
 							</div>
 						</div>
 					</div>
+				</div>
+				{{end}}
+				<div class="item field">
+					<button class="ui green button">{{$.i18n.Tr "repo.settings.update_settings"}}</button>
+				</div>
+			</form>
+		</div>
 
-					<div class="ui grid padded">
-						<div class="sixteen wide column">
-							<table class="ui single line table padded">
-								<tbody>
-									{{range .ProtectedBranches}}
-										<tr>
-											<td><div class="ui large label">{{.BranchName}}</div></td>
-											<td class="right aligned"><button class="rm ui red button" data-url="{{$.Repository.Link}}/settings/branches?action=protected_branch&id={{.ID}}" data-val="{{.BranchName}}">Delete</button></td>
-										</tr>
-									{{else}}
-										<tr class="center aligned"><td>{{.i18n.Tr "repo.settings.no_protected_branch"}}</td></tr>
-									{{end}}
-								</tbody>
-							</table>
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "repo.settings.protected_branch"}}
+		</h4>
+		<div class="ui attached table segment">
+			<div class="ui grid padded">
+				<div class="eight wide column">
+					<div class="ui fluid dropdown selection visible" tabindex="0">
+						<select id="protectedBranch" name="branch" data-url="{{.Repository.Link}}/settings/branches?action=protected_branch">
+							{{range .LeftBranches}}
+								<option value="">{{$.i18n.Tr "repo.settings.choose_branch"}}</option>
+								<option value="{{.}}">{{.}}</option>
+							{{end}}
+						</select><i class="dropdown icon"></i>
+						<div class="default text">{{.i18n.Tr "repo.settings.choose_branch"}}</div>
+						<div class="menu transition hidden" tabindex="-1" style="display: block !important;">
+							{{range .LeftBranches}}
+								<div class="item" data-value="{{.}}">{{.}}</div>
+							{{end}}
 						</div>
 					</div>
 				</div>
 			</div>
+
+			<div class="ui grid padded">
+				<div class="sixteen wide column">
+					<table class="ui single line table padded">
+						<tbody>
+							{{range .ProtectedBranches}}
+								<tr>
+									<td><div class="ui large label">{{.BranchName}}</div></td>
+									<td class="right aligned"><button class="rm ui red button" data-url="{{$.Repository.Link}}/settings/branches?action=protected_branch&id={{.ID}}" data-val="{{.BranchName}}">Delete</button></td>
+								</tr>
+							{{else}}
+								<tr class="center aligned"><td>{{.i18n.Tr "repo.settings.no_protected_branch"}}</td></tr>
+							{{end}}
+						</tbody>
+					</table>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl
index edf269b471..e732b3c9d3 100644
--- a/templates/repo/settings/collaboration.tmpl
+++ b/templates/repo/settings/collaboration.tmpl
@@ -1,58 +1,54 @@
 {{template "base/head" .}}
 <div class="repository settings collaboration">
 	{{template "repo/header" .}}
+	{{template "repo/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "repo/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "repo.settings.collaboration"}}
-				</h4>
-				<div class="ui attached segment collaborator list">
-					{{range .Collaborators}}
-						<div class="item ui grid">
-							<div class="ui five wide column">
-								<a href="{{AppSubUrl}}/{{.Name}}">
-									<img class="ui avatar image" src="{{.RelAvatarLink}}">
-									{{.DisplayName}}
-								</a>
-							</div>
-							<div class="ui eight wide column">
-								<span class="octicon octicon-shield"></span>
-								<div class="ui inline dropdown">
-								  <div class="text">{{$.i18n.Tr .Collaboration.ModeI18nKey}}</div>
-								  <i class="dropdown icon"></i>
-								  <div class="access-mode menu" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}">
-								    <div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.admin"}}" data-value="3">{{$.i18n.Tr "repo.settings.collaboration.admin"}}</div>
-								    <div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.write"}}" data-value="2">{{$.i18n.Tr "repo.settings.collaboration.write"}}</div>
-								    <div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.read"}}" data-value="1">{{$.i18n.Tr "repo.settings.collaboration.read"}}</div>
-								  </div>
-								</div>
-							</div>
-							<div class="ui two wide column">
-								<button class="ui red tiny button inline text-thin delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
-									{{$.i18n.Tr "repo.settings.delete_collaborator"}}
-								</button>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "repo.settings.collaboration"}}
+		</h4>
+		<div class="ui attached segment collaborator list">
+			{{range .Collaborators}}
+				<div class="item ui grid">
+					<div class="ui five wide column">
+						<a href="{{AppSubUrl}}/{{.Name}}">
+							<img class="ui avatar image" src="{{.RelAvatarLink}}">
+							{{.DisplayName}}
+						</a>
+					</div>
+					<div class="ui eight wide column">
+						<span class="octicon octicon-shield"></span>
+						<div class="ui inline dropdown">
+							<div class="text">{{$.i18n.Tr .Collaboration.ModeI18nKey}}</div>
+							<i class="dropdown icon"></i>
+							<div class="access-mode menu" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}">
+							<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.admin"}}" data-value="3">{{$.i18n.Tr "repo.settings.collaboration.admin"}}</div>
+							<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.write"}}" data-value="2">{{$.i18n.Tr "repo.settings.collaboration.write"}}</div>
+							<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.read"}}" data-value="1">{{$.i18n.Tr "repo.settings.collaboration.read"}}</div>
 							</div>
 						</div>
-					{{end}}
+					</div>
+					<div class="ui two wide column">
+						<button class="ui red tiny button inline text-thin delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+							{{$.i18n.Tr "repo.settings.delete_collaborator"}}
+						</button>
+					</div>
 				</div>
-				<div class="ui bottom attached segment">
-					<form class="ui form" id="repo-collab-form" action="{{.Link}}" method="post">
-						{{.CsrfTokenHtml}}
-						<div class="inline field ui left">
-							<div id="search-user-box">
-								<div class="ui input">
-									<input class="prompt" name="collaborator" placeholder="{{.i18n.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off" autofocus required>
-								</div>
-								<div class="ui segment results hide"></div>
-							</div>
+			{{end}}
+		</div>
+		<div class="ui bottom attached segment">
+			<form class="ui form" id="repo-collab-form" action="{{.Link}}" method="post">
+				{{.CsrfTokenHtml}}
+				<div class="inline field ui left">
+					<div id="search-user-box">
+						<div class="ui input">
+							<input class="prompt" name="collaborator" placeholder="{{.i18n.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off" autofocus required>
 						</div>
-						<button class="ui green button">{{.i18n.Tr "repo.settings.add_collaborator"}}</button>
-					</form>
+						<div class="ui segment results hide"></div>
+					</div>
 				</div>
-			</div>
+				<button class="ui green button">{{.i18n.Tr "repo.settings.add_collaborator"}}</button>
+			</form>
 		</div>
 	</div>
 </div>
diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl
index 6f419c894a..cd9dea1dda 100644
--- a/templates/repo/settings/deploy_keys.tmpl
+++ b/templates/repo/settings/deploy_keys.tmpl
@@ -1,74 +1,70 @@
 {{template "base/head" .}}
 <div class="repository settings">
 	{{template "repo/header" .}}
+	{{template "repo/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "repo/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "repo.settings.deploy_keys"}}
-					<div class="ui right">
-						<div class="ui blue tiny show-panel button" data-panel="#add-deploy-key-panel">{{.i18n.Tr "repo.settings.add_deploy_key"}}</div>
-					</div>
-				</h4>
-				<div class="ui attached segment">
-					{{if .Deploykeys}}
-						<div class="ui key list">
-							{{range .Deploykeys}}
-								<div class="item ui grid">
-									<div class="one wide column">
-										<i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted"{{end}}></i>
-									</div>
-									<div class="one wide column">
-										<i class="mega-octicon octicon-key left"></i>
-									</div>
-									<div class="eleven wide column">
-										<strong>{{.Name}}</strong>
-										<div class="print meta">
-											{{.Fingerprint}}
-										</div>
-										<div class="activity meta">
-											<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> —  <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
-										</div>
-									</div>
-									<div class="two wide column">
-										<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
-											{{$.i18n.Tr "settings.delete_key"}}
-										</button>
-									</div>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "repo.settings.deploy_keys"}}
+			<div class="ui right">
+				<div class="ui blue tiny show-panel button" data-panel="#add-deploy-key-panel">{{.i18n.Tr "repo.settings.add_deploy_key"}}</div>
+			</div>
+		</h4>
+		<div class="ui attached segment">
+			{{if .Deploykeys}}
+				<div class="ui key list">
+					{{range .Deploykeys}}
+						<div class="item ui grid">
+							<div class="one wide column">
+								<i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted"{{end}}></i>
+							</div>
+							<div class="one wide column">
+								<i class="mega-octicon octicon-key left"></i>
+							</div>
+							<div class="eleven wide column">
+								<strong>{{.Name}}</strong>
+								<div class="print meta">
+									{{.Fingerprint}}
 								</div>
-							{{end}}
+								<div class="activity meta">
+									<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> —  <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
+								</div>
+							</div>
+							<div class="two wide column">
+								<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+									{{$.i18n.Tr "settings.delete_key"}}
+								</button>
+							</div>
 						</div>
-					{{else}}
-						{{.i18n.Tr "repo.settings.no_deploy_keys"}}
 					{{end}}
 				</div>
-				<br>
-				<div {{if not .HasError}}class="hide"{{end}} id="add-deploy-key-panel">
-					<h4 class="ui top attached header">
-						{{.i18n.Tr "repo.settings.add_deploy_key"}}
-					</h4>
-					<div class="ui attached segment">
-						<form class="ui form" action="{{.Link}}" method="post">
-							{{.CsrfTokenHtml}}
-							<div class="field">
-								{{.i18n.Tr "repo.settings.deploy_key_desc"}}
-							</div>
-							<div class="field {{if .Err_Title}}error{{end}}">
-								<label for="title">{{.i18n.Tr "repo.settings.title"}}</label>
-								<input id="ssh-key-title" name="title" value="{{.title}}" autofocus required>
-							</div>
-							<div class="field {{if .Err_Content}}error{{end}}">
-								<label for="content">{{.i18n.Tr "repo.settings.deploy_key_content"}}</label>
-								<textarea id="ssh-key-content" name="content" required>{{.content}}</textarea>
-							</div>
-							<button class="ui green button">
-								{{.i18n.Tr "repo.settings.add_deploy_key"}}
-							</button>
-						</form>
+			{{else}}
+				{{.i18n.Tr "repo.settings.no_deploy_keys"}}
+			{{end}}
+		</div>
+		<br>
+		<div {{if not .HasError}}class="hide"{{end}} id="add-deploy-key-panel">
+			<h4 class="ui top attached header">
+				{{.i18n.Tr "repo.settings.add_deploy_key"}}
+			</h4>
+			<div class="ui attached segment">
+				<form class="ui form" action="{{.Link}}" method="post">
+					{{.CsrfTokenHtml}}
+					<div class="field">
+						{{.i18n.Tr "repo.settings.deploy_key_desc"}}
 					</div>
-				</div>
+					<div class="field {{if .Err_Title}}error{{end}}">
+						<label for="title">{{.i18n.Tr "repo.settings.title"}}</label>
+						<input id="ssh-key-title" name="title" value="{{.title}}" autofocus required>
+					</div>
+					<div class="field {{if .Err_Content}}error{{end}}">
+						<label for="content">{{.i18n.Tr "repo.settings.deploy_key_content"}}</label>
+						<textarea id="ssh-key-content" name="content" required>{{.content}}</textarea>
+					</div>
+					<button class="ui green button">
+						{{.i18n.Tr "repo.settings.add_deploy_key"}}
+					</button>
+				</form>
 			</div>
 		</div>
 	</div>
diff --git a/templates/repo/settings/githook_edit.tmpl b/templates/repo/settings/githook_edit.tmpl
index d139fd3f3e..04833cfc58 100644
--- a/templates/repo/settings/githook_edit.tmpl
+++ b/templates/repo/settings/githook_edit.tmpl
@@ -1,35 +1,31 @@
 {{template "base/head" .}}
 <div class="repository settings edit githook">
 	{{template "repo/header" .}}
+	{{template "repo/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "repo/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "repo.settings.githooks"}}
-				</h4>
-				<div class="ui attached segment">
-					<p>{{.i18n.Tr "repo.settings.githook_edit_desc"}}</p>
-					<form class="ui form" action="{{.Link}}" method="post">
-						{{.CsrfTokenHtml}}
-						{{with .Hook}}
-							<div class="inline field">
-								<label>{{$.i18n.Tr "repo.settings.githook_name"}}</label>
-								<span>{{.Name}}</span>
-							</div>
-							<div class="field">
-								<label for="content">{{$.i18n.Tr "repo.settings.githook_content"}}</label>
-								<textarea id="content" name="content" rows="20" wrap="off" autofocus>{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea>
-							</div>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "repo.settings.githooks"}}
+		</h4>
+		<div class="ui attached segment">
+			<p>{{.i18n.Tr "repo.settings.githook_edit_desc"}}</p>
+			<form class="ui form" action="{{.Link}}" method="post">
+				{{.CsrfTokenHtml}}
+				{{with .Hook}}
+					<div class="inline field">
+						<label>{{$.i18n.Tr "repo.settings.githook_name"}}</label>
+						<span>{{.Name}}</span>
+					</div>
+					<div class="field">
+						<label for="content">{{$.i18n.Tr "repo.settings.githook_content"}}</label>
+						<textarea id="content" name="content" rows="20" wrap="off" autofocus>{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea>
+					</div>
 
-							<div class="inline field">
-								<button class="ui green button">{{$.i18n.Tr "repo.settings.update_githook"}}</button>
-							</div>
-						{{end}}
-					</form>
-				</div>
-			</div>
+					<div class="inline field">
+						<button class="ui green button">{{$.i18n.Tr "repo.settings.update_githook"}}</button>
+					</div>
+				{{end}}
+			</form>
 		</div>
 	</div>
 </div>
diff --git a/templates/repo/settings/githooks.tmpl b/templates/repo/settings/githooks.tmpl
index 8d8923b475..8014a7fe14 100644
--- a/templates/repo/settings/githooks.tmpl
+++ b/templates/repo/settings/githooks.tmpl
@@ -1,28 +1,24 @@
 {{template "base/head" .}}
 <div class="repository settings githooks">
 	{{template "repo/header" .}}
+	{{template "repo/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "repo/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "repo.settings.githooks"}}
-				</h4>
-				<div class="ui attached table segment">
-					<div class="ui hook list">
-						<div class="item">
-							{{.i18n.Tr "repo.settings.githooks_desc" | Str2html}}
-						</div>
-						{{range .Hooks}}
-							<div class="item">
-								<span class="text {{if .IsActive}}green{{else}}grey{{end}}"><i class="octicon octicon-primitive-dot"></i></span>
-								<span>{{.Name}}</span>
-								<a class="text blue ui right" href="{{$.RepoLink}}/settings/hooks/git/{{.Name}}"><i class="fa fa-pencil"></i></a>
-							</div>
-						{{end}}
-					</div>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "repo.settings.githooks"}}
+		</h4>
+		<div class="ui attached table segment">
+			<div class="ui hook list">
+				<div class="item">
+					{{.i18n.Tr "repo.settings.githooks_desc" | Str2html}}
 				</div>
+				{{range .Hooks}}
+					<div class="item">
+						<span class="text {{if .IsActive}}green{{else}}grey{{end}}"><i class="octicon octicon-primitive-dot"></i></span>
+						<span>{{.Name}}</span>
+						<a class="text blue ui right" href="{{$.RepoLink}}/settings/hooks/git/{{.Name}}"><i class="fa fa-pencil"></i></a>
+					</div>
+				{{end}}
 			</div>
 		</div>
 	</div>
diff --git a/templates/repo/settings/hook_list.tmpl b/templates/repo/settings/hook_list.tmpl
index 061893bc0a..94f1d1310a 100644
--- a/templates/repo/settings/hook_list.tmpl
+++ b/templates/repo/settings/hook_list.tmpl
@@ -1,43 +1,41 @@
-<div class="twelve wide column content">
-	{{template "base/alert" .}}
-	<h4 class="ui top attached header">
-		{{.i18n.Tr "repo.settings.hooks"}}
-		<div class="ui right">
-			<div class="ui floating1 jump dropdown">
-				<div class="ui blue tiny button">{{.i18n.Tr "repo.settings.add_webhook"}}</div>
-				<div class="menu">
-					<a class="item" href="{{.BaseLink}}/settings/hooks/gogs/new">
-						<img class="img-10" src="{{AppSubUrl}}/img/favicon.png">Gitea
-					</a>
-					<a class="item" href="{{.BaseLink}}/settings/hooks/slack/new">
-						<img class="img-10" src="{{AppSubUrl}}/img/slack.png">Slack
-					</a>
-				</div>
+{{template "base/alert" .}}
+<h4 class="ui top attached header">
+	{{.i18n.Tr "repo.settings.hooks"}}
+	<div class="ui right">
+		<div class="ui floating1 jump dropdown">
+			<div class="ui blue tiny button">{{.i18n.Tr "repo.settings.add_webhook"}}</div>
+			<div class="menu">
+				<a class="item" href="{{.BaseLink}}/settings/hooks/gogs/new">
+					<img class="img-10" src="{{AppSubUrl}}/img/favicon.png">Gitea
+				</a>
+				<a class="item" href="{{.BaseLink}}/settings/hooks/slack/new">
+					<img class="img-10" src="{{AppSubUrl}}/img/slack.png">Slack
+				</a>
 			</div>
 		</div>
-	</h4>
-	<div class="ui attached table segment">
-		<div class="ui hook list">
+	</div>
+</h4>
+<div class="ui attached table segment">
+	<div class="ui hook list">
+		<div class="item">
+			{{.Description | Str2html}}
+		</div>
+		{{range .Webhooks}}
 			<div class="item">
-				{{.Description | Str2html}}
-			</div>
-			{{range .Webhooks}}
-				<div class="item">
-					{{if eq .LastStatus 1}}
-						<span class="text green"><i class="octicon octicon-check"></i></span>
-					{{else if eq .LastStatus 2}}
-						<span class="text red"><i class="octicon octicon-alert"></i></span>
-					{{else}}
-						<span class="text grey"><i class="octicon octicon-primitive-dot"></i></span>
-					{{end}}
-					<a href="{{$.BaseLink}}/settings/hooks/{{.ID}}">{{.URL}}</a>
-					<div class="ui right">
-						<span class="text blue"><a href="{{$.BaseLink}}/settings/hooks/{{.ID}}"><i class="fa fa-pencil"></i></a></span>
-						<span class="text red"><a class="delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}"><i class="fa fa-times"></i></a></span>
-					</div>
+				{{if eq .LastStatus 1}}
+					<span class="text green"><i class="octicon octicon-check"></i></span>
+				{{else if eq .LastStatus 2}}
+					<span class="text red"><i class="octicon octicon-alert"></i></span>
+				{{else}}
+					<span class="text grey"><i class="octicon octicon-primitive-dot"></i></span>
+				{{end}}
+				<a href="{{$.BaseLink}}/settings/hooks/{{.ID}}">{{.URL}}</a>
+				<div class="ui right">
+					<span class="text blue"><a href="{{$.BaseLink}}/settings/hooks/{{.ID}}"><i class="fa fa-pencil"></i></a></span>
+					<span class="text red"><a class="delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}"><i class="fa fa-times"></i></a></span>
 				</div>
-			{{end}}
-		</div>
+			</div>
+		{{end}}
 	</div>
 </div>
 
diff --git a/templates/repo/settings/hook_new.tmpl b/templates/repo/settings/hook_new.tmpl
index 96123525bb..8f7f0026f2 100644
--- a/templates/repo/settings/hook_new.tmpl
+++ b/templates/repo/settings/hook_new.tmpl
@@ -1,29 +1,25 @@
 {{template "base/head" .}}
 <div class="repository settings new webhook">
 	{{template "repo/header" .}}
+	{{template "repo/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "repo/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}
-					<div class="ui right">
-						{{if eq .HookType "gogs"}}
-							<img class="img-13" src="{{AppSubUrl}}/img/favicon.png">
-						{{else if eq .HookType "slack"}}
-							<img class="img-13" src="{{AppSubUrl}}/img/slack.png">
-						{{end}}
-					</div>
-				</h4>
-				<div class="ui attached segment">
-					{{template "repo/settings/hook_gogs" .}}
-					{{template "repo/settings/hook_slack" .}}
-				</div>
-
-				{{template "repo/settings/hook_history" .}}
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}
+			<div class="ui right">
+				{{if eq .HookType "gogs"}}
+					<img class="img-13" src="{{AppSubUrl}}/img/favicon.png">
+				{{else if eq .HookType "slack"}}
+					<img class="img-13" src="{{AppSubUrl}}/img/slack.png">
+				{{end}}
 			</div>
+		</h4>
+		<div class="ui attached segment">
+			{{template "repo/settings/hook_gogs" .}}
+			{{template "repo/settings/hook_slack" .}}
 		</div>
+
+		{{template "repo/settings/hook_history" .}}
 	</div>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/repo/settings/hooks.tmpl b/templates/repo/settings/hooks.tmpl
index a405b44698..34c5cfbb6c 100644
--- a/templates/repo/settings/hooks.tmpl
+++ b/templates/repo/settings/hooks.tmpl
@@ -1,11 +1,9 @@
 {{template "base/head" .}}
 <div class="repository settings webhooks">
 	{{template "repo/header" .}}
+	{{template "repo/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "repo/settings/navbar" .}}
-			{{template "repo/settings/hook_list" .}}
-		</div>
+		{{template "repo/settings/hook_list" .}}
 	</div>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/repo/settings/navbar.tmpl b/templates/repo/settings/navbar.tmpl
index 2c71557426..3d9d7d15a7 100644
--- a/templates/repo/settings/navbar.tmpl
+++ b/templates/repo/settings/navbar.tmpl
@@ -1,27 +1,24 @@
-<div class="four wide column">
-	<div class="ui vertical menu">
-		<div class="header item">{{.i18n.Tr "repo.settings"}}</div>
-		<a class="{{if .PageIsSettingsOptions}}active{{end}} item" href="{{.RepoLink}}/settings">
-			{{.i18n.Tr "repo.settings.options"}}
+<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
+	<a class="{{if .PageIsSettingsOptions}}active{{end}} item" href="{{.RepoLink}}/settings">
+		{{.i18n.Tr "repo.settings.options"}}
+	</a>
+	<a class="{{if .PageIsSettingsCollaboration}}active{{end}} item" href="{{.RepoLink}}/settings/collaboration">
+		{{.i18n.Tr "repo.settings.collaboration"}}
+	</a>
+	{{if not .Repository.IsBare}}
+		<a class="{{if .PageIsSettingsBranches}}active{{end}} item" href="{{.RepoLink}}/settings/branches">
+			{{.i18n.Tr "repo.settings.branches"}}
 		</a>
-		<a class="{{if .PageIsSettingsCollaboration}}active{{end}} item" href="{{.RepoLink}}/settings/collaboration">
-			{{.i18n.Tr "repo.settings.collaboration"}}
+	{{end}}
+	<a class="{{if .PageIsSettingsHooks}}active{{end}} item" href="{{.RepoLink}}/settings/hooks">
+		{{.i18n.Tr "repo.settings.hooks"}}
+	</a>
+	{{if .SignedUser.CanEditGitHook}}
+		<a class="{{if .PageIsSettingsGitHooks}}active{{end}} item" href="{{.RepoLink}}/settings/hooks/git">
+			{{.i18n.Tr "repo.settings.githooks"}}
 		</a>
-		{{if not .Repository.IsBare}}
-			<a class="{{if .PageIsSettingsBranches}}active{{end}} item" href="{{.RepoLink}}/settings/branches">
-				{{.i18n.Tr "repo.settings.branches"}}
-			</a>
-		{{end}}
-		<a class="{{if .PageIsSettingsHooks}}active{{end}} item" href="{{.RepoLink}}/settings/hooks">
-			{{.i18n.Tr "repo.settings.hooks"}}
-		</a>
-		{{if .SignedUser.CanEditGitHook}}
-			<a class="{{if .PageIsSettingsGitHooks}}active{{end}} item" href="{{.RepoLink}}/settings/hooks/git">
-				{{.i18n.Tr "repo.settings.githooks"}}
-			</a>
-		{{end}}
-		<a class="{{if .PageIsSettingsKeys}}active{{end}} item" href="{{.RepoLink}}/settings/keys">
-			{{.i18n.Tr "repo.settings.deploy_keys"}}
-		</a>
-	</div>
+	{{end}}
+	<a class="{{if .PageIsSettingsKeys}}active{{end}} item" href="{{.RepoLink}}/settings/keys">
+		{{.i18n.Tr "repo.settings.deploy_keys"}}
+	</a>
 </div>
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index 091828bc00..cd7d2c304b 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -1,256 +1,252 @@
 {{template "base/head" .}}
 <div class="repository settings options">
 	{{template "repo/header" .}}
+	{{template "repo/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "repo/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "repo.settings.basic_settings"}}
-				</h4>
-				<div class="ui attached segment">
-					<form class="ui form" action="{{.Link}}" method="post">
-						{{.CsrfTokenHtml}}
-						<input type="hidden" name="action" value="update">
-						<div class="required field {{if .Err_RepoName}}error{{end}}">
-							<label for="repo_name">{{.i18n.Tr "repo.repo_name"}}</label>
-							<input id="repo_name" name="repo_name" value="{{.Repository.Name}}" data-repo-name="{{.Repository.Name}}" autofocus required>
-						</div>
-						{{if not .Repository.IsFork}}
-							<div class="inline field">
-								<label>{{.i18n.Tr "repo.visibility"}}</label>
-								<div class="ui checkbox">
-									<input name="private" type="checkbox" {{if .Repository.IsPrivate}}checked{{end}}>
-									<label>{{.i18n.Tr "repo.visiblity_helper" | Safe}} {{if .Repository.NumForks}}<span class="text red">{{.i18n.Tr "repo.visiblity_fork_helper"}}</span>{{end}}</label>
-								</div>
-							</div>
-						{{end}}
-						<div class="field {{if .Err_Description}}error{{end}}">
-							<label for="description">{{$.i18n.Tr "repo.repo_desc"}}</label>
-							<textarea id="description" name="description" rows="2">{{.Repository.Description}}</textarea>
-						</div>
-						<div class="field {{if .Err_Website}}error{{end}}">
-							<label for="website">{{.i18n.Tr "repo.settings.site"}}</label>
-							<input id="website" name="website" type="url" value="{{.Repository.Website}}">
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "repo.settings.basic_settings"}}
+		</h4>
+		<div class="ui attached segment">
+			<form class="ui form" action="{{.Link}}" method="post">
+				{{.CsrfTokenHtml}}
+				<input type="hidden" name="action" value="update">
+				<div class="required field {{if .Err_RepoName}}error{{end}}">
+					<label for="repo_name">{{.i18n.Tr "repo.repo_name"}}</label>
+					<input id="repo_name" name="repo_name" value="{{.Repository.Name}}" data-repo-name="{{.Repository.Name}}" autofocus required>
+				</div>
+				{{if not .Repository.IsFork}}
+					<div class="inline field">
+						<label>{{.i18n.Tr "repo.visibility"}}</label>
+						<div class="ui checkbox">
+							<input name="private" type="checkbox" {{if .Repository.IsPrivate}}checked{{end}}>
+							<label>{{.i18n.Tr "repo.visiblity_helper" | Safe}} {{if .Repository.NumForks}}<span class="text red">{{.i18n.Tr "repo.visiblity_fork_helper"}}</span>{{end}}</label>
 						</div>
+					</div>
+				{{end}}
+				<div class="field {{if .Err_Description}}error{{end}}">
+					<label for="description">{{$.i18n.Tr "repo.repo_desc"}}</label>
+					<textarea id="description" name="description" rows="2">{{.Repository.Description}}</textarea>
+				</div>
+				<div class="field {{if .Err_Website}}error{{end}}">
+					<label for="website">{{.i18n.Tr "repo.settings.site"}}</label>
+					<input id="website" name="website" type="url" value="{{.Repository.Website}}">
+				</div>
 
-						<div class="field">
-							<button class="ui green button">{{$.i18n.Tr "repo.settings.update_settings"}}</button>
-						</div>
-					</form>
+				<div class="field">
+					<button class="ui green button">{{$.i18n.Tr "repo.settings.update_settings"}}</button>
 				</div>
+			</form>
+		</div>
 
-				{{if .Repository.IsMirror}}
-					<h4 class="ui top attached header">
-						{{.i18n.Tr "repo.settings.mirror_settings"}}
-					</h4>
-					<div class="ui attached segment">
-						<form class="ui form" method="post">
-							{{.CsrfTokenHtml}}
-							<input type="hidden" name="action" value="mirror">
-							<div class="inline field {{if .Err_EnablePrune}}error{{end}}">
-							  <label>{{.i18n.Tr "repo.mirror_prune"}}</label>
-								<div class="ui checkbox">
-					        <input id="enable_prune" name="enable_prune" type="checkbox" {{if .MirrorEnablePrune}}checked{{end}}>
-					        <label>{{.i18n.Tr "repo.mirror_prune_desc"}}</label>
-								</div>
-							</div>
-							<div class="inline field {{if .Err_Interval}}error{{end}}">
-								<label for="interval">{{.i18n.Tr "repo.mirror_interval"}}</label>
-								<input id="interval" name="interval" type="number" value="{{.MirrorInterval}}">
-							</div>
-							<div class="field">
-								<label for="mirror_address">{{.i18n.Tr "repo.mirror_address"}}</label>
-								<input id="mirror_address" name="mirror_address" value="{{.Mirror.FullAddress}}" required>
-								<p class="help">{{.i18n.Tr "repo.mirror_address_desc"}}</p>
-							</div>
+		{{if .Repository.IsMirror}}
+			<h4 class="ui top attached header">
+				{{.i18n.Tr "repo.settings.mirror_settings"}}
+			</h4>
+			<div class="ui attached segment">
+				<form class="ui form" method="post">
+					{{.CsrfTokenHtml}}
+					<input type="hidden" name="action" value="mirror">
+					<div class="inline field {{if .Err_EnablePrune}}error{{end}}">
+						<label>{{.i18n.Tr "repo.mirror_prune"}}</label>
+						<div class="ui checkbox">
+					<input id="enable_prune" name="enable_prune" type="checkbox" {{if .MirrorEnablePrune}}checked{{end}}>
+					<label>{{.i18n.Tr "repo.mirror_prune_desc"}}</label>
+						</div>
+					</div>
+					<div class="inline field {{if .Err_Interval}}error{{end}}">
+						<label for="interval">{{.i18n.Tr "repo.mirror_interval"}}</label>
+						<input id="interval" name="interval" type="number" value="{{.MirrorInterval}}">
+					</div>
+					<div class="field">
+						<label for="mirror_address">{{.i18n.Tr "repo.mirror_address"}}</label>
+						<input id="mirror_address" name="mirror_address" value="{{.Mirror.FullAddress}}" required>
+						<p class="help">{{.i18n.Tr "repo.mirror_address_desc"}}</p>
+					</div>
 
-							<div class="field">
-								<button class="ui green button">{{$.i18n.Tr "repo.settings.update_settings"}}</button>
-							</div>
-						</form>
+					<div class="field">
+						<button class="ui green button">{{$.i18n.Tr "repo.settings.update_settings"}}</button>
+					</div>
+				</form>
 
-						<div class="ui divider"></div>
+				<div class="ui divider"></div>
 
-						<form class="ui form" method="post">
-							{{.CsrfTokenHtml}}
-							<input type="hidden" name="action" value="mirror-sync">
-							<div class="inline field">
-								<label>{{.i18n.Tr "repo.mirror_last_synced"}}</label>
-								<span>{{.Mirror.Updated}}</span>
-							</div>
-							<div class="field">
-								<button class="ui blue button">{{$.i18n.Tr "repo.settings.sync_mirror"}}</button>
-							</div>
-						</form>
+				<form class="ui form" method="post">
+					{{.CsrfTokenHtml}}
+					<input type="hidden" name="action" value="mirror-sync">
+					<div class="inline field">
+						<label>{{.i18n.Tr "repo.mirror_last_synced"}}</label>
+						<span>{{.Mirror.Updated}}</span>
 					</div>
-				{{end}}
+					<div class="field">
+						<button class="ui blue button">{{$.i18n.Tr "repo.settings.sync_mirror"}}</button>
+					</div>
+				</form>
+			</div>
+		{{end}}
 
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "repo.settings.advanced_settings"}}
-				</h4>
-				<div class="ui attached segment">
-					<form class="ui form" method="post">
-						{{.CsrfTokenHtml}}
-						<input type="hidden" name="action" value="advanced">
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "repo.settings.advanced_settings"}}
+		</h4>
+		<div class="ui attached segment">
+			<form class="ui form" method="post">
+				{{.CsrfTokenHtml}}
+				<input type="hidden" name="action" value="advanced">
 
-						<div class="inline field">
-							<label>{{.i18n.Tr "repo.wiki"}}</label>
-							<div class="ui checkbox">
-								<input class="enable-system" name="enable_wiki" type="checkbox" data-target="#wiki_box" {{if or (.Repository.EnableUnit $.UnitTypeWiki) (.Repository.EnableUnit $.UnitTypeExternalWiki)}}checked{{end}}>
-								<label>{{.i18n.Tr "repo.settings.wiki_desc"}}</label>
-							</div>
+				<div class="inline field">
+					<label>{{.i18n.Tr "repo.wiki"}}</label>
+					<div class="ui checkbox">
+						<input class="enable-system" name="enable_wiki" type="checkbox" data-target="#wiki_box" {{if or (.Repository.EnableUnit $.UnitTypeWiki) (.Repository.EnableUnit $.UnitTypeExternalWiki)}}checked{{end}}>
+						<label>{{.i18n.Tr "repo.settings.wiki_desc"}}</label>
+					</div>
+				</div>
+				<div class="field {{if not (.Repository.EnableUnit $.UnitTypeWiki)}}disabled{{end}}" id="wiki_box">
+					<div class="field">
+						<div class="ui radio checkbox">
+							<input class="hidden enable-system-radio" tabindex="0" name="enable_external_wiki" type="radio" value="false" data-target="#external_wiki_box" {{if not (.Repository.EnableUnit $.UnitTypeExternalWiki)}}checked{{end}}/>
+							<label>{{.i18n.Tr "repo.settings.use_internal_wiki"}}</label>
 						</div>
-						<div class="field {{if not (.Repository.EnableUnit $.UnitTypeWiki)}}disabled{{end}}" id="wiki_box">
-							<div class="field">
-								<div class="ui radio checkbox">
-									<input class="hidden enable-system-radio" tabindex="0" name="enable_external_wiki" type="radio" value="false" data-target="#external_wiki_box" {{if not (.Repository.EnableUnit $.UnitTypeExternalWiki)}}checked{{end}}/>
-									<label>{{.i18n.Tr "repo.settings.use_internal_wiki"}}</label>
-								</div>
-							</div>
-							<div class="field">
-								<div class="ui radio checkbox">
-									<input class="hidden enable-system-radio" tabindex="0" name="enable_external_wiki" type="radio" value="true" data-target="#external_wiki_box" {{if .Repository.EnableUnit $.UnitTypeExternalWiki}}checked{{end}}/>
-									<label>{{.i18n.Tr "repo.settings.use_external_wiki"}}</label>
-								</div>
-							</div>
-							<div class="field {{if not (.Repository.EnableUnit $.UnitTypeExternalWiki)}}disabled{{end}}" id="external_wiki_box">
-								<label for="external_wiki_url">{{.i18n.Tr "repo.settings.external_wiki_url"}}</label>
-								<input id="external_wiki_url" name="external_wiki_url" type="url" value="{{(.Repository.MustGetUnit $.UnitTypeExternalWiki).ExternalWikiConfig.ExternalWikiURL}}">
-								<p class="help">{{.i18n.Tr "repo.settings.external_wiki_url_desc"}}</p>
-							</div>
+					</div>
+					<div class="field">
+						<div class="ui radio checkbox">
+							<input class="hidden enable-system-radio" tabindex="0" name="enable_external_wiki" type="radio" value="true" data-target="#external_wiki_box" {{if .Repository.EnableUnit $.UnitTypeExternalWiki}}checked{{end}}/>
+							<label>{{.i18n.Tr "repo.settings.use_external_wiki"}}</label>
 						</div>
+					</div>
+					<div class="field {{if not (.Repository.EnableUnit $.UnitTypeExternalWiki)}}disabled{{end}}" id="external_wiki_box">
+						<label for="external_wiki_url">{{.i18n.Tr "repo.settings.external_wiki_url"}}</label>
+						<input id="external_wiki_url" name="external_wiki_url" type="url" value="{{(.Repository.MustGetUnit $.UnitTypeExternalWiki).ExternalWikiConfig.ExternalWikiURL}}">
+						<p class="help">{{.i18n.Tr "repo.settings.external_wiki_url_desc"}}</p>
+					</div>
+				</div>
 
-						<div class="ui divider"></div>
+				<div class="ui divider"></div>
 
-						<div class="inline field">
-							<label>{{.i18n.Tr "repo.issues"}}</label>
-							<div class="ui checkbox">
-								<input class="enable-system" name="enable_issues" type="checkbox" data-target="#issue_box" {{if or (.Repository.EnableUnit $.UnitTypeIssues) (.Repository.EnableUnit $.UnitTypeExternalTracker)}}checked{{end}}>
-								<label>{{.i18n.Tr "repo.settings.issues_desc"}}</label>
-							</div>
+				<div class="inline field">
+					<label>{{.i18n.Tr "repo.issues"}}</label>
+					<div class="ui checkbox">
+						<input class="enable-system" name="enable_issues" type="checkbox" data-target="#issue_box" {{if or (.Repository.EnableUnit $.UnitTypeIssues) (.Repository.EnableUnit $.UnitTypeExternalTracker)}}checked{{end}}>
+						<label>{{.i18n.Tr "repo.settings.issues_desc"}}</label>
+					</div>
+				</div>
+				<div class="field {{if not (.Repository.EnableUnit $.UnitTypeIssues)}}disabled{{end}}" id="issue_box">
+					<div class="field">
+						<div class="ui radio checkbox">
+							<input class="hidden enable-system-radio" tabindex="0" name="enable_external_tracker" type="radio" value="false" data-target="#external_issue_box" {{if not (.Repository.EnableUnit $.UnitTypeExternalTracker)}}checked{{end}}/>
+							<label>{{.i18n.Tr "repo.settings.use_internal_issue_tracker"}}</label>
 						</div>
-						<div class="field {{if not (.Repository.EnableUnit $.UnitTypeIssues)}}disabled{{end}}" id="issue_box">
+					</div>
+					<div class="field">
+						<div class="ui radio checkbox">
+							<input class="hidden enable-system-radio" tabindex="0" name="enable_external_tracker" type="radio" value="true" data-target="#external_issue_box" {{if .Repository.EnableUnit $.UnitTypeExternalTracker}}checked{{end}}/>
+							<label>{{.i18n.Tr "repo.settings.use_external_issue_tracker"}}</label>
+						</div>
+					</div>
+					<div class="field {{if not (.Repository.EnableUnit $.UnitTypeExternalTracker)}}disabled{{end}}" id="external_issue_box">
+						<div class="field">
+							<label for="external_tracker_url">{{.i18n.Tr "repo.settings.external_tracker_url"}}</label>
+							<input id="external_tracker_url" name="external_tracker_url" type="url" value="{{(.Repository.MustGetUnit $.UnitTypeExternalTracker).ExternalTrackerConfig.ExternalTrackerURL}}">
+							<p class="help">{{.i18n.Tr "repo.settings.external_tracker_url_desc"}}</p>
+						</div>
+						<div class="field">
+							<label for="tracker_url_format">{{.i18n.Tr "repo.settings.tracker_url_format"}}</label>
+							<input id="tracker_url_format" name="tracker_url_format" type="url" value="{{(.Repository.MustGetUnit $.UnitTypeExternalTracker).ExternalTrackerConfig.ExternalTrackerFormat}}" placeholder="e.g. https://github.com/{user}/{repo}/issues/{index}">
+							<p class="help">{{.i18n.Tr "repo.settings.tracker_url_format_desc" | Str2html}}</p>
+						</div>
+						<div class="inline fields">
+							<label for="issue_style">{{.i18n.Tr "repo.settings.tracker_issue_style"}}</label>
 							<div class="field">
 								<div class="ui radio checkbox">
-									<input class="hidden enable-system-radio" tabindex="0" name="enable_external_tracker" type="radio" value="false" data-target="#external_issue_box" {{if not (.Repository.EnableUnit $.UnitTypeExternalTracker)}}checked{{end}}/>
-									<label>{{.i18n.Tr "repo.settings.use_internal_issue_tracker"}}</label>
+								{{$externalTracker := (.Repository.MustGetUnit $.UnitTypeExternalTracker)}}
+								{{$externalTrackerStyle := $externalTracker.ExternalTrackerConfig.ExternalTrackerStyle}}
+									<input class="hidden" tabindex="0" name="tracker_issue_style" type="radio" value="numeric" {{if $externalTrackerStyle}}{{if eq $externalTrackerStyle "numeric"}}checked=""{{end}}{{end}}/>
+									<label>{{.i18n.Tr "repo.settings.tracker_issue_style.numeric"}} <span class="ui light grey text">(#1234)</span></label>
 								</div>
 							</div>
 							<div class="field">
 								<div class="ui radio checkbox">
-									<input class="hidden enable-system-radio" tabindex="0" name="enable_external_tracker" type="radio" value="true" data-target="#external_issue_box" {{if .Repository.EnableUnit $.UnitTypeExternalTracker}}checked{{end}}/>
-									<label>{{.i18n.Tr "repo.settings.use_external_issue_tracker"}}</label>
-								</div>
-							</div>
-							<div class="field {{if not (.Repository.EnableUnit $.UnitTypeExternalTracker)}}disabled{{end}}" id="external_issue_box">
-								<div class="field">
-									<label for="external_tracker_url">{{.i18n.Tr "repo.settings.external_tracker_url"}}</label>
-									<input id="external_tracker_url" name="external_tracker_url" type="url" value="{{(.Repository.MustGetUnit $.UnitTypeExternalTracker).ExternalTrackerConfig.ExternalTrackerURL}}">
-									<p class="help">{{.i18n.Tr "repo.settings.external_tracker_url_desc"}}</p>
-								</div>
-								<div class="field">
-									<label for="tracker_url_format">{{.i18n.Tr "repo.settings.tracker_url_format"}}</label>
-									<input id="tracker_url_format" name="tracker_url_format" type="url" value="{{(.Repository.MustGetUnit $.UnitTypeExternalTracker).ExternalTrackerConfig.ExternalTrackerFormat}}" placeholder="e.g. https://github.com/{user}/{repo}/issues/{index}">
-									<p class="help">{{.i18n.Tr "repo.settings.tracker_url_format_desc" | Str2html}}</p>
-								</div>
-								<div class="inline fields">
-									<label for="issue_style">{{.i18n.Tr "repo.settings.tracker_issue_style"}}</label>
-									<div class="field">
-										<div class="ui radio checkbox">
-										{{$externalTracker := (.Repository.MustGetUnit $.UnitTypeExternalTracker)}}
-										{{$externalTrackerStyle := $externalTracker.ExternalTrackerConfig.ExternalTrackerStyle}}
-											<input class="hidden" tabindex="0" name="tracker_issue_style" type="radio" value="numeric" {{if $externalTrackerStyle}}{{if eq $externalTrackerStyle "numeric"}}checked=""{{end}}{{end}}/>
-											<label>{{.i18n.Tr "repo.settings.tracker_issue_style.numeric"}} <span class="ui light grey text">(#1234)</span></label>
-										</div>
-									</div>
-									<div class="field">
-										<div class="ui radio checkbox">
-											<input class="hidden" tabindex="0" name="tracker_issue_style" type="radio" value="alphanumeric" {{if $externalTrackerStyle}}{{if eq $externalTracker.ExternalTrackerConfig.ExternalTrackerStyle "alphanumeric"}}checked=""{{end}}{{end}} />
-											<label>{{.i18n.Tr "repo.settings.tracker_issue_style.alphanumeric"}} <span class="ui light grey text">(ABC-123, DEFG-234)</span></label>
-										</div>
-									</div>
+									<input class="hidden" tabindex="0" name="tracker_issue_style" type="radio" value="alphanumeric" {{if $externalTrackerStyle}}{{if eq $externalTracker.ExternalTrackerConfig.ExternalTrackerStyle "alphanumeric"}}checked=""{{end}}{{end}} />
+									<label>{{.i18n.Tr "repo.settings.tracker_issue_style.alphanumeric"}} <span class="ui light grey text">(ABC-123, DEFG-234)</span></label>
 								</div>
 							</div>
 						</div>
-
-						{{if .Repository.CanEnablePulls}}
-							<div class="ui divider"></div>
-
-							<div class="inline field">
-								<label>{{.i18n.Tr "repo.pulls"}}</label>
-								<div class="ui checkbox">
-									<input name="enable_pulls" type="checkbox" {{if .Repository.EnableUnit $.UnitTypePullRequests}}checked{{end}}>
-									<label>{{.i18n.Tr "repo.settings.pulls_desc"}}</label>
-								</div>
-							</div>
-						{{end}}
-
-						<div class="ui divider"></div>
-						<div class="field">
-							<button class="ui green button">{{$.i18n.Tr "repo.settings.update_settings"}}</button>
-						</div>
-					</form>
-				</div>
-
-				{{if .IsRepositoryOwner}}
-				<h4 class="ui top attached warning header">
-					{{.i18n.Tr "repo.settings.danger_zone"}}
-				</h4>
-				<div class="ui attached warning table danger segment">
-					{{if .Repository.IsMirror}}
-					<div class="item">
-						<div class="ui right">
-							<button class="ui basic red show-modal button" data-modal="#convert-repo-modal">{{.i18n.Tr "repo.settings.convert"}}</button>
-						</div>
-						<div>
-							<h5>{{.i18n.Tr "repo.settings.convert"}}</h5>
-							<p>{{.i18n.Tr "repo.settings.convert_desc"}}</p>
-						</div>
 					</div>
+				</div>
 
+				{{if .Repository.CanEnablePulls}}
 					<div class="ui divider"></div>
-					{{end}}
-					<div class="item">
-						<div class="ui right">
-							<button class="ui basic red show-modal button" data-modal="#transfer-repo-modal">{{.i18n.Tr "repo.settings.transfer"}}</button>
-						</div>
-						<div>
-							<h5>{{.i18n.Tr "repo.settings.transfer"}}</h5>
-							<p>{{.i18n.Tr "repo.settings.transfer_desc"}}</p>
+
+					<div class="inline field">
+						<label>{{.i18n.Tr "repo.pulls"}}</label>
+						<div class="ui checkbox">
+							<input name="enable_pulls" type="checkbox" {{if .Repository.EnableUnit $.UnitTypePullRequests}}checked{{end}}>
+							<label>{{.i18n.Tr "repo.settings.pulls_desc"}}</label>
 						</div>
 					</div>
+				{{end}}
 
-					{{if .Repository.EnableUnit $.UnitTypeWiki}}
-						<div class="ui divider"></div>
+				<div class="ui divider"></div>
+				<div class="field">
+					<button class="ui green button">{{$.i18n.Tr "repo.settings.update_settings"}}</button>
+				</div>
+			</form>
+		</div>
 
-						<div class="item">
-							<div class="ui right">
-								<button class="ui basic red show-modal button" data-modal="#delete-wiki-modal">{{.i18n.Tr "repo.settings.wiki_delete"}}</button>
-							</div>
-							<div>
-								<h5>{{.i18n.Tr "repo.settings.wiki_delete"}}</h5>
-								<p>{{.i18n.Tr "repo.settings.wiki_delete_desc"}}</p>
-							</div>
-						</div>
-					{{end}}
+		{{if .IsRepositoryOwner}}
+		<h4 class="ui top attached warning header">
+			{{.i18n.Tr "repo.settings.danger_zone"}}
+		</h4>
+		<div class="ui attached warning table danger segment">
+			{{if .Repository.IsMirror}}
+			<div class="item">
+				<div class="ui right">
+					<button class="ui basic red show-modal button" data-modal="#convert-repo-modal">{{.i18n.Tr "repo.settings.convert"}}</button>
+				</div>
+				<div>
+					<h5>{{.i18n.Tr "repo.settings.convert"}}</h5>
+					<p>{{.i18n.Tr "repo.settings.convert_desc"}}</p>
+				</div>
+			</div>
 
-					<div class="ui divider"></div>
+			<div class="ui divider"></div>
+			{{end}}
+			<div class="item">
+				<div class="ui right">
+					<button class="ui basic red show-modal button" data-modal="#transfer-repo-modal">{{.i18n.Tr "repo.settings.transfer"}}</button>
+				</div>
+				<div>
+					<h5>{{.i18n.Tr "repo.settings.transfer"}}</h5>
+					<p>{{.i18n.Tr "repo.settings.transfer_desc"}}</p>
+				</div>
+			</div>
 
-					<div class="item">
-						<div class="ui right">
-							<button class="ui basic red show-modal button" data-modal="#delete-repo-modal">{{.i18n.Tr "repo.settings.delete"}}</button>
-						</div>
-						<div>
-							<h5>{{.i18n.Tr "repo.settings.delete"}}</h5>
-							<p>{{.i18n.Tr "repo.settings.delete_desc"}}</p>
-						</div>
+			{{if .Repository.EnableUnit $.UnitTypeWiki}}
+				<div class="ui divider"></div>
+
+				<div class="item">
+					<div class="ui right">
+						<button class="ui basic red show-modal button" data-modal="#delete-wiki-modal">{{.i18n.Tr "repo.settings.wiki_delete"}}</button>
+					</div>
+					<div>
+						<h5>{{.i18n.Tr "repo.settings.wiki_delete"}}</h5>
+						<p>{{.i18n.Tr "repo.settings.wiki_delete_desc"}}</p>
 					</div>
 				</div>
-				{{end}}
+			{{end}}
+
+			<div class="ui divider"></div>
+
+			<div class="item">
+				<div class="ui right">
+					<button class="ui basic red show-modal button" data-modal="#delete-repo-modal">{{.i18n.Tr "repo.settings.delete"}}</button>
+				</div>
+				<div>
+					<h5>{{.i18n.Tr "repo.settings.delete"}}</h5>
+					<p>{{.i18n.Tr "repo.settings.delete_desc"}}</p>
+				</div>
 			</div>
 		</div>
+		{{end}}
 	</div>
 </div>