Change to vertical navbar layout for secondary navbar for repo/user/admin settings (#24246)

Co-Author: @wxiaoguang 

This is the first step of #24229. And this PR will only includes html
changes, and followed by other PRs that fine tune css and change to
submenus.

After:

Admin Level

<img width="1400" alt="Screen Shot 2023-04-21 at 10 07 16"
src="https://user-images.githubusercontent.com/17645053/233523870-f848b61d-056a-4b41-9760-a9a49fea1fe8.png">

User Level

<img width="1422" alt="Screen Shot 2023-04-21 at 10 07 23"
src="https://user-images.githubusercontent.com/17645053/233523878-979adb20-a657-43d9-99a6-ad414010c0ef.png">

Repo Level

<img width="1404" alt="Screen Shot 2023-04-21 at 10 07 07"
src="https://user-images.githubusercontent.com/17645053/233523863-337440bd-c03a-4dfd-87fa-cef40300bfe0.png">

---------

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

templates/admin/applications/list.tmpl

@@ -1,14 +1,8 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin config">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		<div class="twelve wide column content">
-			{{template "base/alert" .}}
-			<h4 class="ui top attached header">
-					{{.locale.Tr "settings.applications"}}
-			</h4>
-			{{template "user/settings/applications_oauth2_list" .}}
-		</div>
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin config")}}
+	<div class="admin-setting-content">
+		<h4 class="ui top attached header">
+				{{.locale.Tr "settings.applications"}}
+		</h4>
+		{{template "user/settings/applications_oauth2_list" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/applications/oauth2_edit.tmpl

@@ -1,7 +1,6 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin config">
-	{{template "admin/navbar" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin config")}}
+	<div class="admin-setting-content">
 
-	{{template "user/settings/applications_oauth2_edit_form" .}}
-</div>
-{{template "base/footer" .}}
+		{{template "user/settings/applications_oauth2_edit_form" .}}
+	</div>
+{{template "admin/layout_footer" .}}

templates/admin/auth/edit.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin edit authentication">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin edit authentication")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.auths.edit"}}
 		</h4>
@@ -438,7 +435,6 @@
 			</form>
 		</div>
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -450,4 +446,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "admin/layout_footer" .}}

templates/admin/auth/list.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin authentication">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin authentication")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.auths.auth_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
 			<div class="ui right">
@@ -38,5 +35,4 @@
 			</table>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/auth/new.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin new authentication">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin new authentication")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.auths.new"}}
 		</h4>
@@ -122,5 +119,4 @@
 			</div>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/config.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin config">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin config")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.config.server_config"}}
 		</h4>
@@ -426,5 +423,4 @@
 			</dl>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/dashboard.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin dashboard">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin dashboard")}}
+	<div class="admin-setting-content">
 		{{if .NeedUpdate}}
 			<div class="ui negative message flash-error">
 				<p>{{(.locale.Tr "admin.dashboard.new_version_hint" .RemoteVersion AppVer) | Str2html}}</p>
@@ -145,5 +142,4 @@
 			</dl>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/emails/list.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.emails.email_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
 		</h4>
@@ -101,5 +98,4 @@
 		</div>
 
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/hook_new.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin settings new webhook">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin settings new webhook")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{if .PageIsAdminDefaultHooksNew}}
 				{{.locale.Tr "admin.defaulthooks.add_webhook"}}
@@ -55,5 +52,4 @@
 
 		{{template "repo/settings/webhook/history" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/hooks.tmpl

@@ -1,13 +1,9 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin hooks">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin hooks")}}
+	<div class="admin-setting-content">
 
 		{{template "repo/settings/webhook/base_list" .SystemWebhooks}}
 		{{template "repo/settings/webhook/base_list" .DefaultWebhooks}}
 
 		{{template "repo/settings/webhook/delete_modal" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/layout_footer.tmpl

@@ -0,0 +1,11 @@
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+<div class="page-content">
+	<div class="admin-layout-right">
+		<div>
+		{{/* block: admin-setting-content */}}
+{{end}}
+
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}

templates/admin/layout_head.tmpl

@@ -0,0 +1,13 @@
+{{template "base/head" .ctxData}}
+<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
+	<div class="ui container stackable grid">
+		{{template "admin/navbar" .ctxData}}
+		<div class="twelve wide column">
+			{{template "base/alert" .ctxData}}
+			{{/* block: admin-setting-content */}}
+
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+		</div>
+	</div>
+</div>
+{{end}}

templates/admin/monitor.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin monitor">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin monitor")}}
+	<div class="admin-setting-content">
 		{{template "admin/cron" .}}
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.monitor.queues"}}
@@ -26,7 +23,7 @@
 							<td>{{.Type}}</td>
 							<td>{{.ExemplarType}}</td>
 							<td>{{$sum := .NumberOfWorkers}}{{if lt $sum 0}}-{{else}}{{$sum}}{{end}}</td>
-							<td>{{$sum := .NumberInQueue}}{{if lt $sum 0}}-{{else}}{{$sum}}{{end}}</td>
+							<td>{{$sum = .NumberInQueue}}{{if lt $sum 0}}-{{else}}{{$sum}}{{end}}</td>
 							<td><a href="{{$.Link}}/queue/{{.QID}}" class="button">{{if lt $sum 0}}{{$.locale.Tr "admin.monitor.queue.review"}}{{else}}{{$.locale.Tr "admin.monitor.queue.review_add"}}{{end}}</a>
 						</tr>
 					{{end}}
@@ -36,7 +33,7 @@
 
 		{{template "admin/process" .}}
 	</div>
-</div>
+
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
 		{{.locale.Tr "admin.monitor.process.cancel"}}
@@ -47,4 +44,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "admin/layout_footer" .}}

templates/admin/navbar.tmpl

@@ -1,5 +1,6 @@
-<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
-	<div class="new-menu-inner">
+<div class="four wide column">
+	<div class="ui fluid vertical menu">
+		<div class="header item">{{.locale.Tr "settings"}}</div>
 		<a class="{{if .PageIsAdminDashboard}}active {{end}}item" href="{{AppSubUrl}}/admin">
 			{{.locale.Tr "admin.dashboard"}}
 		</a>

templates/admin/notice.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin notice">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin notice")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.notices.system_notice_list"}} ({{.locale.Tr "admin.total" .Total}})
 		</h4>
@@ -69,7 +66,6 @@
 
 		{{template "base/paginate" .}}
 	</div>
-</div>
 
 <div class="ui modal admin" id="detail-modal">
 	<div class="header">{{$.locale.Tr "admin.notices.view_detail_header"}}</div>
@@ -78,4 +74,5 @@
 		<pre></pre>
 	</div>
 </div>
-{{template "base/footer" .}}
+
+{{template "admin/layout_footer" .}}

templates/admin/org/list.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.orgs.org_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
 			<div class="ui right">
@@ -54,5 +51,4 @@
 
 		{{template "base/paginate" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/packages/list.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.packages.package_manage_panel"}} ({{.locale.Tr "admin.total" .TotalCount}},
 			{{.locale.Tr "admin.packages.total_size" (FileSize .TotalBlobSize)}},
@@ -78,7 +75,6 @@
 
 		{{template "base/paginate" .}}
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -90,4 +86,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "admin/layout_footer" .}}

templates/admin/queue.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin monitor">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin monitor")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.monitor.queue" .Queue.Name}}
 		</h4>
@@ -25,7 +22,7 @@
 						<td>{{.Queue.ExemplarType}}</td>
 						<td>{{$sum := .Queue.NumberOfWorkers}}{{if lt $sum 0}}-{{else}}{{$sum}}{{end}}</td>
 						<td>{{if lt $sum 0}}-{{else}}{{.Queue.MaxNumberOfWorkers}}{{end}}</td>
-						<td>{{$sum := .Queue.NumberInQueue}}{{if lt $sum 0}}-{{else}}{{$sum}}{{end}}</td>
+						<td>{{$sum = .Queue.NumberInQueue}}{{if lt $sum 0}}-{{else}}{{$sum}}{{end}}</td>
 					</tr>
 				</tbody>
 			</table>
@@ -177,10 +174,10 @@
 			{{.locale.Tr "admin.monitor.queue.configuration"}}
 		</h4>
 		<div class="ui attached segment">
-			<pre>{{.Queue.Configuration | JsonPrettyPrint}}
+			<pre>{{.Queue.Configuration | JsonPrettyPrint}}</pre>
 		</div>
 	</div>
-</div>
+
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
 		{{.locale.Tr "admin.monitor.queue.pool.cancel"}}
@@ -192,4 +189,4 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/repo/list.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.repos.repo_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
 			<div class="ui right">
@@ -93,7 +90,6 @@
 
 		{{template "base/paginate" .}}
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -107,4 +103,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "admin/layout_footer" .}}

templates/admin/repo/unadopted.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.repos.unadopted"}}
 			<div class="ui right">
@@ -95,6 +92,5 @@
 			</div>
 		{{end}}
 	</div>
-</div>
 
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/runners/base.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content admin runners">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin runners")}}
+	<div class="admin-setting-content">
 		{{template "shared/actions/runner_list" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/runners/edit.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content admin runners">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin runners")}}
+	<div class="admin-setting-content">
 		{{template "shared/actions/runner_edit" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/stacktrace.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin monitor">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin monitor")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.monitor.stacktrace"}}: {{.locale.Tr "admin.monitor.goroutines" .GoroutineCount}}
 			<div class="ui right">
@@ -17,7 +14,7 @@
 			</div>
 		</div>
 	</div>
-</div>
+
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
 		{{.locale.Tr "admin.monitor.process.cancel"}}
@@ -29,4 +26,4 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/user/edit.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin edit user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin edit user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.users.edit_account"}}
 		</h4>
@@ -194,7 +191,6 @@
 			</form>
 		</div>
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal" id="delete-user-modal">
 	<div class="header">
@@ -216,4 +212,5 @@
 		{{template "base/modal_actions_confirm" .}}
 	</form>
 </div>
-{{template "base/footer" .}}
+
+{{template "admin/layout_footer" .}}

templates/admin/user/list.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.users.user_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
 			<div class="ui right">
@@ -109,5 +106,4 @@
 
 		{{template "base/paginate" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/admin/user/new.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin new user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin new user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.users.new_account"}}
 		</h4>
@@ -90,5 +87,4 @@
 			</form>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}

templates/org/settings/applications.tmpl

@@ -1,18 +1,9 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings options">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings options")}}
+			<div class="org-setting-content">
 				<h4 class="ui top attached header">
 					{{.locale.Tr "settings.applications"}}
 				</h4>
 
 				{{template "user/settings/applications_oauth2_list" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}

templates/org/settings/applications_oauth2_edit.tmpl

@@ -1,7 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings options">
-	{{template "org/header" .}}
-
-	{{template "user/settings/applications_oauth2_edit_form" .}}
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings options")}}
+			<div class="org-setting-content">
+				{{template "user/settings/applications_oauth2_edit_form" .}}
+			</div>
+{{template "org/settings/layout_footer" .}}

templates/org/settings/delete.tmpl

@@ -1,11 +1,6 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings delete">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings delete")}}
+
+			<div class="org-setting-content">
 				<h4 class="ui top attached error header">
 					{{.locale.Tr "org.settings.delete_account"}}
 				</h4>
@@ -25,9 +20,6 @@
 					</form>
 				</div>
 			</div>
-		</div>
-	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -39,4 +31,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "org/settings/layout_footer" .}}

templates/org/settings/hook_new.tmpl

@@ -1,11 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings new webhook">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings new webhook")}}
+			<div class="org-setting-content">
 				<h4 class="ui top attached header">
 					{{if .PageIsSettingsHooksNew}}{{.locale.Tr "repo.settings.add_webhook"}}{{else}}{{.locale.Tr "repo.settings.update_webhook"}}{{end}}
 					<div class="ui right">
@@ -50,7 +44,5 @@
 
 				{{template "repo/settings/webhook/history" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+
+{{template "org/settings/layout_footer" .}}

templates/org/settings/hooks.tmpl

@@ -1,13 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings webhooks">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings webhooks")}}
+			<div class="org-setting-content">
 				{{template "repo/settings/webhook/list" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}

templates/org/settings/labels.tmpl

@@ -1,10 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings labels">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-				<div class="ui twelve wide column content">
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings labels")}}
+				<div class="org-setting-content">
 					<div class="ui grid">
 						<div class="left floated twelve wide column">
 							{{$.locale.Tr "org.settings.labels_desc" | Str2html}}
@@ -17,13 +12,8 @@
 					</div>
 					<div class="ui divider"></div>
 					{{template "repo/issue/labels/label_new" .}}
-					{{template "base/alert" .}}
 					{{template "repo/issue/labels/label_list" .}}
 				</div>
-			</div>
-		</div>
-	</div>
-</div>
-
 {{template "repo/issue/labels/edit_delete_label" .}}
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}
+

templates/org/settings/layout_footer.tmpl

@@ -0,0 +1,11 @@
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+<div class="page-content">
+	<div class="org-layout-right">
+		<div>
+		{{/* block: org-setting-content */}}
+{{end}}
+
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}

templates/org/settings/layout_head.tmpl

@@ -0,0 +1,14 @@
+{{template "base/head" .ctxData}}
+<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
+	{{template "org/header" .ctxData}}
+	<div class="ui container stackable grid">
+		{{template "org/settings/navbar" .ctxData}}
+		<div class="twelve wide column">
+			{{template "base/alert" .ctxData}}
+			{{/* block: org-setting-content */}}
+
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+		</div>
+	</div>
+</div>
+{{end}}

templates/org/settings/options.tmpl

@@ -1,11 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings options">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings options")}}
+			<div class="org-setting-content">
 				<h4 class="ui top attached header">
 					{{.locale.Tr "org.settings.options"}}
 				</h4>
@@ -101,7 +95,4 @@
 					</form>
 				</div>
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}

templates/org/settings/packages.tmpl

@@ -1,15 +1,6 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings packages">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings packages")}}
+			<div class="org-setting-content">
 				{{template "package/shared/cleanup_rules/list" .}}
 				{{template "package/shared/cargo" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}

templates/org/settings/packages_cleanup_rules_edit.tmpl

@@ -1,14 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings packages">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings packages")}}
+			<div class="org-setting-content">
 				{{template "package/shared/cleanup_rules/edit" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}

templates/org/settings/packages_cleanup_rules_preview.tmpl

@@ -1,13 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings packages admin">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings packages")}}
+			<div class="org-setting-content">
 				{{template "package/shared/cleanup_rules/preview" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}

templates/org/settings/runners.tmpl

@@ -1,13 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content organization settings runners">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings runners")}}
+			<div class="org-setting-content">
 				{{template "shared/actions/runner_list" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}

templates/org/settings/runners_edit.tmpl

@@ -1,13 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content organization settings runners">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings runners")}}
+			<div class="org-setting-content">
 				{{template "shared/actions/runner_edit" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}

templates/org/settings/secrets.tmpl

@@ -1,15 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings webhooks">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="ui twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings secrets")}}
+			<div class="org-setting-content">
 				{{template "shared/secrets/add_list" .}}
 			</div>
-		</div>
-	</div>
-</div>
-
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}

templates/repo/settings/branches.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings edit">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings edit")}}
+	<div class="repo-setting-content">
 		{{if .Repository.IsArchived}}
 			<div class="ui warning message">
 				{{.locale.Tr "repo.settings.archive.branchsettings_unavailable"}}
@@ -94,7 +90,6 @@
 			{{end}}
 		{{end}}
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -107,4 +102,4 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/collaboration.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings collaboration">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings collaboration")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.collaboration"}}
 		</h4>
@@ -110,7 +106,6 @@
 		</div>
 		{{end}}
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -122,4 +117,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/deploy_keys.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.deploy_keys"}}
 			<div class="ui right">
@@ -75,7 +71,6 @@
 			{{end}}
 		</div>
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -87,4 +82,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/githook_edit.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings edit githook">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings edit githook")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.githooks"}}
 		</h4>
@@ -28,5 +24,4 @@
 			</form>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/githooks.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings githooks">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings githooks")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.githooks"}}
 		</h4>
@@ -24,5 +20,4 @@
 			</div>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/layout_footer.tmpl

@@ -0,0 +1,11 @@
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+<div class="page-content">
+	<div class="repo-layout-right">
+		<div>
+		{{/* block: repo-setting-content */}}
+{{end}}
+
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}

templates/repo/settings/layout_head.tmpl

@@ -0,0 +1,14 @@
+{{template "base/head" .ctxData}}
+<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
+	{{template "repo/header" .ctxData}}
+	<div class="ui container stackable grid">
+		{{template "repo/settings/navbar" .ctxData}}
+		<div class="twelve wide column">
+			{{template "base/alert" .ctxData}}
+			{{/* block: repo-setting-content */}}
+
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+		</div>
+	</div>
+</div>
+{{end}}

templates/repo/settings/lfs.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings lfs">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings lfs")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.lfs_filelist"}} ({{.locale.Tr "admin.total" .Total}})
 			<div class="ui right">
@@ -60,4 +56,4 @@
 		{{end}}
 	</div>
 </div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/lfs_file.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings lfs">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container repository file list">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings lfs")}}
+	<div class="user-main-content twelve wide column content repository file list">
 		<div class="tab-size-8 non-diff-file-content">
 			<h4 class="ui top attached header">
 				<a href="{{.LFSFilesLink}}">{{.locale.Tr "repo.settings.lfs"}}</a> / <span class="truncate sha">{{.LFSFile.Oid}}</span>
@@ -58,5 +54,4 @@
 			</div>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/lfs_file_find.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings lfs">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container repository file list">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings lfs")}}
+	<div class="user-main-content twelve wide column content repository file list">
 		<div class="tab-size-8 non-diff-file-content">
 			<h4 class="ui top attached header">
 				<a href="{{.LFSFilesLink}}">{{.locale.Tr "repo.settings.lfs"}}</a> / <span class="truncate sha">{{.Oid}}</span>
@@ -48,5 +44,4 @@
 			</table>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/lfs_locks.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings lfs">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container repository file list">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings lfs")}}
+	<div class="user-main-content twelve wide column content repository file list">
 		<div class="tab-size-8 non-diff-file-content">
 			<h4 class="ui top attached header">
 				<a href="{{.LFSFilesLink}}">{{.locale.Tr "repo.settings.lfs"}}</a> / {{.locale.Tr "repo.settings.lfs_locks"}} ({{.locale.Tr "admin.total" .Total}})
@@ -57,5 +53,4 @@
 			{{template "base/paginate" .}}
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/lfs_pointers.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings lfs">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings lfs")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.lfs_pointers.found" .NumPointers .NumAssociated .NumNotAssociated .NumNoExist}}
 			{{if gt .NumAssociatable 0}}
@@ -67,5 +63,4 @@
 			</table>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/navbar.tmpl

@@ -1,5 +1,6 @@
-<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar shadow-body">
-	<div class="new-menu-inner">
+<div class="four wide column">
+	<div class="ui fluid vertical menu">
+		<div class="header item">{{.locale.Tr "org.settings"}}</div>
 		<a class="{{if .PageIsSettingsOptions}}active {{end}}item" href="{{.RepoLink}}/settings">
 			{{.locale.Tr "repo.settings.options"}}
 		</a>

templates/repo/settings/options.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings options">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings options")}}
+	<div class="user-main-content twelve wide column">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.basic_settings"}}
 		</h4>
@@ -798,7 +794,7 @@
 		</div>
 		{{end}}
 	</div>
-</div>
+{{template "repo/settings/layout_footer" .}}
 
 {{if .Permission.IsOwner}}
 	{{if .Repository.IsMirror}}
@@ -993,5 +989,3 @@
 		</div>
 	{{end}}
 {{end}}
-
-{{template "base/footer" .}}

templates/repo/settings/protected_branch.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings branches">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings branches")}}
+	<div class="repo-setting-content">
 		<form class="ui form" action="{{.Link}}" method="post">
 			<h4 class="ui top attached header">
 				{{.locale.Tr "repo.settings.branch_protection" (.Rule.RuleName|Escape) | Str2html}}
@@ -260,5 +256,4 @@
 			</div>
 		</form>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/runner_edit.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content repository settings runners">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings runners")}}
+	<div class="repo-setting-content">
 		{{template "shared/actions/runner_edit" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/runners.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content repository settings runners">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings runners")}}
+	<div class="repo-setting-content">
 		{{template "shared/actions/runner_list" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/secrets.tmpl

@@ -1,10 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content repository settings">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings")}}
+	<div class="repo-setting-content">
 		{{template "shared/secrets/add_list" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/tags.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings edit">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings edit")}}
+	<div class="repo-setting-content">
 		{{if .Repository.IsArchived}}
 			<div class="ui warning message">
 				{{.locale.Tr "repo.settings.archive.tagsettings_unavailable"}}
@@ -127,5 +123,4 @@
 			</div>
 		{{end}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/webhook/base.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings webhooks">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings webhooks")}}
+	<div class="repo-setting-content">
 		{{template "repo/settings/webhook/list" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/repo/settings/webhook/list.tmpl

@@ -1,4 +1,3 @@
-{{template "base/alert" .}}
 
 {{template "repo/settings/webhook/base_list" .}}
 

templates/repo/settings/webhook/new.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings new webhook">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings webhook")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{if .PageIsSettingsHooksNew}}{{.locale.Tr "repo.settings.add_webhook"}}{{else}}{{.locale.Tr "repo.settings.update_webhook"}}{{end}}
 			<div class="ui right">
@@ -48,5 +44,4 @@
 
 		{{template "repo/settings/webhook/history" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}

templates/shared/actions/runner_edit.tmpl

@@ -1,5 +1,4 @@
 <div class="runner-container">
-	{{template "base/alert" .}}
 	<h4 class="ui top attached header">
 		{{.locale.Tr "actions.runners.runner_title"}} {{.Runner.ID}} {{.Runner.Name}}
 	</h4>

templates/shared/actions/runner_list.tmpl

@@ -1,5 +1,4 @@
 <div class="runner-container">
-	{{template "base/alert" .}}
 
 	<h4 class="ui top attached header">
 		{{.locale.Tr "actions.runners.runner_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})

templates/user/settings/account.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings account">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings account")}}
+	<div class="user-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "settings.password"}}
 		</h4>
@@ -159,7 +156,6 @@
 			</form>
 		</div>
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal" id="delete-email">
 	<div class="header">
@@ -183,4 +179,4 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}

templates/user/settings/appearance.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings sshkeys">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings sshkeys")}}
+	<div class="user-setting-content">
 
 		<!-- Theme -->
 		<h4 class="ui top attached header">
@@ -170,6 +167,4 @@
 			</form>
 		</div>
 	</div>
-</div>
-
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}

templates/user/settings/applications.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings applications">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings applications")}}
+	<div class="user-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "settings.manage_access_token"}}
 		</h4>
@@ -266,7 +263,6 @@
 			{{template "user/settings/applications_oauth2" .}}
 		{{end}}
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal" id="delete-token">
 	<div class="header">
@@ -289,5 +285,4 @@
 	</div>
 </div>
 
-
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}

templates/user/settings/applications_oauth2_edit.tmpl

@@ -1,8 +1,6 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings applications">
-	{{template "user/settings/navbar" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings applications")}}
+	<div class="user-setting-content">
 
-	{{template "user/settings/applications_oauth2_edit_form" .}}
-</div>
-
-{{template "base/footer" .}}
+		{{template "user/settings/applications_oauth2_edit_form" .}}
+	</div>
+{{template "user/settings/layout_footer" .}}

templates/user/settings/applications_oauth2_edit_form.tmpl

@@ -1,5 +1,4 @@
 <div class="ui container">
-	{{template "base/alert" .}}
 	<h4 class="ui top attached header">
 		{{.locale.Tr "settings.edit_oauth2_application"}}
 	</h4>

templates/user/settings/hook_new.tmpl

@@ -1,10 +1,7 @@
-{{template "base/head" .}}
-<div class="page-content user  settings new webhook">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		<div class="twelve wide column content">
-			{{template "base/alert" .}}
-			<h4 class="ui top attached header">
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings new webhook")}}
+	<div class="user-setting-content">
+		<div class="user-setting-content">
+				<h4 class="ui top attached header">
 				{{if .PageIsSettingsHooksNew}}{{.locale.Tr "repo.settings.add_webhook"}}{{else}}{{.locale.Tr "repo.settings.update_webhook"}}{{end}}
 				<div class="ui right">
 					{{if eq .HookType "gitea"}}
@@ -49,5 +46,4 @@
 			{{template "repo/settings/webhook/history" .}}
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}

templates/user/settings/hooks.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content user settings webhooks">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings webhooks")}}
+	<div class="user-setting-content">
 		{{template "repo/settings/webhook/list" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}

templates/user/settings/keys.tmpl

@@ -1,12 +1,7 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings sshkeys">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings sshkeys")}}
+	<div class="user-setting-content">
 		{{template "user/settings/keys_ssh" .}}
 		{{template "user/settings/keys_principal" .}}
 		{{template "user/settings/keys_gpg" .}}
 	</div>
-</div>
-
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}

templates/user/settings/layout_footer.tmpl

@@ -0,0 +1,11 @@
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+<div class="page-content">
+	<div class="user-layout-right">
+		<div>
+		{{/* block: user-setting-content */}}
+{{end}}
+
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}

templates/user/settings/layout_head.tmpl

@@ -0,0 +1,13 @@
+{{template "base/head" .ctxData}}
+<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
+	<div class="ui container stackable grid">
+		{{template "user/settings/navbar" .ctxData}}
+		<div class="twelve wide column">
+			{{template "base/alert" .ctxData}}
+			{{/* block: user-setting-content */}}
+
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+		</div>
+	</div>
+</div>
+{{end}}

templates/user/settings/navbar.tmpl

@@ -1,5 +1,6 @@
-<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
-	<div class="new-menu-inner">
+<div class="four wide column">
+	<div class="ui fluid vertical menu">
+		<div class="header item">{{.locale.Tr "org.settings"}}</div>
 		<a class="{{if .PageIsSettingsProfile}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
 			{{.locale.Tr "settings.profile"}}
 		</a>

templates/user/settings/organization.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings organization">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings organization")}}
+	<div class="user-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "settings.orgs"}}
 			{{if .SignedUser.CanCreateOrganization}}
@@ -39,7 +36,7 @@
 			{{end}}
 		</div>
 	</div>
-</div>
+
 <div class="ui gitea-confirm-modal delete modal" id="leave-organization">
 	<div class="header">
 		{{$.locale.Tr "org.members.leave"}}
@@ -49,4 +46,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "user/settings/layout_footer" .}}

templates/user/settings/packages.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings packages">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings packages")}}
+	<div class="user-setting-content">
 		{{template "package/shared/cleanup_rules/list" .}}
 		{{template "package/shared/cargo" .}}
 
@@ -25,4 +22,4 @@
 		</div>
 	</div>
 </div>
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}

templates/user/settings/packages_cleanup_rules_edit.tmpl

@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings packages">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings packages")}}
+	<div class="user-setting-content">
 		{{template "package/shared/cleanup_rules/edit" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}

templates/user/settings/packages_cleanup_rules_preview.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings packages admin">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user packages admin")}}
+	<div class="user-setting-content">
 		{{template "package/shared/cleanup_rules/preview" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}

templates/user/settings/profile.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings profile">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings profile")}}
+	<div class="user-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "settings.public_profile"}}
 		</h4>
@@ -133,5 +130,4 @@
 			</form>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}

templates/user/settings/repos.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings repos">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings repos")}}
+	<div class="user-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "settings.repos"}}
 		</h4>
@@ -127,7 +124,6 @@
 			{{end}}
 		</div>
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -139,4 +135,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "user/settings/layout_footer" .}}

templates/user/settings/secrets.tmpl

@@ -1,10 +1,6 @@
-{{template "base/head" .}}
-<div class="page-content user settings secrets">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings secrets")}}
+	<div class="user-setting-content">
 		{{template "shared/secrets/add_list" .}}
 	</div>
-</div>
 
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}

templates/user/settings/security/security.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings security">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings security")}}
+	<div class="user-setting-content">
 		{{template "user/settings/security/twofa" .}}
 		{{template "user/settings/security/webauthn" .}}
 		{{template "user/settings/security/accountlinks" .}}
@@ -10,6 +7,5 @@
 		{{template "user/settings/security/openid" .}}
 		{{end}}
 	</div>
-</div>
 
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}

templates/user/settings/security/twofa_enroll.tmpl

@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings twofa">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings twofa")}}
+	<div class="user-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "settings.twofa_enroll"}}
 		</h4>
@@ -24,6 +21,5 @@
 			</form>
 		</div>
 	</div>
-</div>
 
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}