From 83022013c83feb5488952baea3ef0be818dfce21 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 28 Apr 2023 09:48:41 +0800
Subject: [PATCH] Fix layouts of admin table / adapt repo / email test 
 (#24370)

Ref:
https://github.com/go-gitea/gitea/pull/24315#pullrequestreview-1403034993

And fix the incorrect layout for "dasbboard", the "form" shouldn't
follow `<h4 class="ui top attached header">`, so move it to inner.

Diff with ignoring spaces:
https://github.com/go-gitea/gitea/pull/24370/files?diff=unified&w=1

A known bug: the adapt/delete button doesn't work due to a historical
messy logic, will fix it in next PR (#24374)

![image](https://user-images.githubusercontent.com/2114189/234754656-d160b098-b8d4-4783-962a-27d5c764863c.png)

![image](https://user-images.githubusercontent.com/2114189/234762327-3e77e2e4-a156-4498-8a8b-092e14cf9204.png)

![image](https://user-images.githubusercontent.com/2114189/234767811-74b7272c-e40c-4850-8e3c-499e3b53b827.png)

![image](https://user-images.githubusercontent.com/2114189/234761247-e6aad889-dcad-443c-948f-2d44df68725b.png)
---
 options/locale/locale_en-US.ini               |  1 +
 templates/admin/config.tmpl                   | 18 +++--
 templates/admin/dashboard.tmpl                | 10 +--
 templates/admin/repo/list.tmpl                |  2 +-
 templates/admin/repo/unadopted.tmpl           | 75 +++++++++----------
 .../repo/settings/webhook/base_list.tmpl      |  2 +-
 templates/user/settings/repos.tmpl            | 12 +--
 web_src/css/admin.css                         | 21 ++----
 web_src/css/runner.css                        |  4 +
 web_src/css/user.css                          | 11 ---
 10 files changed, 69 insertions(+), 87 deletions(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index fb21ee2ec4..3fff13c5a2 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -2959,6 +2959,7 @@ config.mailer_sendmail_timeout = Sendmail Timeout
 config.mailer_use_dummy = Dummy
 config.test_email_placeholder = Email (e.g. test@example.com)
 config.send_test_mail = Send Testing Email
+config.send_test_mail_submit = Send
 config.test_mail_failed = Failed to send a testing email to "%s": %v
 config.test_mail_sent = A testing email has been sent to "%s".
 
diff --git a/templates/admin/config.tmpl b/templates/admin/config.tmpl
index 136ad38f16..f0d0ad3643 100644
--- a/templates/admin/config.tmpl
+++ b/templates/admin/config.tmpl
@@ -238,16 +238,18 @@
 						<dd>{{.Mailer.SMTPPort}}</dd>
 					{{end}}
 					<dt>{{.locale.Tr "admin.config.mailer_user"}}</dt>
-					<dd>{{if .Mailer.User}}{{.Mailer.User}}{{else}}(empty){{end}}</dd><br>
-					<form class="ui form ignore-dirty" action="{{AppSubUrl}}/admin/config/test_mail" method="post">
-						{{.CsrfTokenHtml}}
-						<div class="inline field ui left">
-							<div class="ui input">
+					<dd>{{if .Mailer.User}}{{.Mailer.User}}{{else}}(empty){{end}}</dd>
+					<div class="ui divider"></div>
+					<dt class="gt-py-2">{{.locale.Tr "admin.config.send_test_mail"}}</dt>
+					<dd>
+						<form class="ui form ignore-dirty" action="{{AppSubUrl}}/admin/config/test_mail" method="post">
+							{{.CsrfTokenHtml}}
+							<div class="ui tiny input">
 								<input type="email" name="email" placeholder="{{.locale.Tr "admin.config.test_email_placeholder"}}" size="29" required>
 							</div>
-						</div>
-						<button class="ui green button" id="test-mail-btn">{{.locale.Tr "admin.config.send_test_mail"}}</button>
-					</form>
+							<button class="ui tiny green button">{{.locale.Tr "admin.config.send_test_mail_submit"}}</button>
+						</form>
+					</dd>
 				{{end}}
 			</dl>
 		</div>
diff --git a/templates/admin/dashboard.tmpl b/templates/admin/dashboard.tmpl
index 0aa95c0e73..6784451376 100644
--- a/templates/admin/dashboard.tmpl
+++ b/templates/admin/dashboard.tmpl
@@ -16,9 +16,9 @@
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.dashboard.operations"}}
 		</h4>
-		<form method="post" action="{{AppSubUrl}}/admin">
-			{{.CsrfTokenHtml}}
-			<div class="ui attached table segment">
+		<div class="ui attached table segment">
+			<form method="post" action="{{AppSubUrl}}/admin">
+				{{.CsrfTokenHtml}}
 				<table class="ui very basic table gt-px-4">
 					<tbody>
 						<tr>
@@ -71,8 +71,8 @@
 						</tr>
 					</tbody>
 				</table>
-			</div>
-		</form>
+			</form>
+		</div>
 
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.dashboard.system_status"}}
diff --git a/templates/admin/repo/list.tmpl b/templates/admin/repo/list.tmpl
index 3d09f2de23..515ec78a34 100644
--- a/templates/admin/repo/list.tmpl
+++ b/templates/admin/repo/list.tmpl
@@ -1,4 +1,4 @@
-{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin")}}
 	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.repos.repo_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
diff --git a/templates/admin/repo/unadopted.tmpl b/templates/admin/repo/unadopted.tmpl
index 3e47447178..27898a1854 100644
--- a/templates/admin/repo/unadopted.tmpl
+++ b/templates/admin/repo/unadopted.tmpl
@@ -1,4 +1,4 @@
-{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin")}}
 	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.repos.unadopted"}}
@@ -18,47 +18,44 @@
 		{{if .search}}
 			<div class="ui attached segment settings">
 				{{if .Dirs}}
-					<div class="ui middle aligned divided list">
+					<div class="ui aligned divided list">
 						{{range $dirI, $dir := .Dirs}}
-							<div class="item">
-								<div class="content">
-									<span class="icon">{{svg "octicon-file-directory-fill"}}</span>
-									<span class="name">{{$dir}}</span>
-									<div class="right floated content">
-										<button class="ui button submit tiny green adopt show-modal" data-modal="#adopt-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-plus"}}</span><span class="label">{{$.locale.Tr "repo.adopt_preexisting_label"}}</span></button>
-										<div class="ui g-modal-confirm modal" id="adopt-unadopted-modal-{{$dirI}}">
-											<div class="header">
-												<span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span>
-											</div>
-											<div class="content">
-												<p>{{$.locale.Tr "repo.adopt_preexisting_content" $dir}}</p>
-											</div>
-											<form class="ui form" method="POST" action="{{AppSubUrl}}/admin/repos/unadopted">
-												{{$.CsrfTokenHtml}}
-												<input type="hidden" name="id" value="{{$dir}}">
-												<input type="hidden" name="action" value="adopt">
-												<input type="hidden" name="q" value="{{$.Keyword}}">
-												<input type="hidden" name="page" value="{{$.CurrentPage}}">
-												{{template "base/modal_actions_confirm" (dict "locale" $.locale)}}
-											</form>
+							<div class="item gt-df gt-ac">
+								<span class="gt-f1"> {{svg "octicon-file-directory-fill"}} {{$dir}}</span>
+								<div>
+									<button class="ui button green show-modal gt-p-3" data-modal="#adopt-unadopted-modal-{{$dirI}}">{{svg "octicon-plus"}} {{$.locale.Tr "repo.adopt_preexisting_label"}}</button>
+									<div class="ui g-modal-confirm modal" id="adopt-unadopted-modal-{{$dirI}}">
+										<div class="header">
+											<span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span>
 										</div>
-										<button class="ui button submit tiny red delete show-modal" data-modal="#delete-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-x"}}</span><span class="label">{{$.locale.Tr "repo.delete_preexisting_label"}}</span></button>
-										<div class="ui g-modal-confirm modal" id="delete-unadopted-modal-{{$dirI}}">
-											<div class="header">
-												<span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span>
-											</div>
-											<div class="content">
-												<p>{{$.locale.Tr "repo.delete_preexisting_content" $dir}}</p>
-											</div>
-											<form class="ui form" method="POST" action="{{AppSubUrl}}/admin/repos/unadopted">
-												{{$.CsrfTokenHtml}}
-												<input type="hidden" name="id" value="{{$dir}}">
-												<input type="hidden" name="action" value="delete">
-												<input type="hidden" name="q" value="{{$.Keyword}}">
-												<input type="hidden" name="page" value="{{$.CurrentPage}}">
-												{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
-											</form>
+										<div class="content">
+											<p>{{$.locale.Tr "repo.adopt_preexisting_content" $dir}}</p>
 										</div>
+										<form class="ui form" method="POST" action="{{AppSubUrl}}/admin/repos/unadopted">
+											{{$.CsrfTokenHtml}}
+											<input type="hidden" name="id" value="{{$dir}}">
+											<input type="hidden" name="action" value="adopt">
+											<input type="hidden" name="q" value="{{$.Keyword}}">
+											<input type="hidden" name="page" value="{{$.CurrentPage}}">
+											{{template "base/modal_actions_confirm" (dict "locale" $.locale)}}
+										</form>
+									</div>
+									<button class="ui button red show-modal gt-p-3" data-modal="#delete-unadopted-modal-{{$dirI}}">{{svg "octicon-x"}} {{$.locale.Tr "repo.delete_preexisting_label"}}</button>
+									<div class="ui g-modal-confirm modal" id="delete-unadopted-modal-{{$dirI}}">
+										<div class="header">
+											<span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span>
+										</div>
+										<div class="content">
+											<p>{{$.locale.Tr "repo.delete_preexisting_content" $dir}}</p>
+										</div>
+										<form class="ui form" method="POST" action="{{AppSubUrl}}/admin/repos/unadopted">
+											{{$.CsrfTokenHtml}}
+											<input type="hidden" name="id" value="{{$dir}}">
+											<input type="hidden" name="action" value="delete">
+											<input type="hidden" name="q" value="{{$.Keyword}}">
+											<input type="hidden" name="page" value="{{$.CurrentPage}}">
+											{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
+										</form>
 									</div>
 								</div>
 							</div>
diff --git a/templates/repo/settings/webhook/base_list.tmpl b/templates/repo/settings/webhook/base_list.tmpl
index 61c5799513..663fde1528 100644
--- a/templates/repo/settings/webhook/base_list.tmpl
+++ b/templates/repo/settings/webhook/base_list.tmpl
@@ -1,7 +1,7 @@
 <h4 class="ui top attached header">
 	{{.Title}}
 	<div class="ui right">
-		<div class="ui floating1 jump dropdown">
+		<div class="ui jump dropdown">
 			<div class="ui primary tiny button">{{.locale.Tr "repo.settings.add_webhook"}}</div>
 			<div class="menu">
 				<a class="item" href="{{.BaseLinkNew}}/gitea/new">
diff --git a/templates/user/settings/repos.tmpl b/templates/user/settings/repos.tmpl
index d60f1ffcf2..3ac381fd90 100644
--- a/templates/user/settings/repos.tmpl
+++ b/templates/user/settings/repos.tmpl
@@ -9,7 +9,7 @@
 					<div class="ui middle aligned divided list">
 						{{range $dirI, $dir := .Dirs}}
 							{{$repo := index $.ReposMap $dir}}
-							<div class="item">
+							<div class="item {{if not $repo}}gt-py-2{{end}}">{{/* if not repo, then there are "adapt" buttons, so the padding shouldn't be that default large*/}}
 								<div class="content">
 									{{if $repo}}
 										{{if $repo.IsPrivate}}
@@ -30,11 +30,11 @@
 											<span><a href="{{$repo.BaseRepo.Link}}">{{$repo.BaseRepo.OwnerName}}/{{$repo.BaseRepo.Name}}</a></span>
 										{{end}}
 									{{else}}
-										<span class="icon">{{svg "octicon-file-directory-fill"}}</span>
-										<span class="name">{{$.ContextUser.Name}}/{{$dir}}</span>
-										<div class="right floated content">
+										<span class="icon gt-dib gt-pt-3">{{svg "octicon-file-directory-fill"}}</span>
+										<span class="name gt-dib gt-pt-3">{{$.ContextUser.Name}}/{{$dir}}</span>
+										<div class="ui right">
 											{{if $.allowAdopt}}
-												<button class="ui button submit tiny green adopt show-modal" data-modal="#adopt-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-plus"}}</span><span class="label">{{$.locale.Tr "repo.adopt_preexisting_label"}}</span></button>
+												<button class="ui button green show-modal gt-p-3" data-modal="#adopt-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-plus"}}</span><span class="label">{{$.locale.Tr "repo.adopt_preexisting_label"}}</span></button>
 												<div class="ui g-modal-confirm modal" id="adopt-unadopted-modal-{{$dirI}}">
 													<div class="header">
 														<span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span>
@@ -51,7 +51,7 @@
 												</div>
 											{{end}}
 											{{if $.allowDelete}}
-												<button class="ui button submit tiny red delete show-modal" data-modal="#delete-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-x"}}</span><span class="label">{{$.locale.Tr "repo.delete_preexisting_label"}}</span></button>
+												<button class="ui button red show-modal gt-p-3" data-modal="#delete-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-x"}}</span><span class="label">{{$.locale.Tr "repo.delete_preexisting_label"}}</span></button>
 												<div class="ui g-modal-confirm modal" id="delete-unadopted-modal-{{$dirI}}">
 													<div class="header">
 														<span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span>
diff --git a/web_src/css/admin.css b/web_src/css/admin.css
index c8e17dbba9..0c5c73823e 100644
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@@ -4,18 +4,7 @@
   margin: 12px -1rem -1rem;
 }
 
-.admin .settings .button.adopt,
-.admin .settings .button.delete {
-  margin-top: -15px;
-  margin-bottom: -15px;
-}
-
-.admin .settings .button.adopt .label,
-.admin .settings .button.delete .label {
-  vertical-align: middle;
-}
-
-.admin.user .email {
+.admin.user table.table .email {
   max-width: 200px;
 }
 
@@ -51,12 +40,12 @@
   }
 }
 
-.admin.config #test-mail-btn {
-  margin-left: 5px;
-}
-
 .admin code,
 .admin pre {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
+
+.admin .ui.table.segment {
+  overflow-x: auto; /* if the screen width is small, many wide tables (eg: user list) need scroll bars */
+}
diff --git a/web_src/css/runner.css b/web_src/css/runner.css
index d0ea5252e5..0d7415d18b 100644
--- a/web_src/css/runner.css
+++ b/web_src/css/runner.css
@@ -2,6 +2,10 @@
   padding-bottom: 30px;
 }
 
+.runner-container .ui.table.segment {
+  overflow-x: auto;
+}
+
 .runner-container .runner-ops > a {
   margin-left: 0.5em;
 }
diff --git a/web_src/css/user.css b/web_src/css/user.css
index 2a3fe1beaf..cdf2956565 100644
--- a/web_src/css/user.css
+++ b/web_src/css/user.css
@@ -90,17 +90,6 @@
   padding: 8px 15px;
 }
 
-.user .button.adopt,
-.user .button.delete {
-  margin-top: -15px;
-  margin-bottom: -15px;
-}
-
-.user .button.adopt .label,
-.user .button.delete .label {
-  vertical-align: middle;
-}
-
 .user.link-account:not(.icon) {
   padding-top: 15px;
   padding-bottom: 5px;