From 4ce63a1d57791c53342ae25049997e2f721cf014 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 29 Jun 2026 21:06:25 +0800 Subject: [PATCH] chore: various UI problems (#38263) 1. fix dirty "list" styles for "githooks" and "webhooks" 2. fix git hook edit page layout 3. fix codemirror editor styles 4. fix incorrect "ui attached header" width --- templates/repo/settings/githook_edit.tmpl | 20 ++++++------ templates/repo/settings/githooks.tmpl | 9 +++--- .../repo/settings/webhook/base_list.tmpl | 11 ++++--- templates/repo/settings/webhook/history.tmpl | 4 +-- web_src/css/admin.css | 6 ---- web_src/css/modules/codeeditor.css | 22 +++++++------ web_src/css/modules/header.css | 2 ++ web_src/css/modules/menu.css | 1 + web_src/css/repo.css | 32 ------------------- web_src/css/repo/file-view.css | 2 -- 10 files changed, 38 insertions(+), 71 deletions(-) diff --git a/templates/repo/settings/githook_edit.tmpl b/templates/repo/settings/githook_edit.tmpl index 07ea7fb4fd..4339443954 100644 --- a/templates/repo/settings/githook_edit.tmpl +++ b/templates/repo/settings/githook_edit.tmpl @@ -8,19 +8,19 @@
-

{{ctx.Locale.Tr "repo.settings.githook_edit_desc"}}

+ {{ctx.Locale.Tr "repo.settings.githook_edit_desc"}} +
+
{{with .Hook}} -
- -
-
-
- -
+ +
{{end}}
+
+ +
{{template "repo/settings/layout_footer" .}} diff --git a/templates/repo/settings/githooks.tmpl b/templates/repo/settings/githooks.tmpl index 77aa503a6b..874a4f095d 100644 --- a/templates/repo/settings/githooks.tmpl +++ b/templates/repo/settings/githooks.tmpl @@ -4,13 +4,14 @@ {{ctx.Locale.Tr "repo.settings.githooks"}}
-
-
{{ctx.Locale.Tr "repo.settings.githooks_desc"}}
+
{{ctx.Locale.Tr "repo.settings.githooks_desc"}}
+ {{if .Hooks}}
{{end}} +
{{range .Hooks}} -
+
{{svg "octicon-dot-fill" 22}} {{.Name}} - {{svg "octicon-pencil"}} + {{svg "octicon-pencil"}}
{{end}}
diff --git a/templates/repo/settings/webhook/base_list.tmpl b/templates/repo/settings/webhook/base_list.tmpl index 8c4096ddc5..2725df85e8 100644 --- a/templates/repo/settings/webhook/base_list.tmpl +++ b/templates/repo/settings/webhook/base_list.tmpl @@ -8,17 +8,18 @@
-
-
{{.Description}}
+
{{.Description}}
+ {{if .Webhooks}}
{{end}} +
{{range .Webhooks}} -
+
{{svg "octicon-dot-fill" 22}}
{{or .Name (ctx.Locale.Tr "repo.settings.webhook.name_empty")}} {{.URL}}
- {{svg "octicon-pencil"}} - {{svg "octicon-pencil"}} + {{svg "octicon-trash"}} diff --git a/templates/repo/settings/webhook/history.tmpl b/templates/repo/settings/webhook/history.tmpl index 8c31b467d5..d57913042b 100644 --- a/templates/repo/settings/webhook/history.tmpl +++ b/templates/repo/settings/webhook/history.tmpl @@ -14,7 +14,7 @@ {{end}}
-
+
{{range .History}}
@@ -32,7 +32,7 @@ {{DateUtils.TimeSince .Delivered}}
-
+
{{template "shared/misc/tabtitle" (ctx.Locale.Tr "repo.settings.webhook.request")}} diff --git a/web_src/css/admin.css b/web_src/css/admin.css index a07dcc9ed7..3d5ca60180 100644 --- a/web_src/css/admin.css +++ b/web_src/css/admin.css @@ -1,9 +1,3 @@ -.admin.hooks .list > .item:not(:first-child) { - border-top: 1px solid var(--color-secondary); - padding: 0.25rem 1rem; - margin: 12px -1rem -1rem; -} - .admin dl.admin-dl-horizontal { padding: 1em; margin: 0; diff --git a/web_src/css/modules/codeeditor.css b/web_src/css/modules/codeeditor.css index d4be96845b..417c10d86d 100644 --- a/web_src/css/modules/codeeditor.css +++ b/web_src/css/modules/codeeditor.css @@ -13,31 +13,33 @@ height: 90vh; } -.edit.githook .code-editor-container { - border: 1px solid var(--color-secondary); +.code-editor-container { + position: relative; /* for command panel */ + background-color: var(--color-code-bg); /* fully colorize the container and editor */ } -.code-editor-container { - position: relative; - min-height: 90vh; +.ui.bottom.attached.segment .code-editor-container, +.ui.bottom.attached.segment .code-editor-container .cm-scroller { + border-radius: 0 0 var(--border-radius) var(--border-radius); /* avoid overflow parent's border with radius */ } /* editor layout */ .code-editor-container .cm-editor { color: var(--color-text); - background-color: var(--color-code-bg); font-family: var(--fonts-monospace); font-size: 12px; - max-height: 90vh; + /* it was written as "min-height: 90vh; max-height: 90vh", so maybe the author prefer to always use about 90vh. + here, minus 80px to keep spaces for the top toolbar */ + height: max(200px, calc(95vh - 80px)); } -.code-editor-container .cm-editor, -.code-editor-container .cm-editor .cm-scroller { - border-radius: 0 0 var(--border-radius) var(--border-radius); +.code-editor-container .cm-editor.cm-focused { + outline: none; /* don't show the default focus outline when the editor gets focused */ } .code-editor-container .cm-content { caret-color: var(--color-caret); + padding: 0; /* avoid the small top and bottom padding */ } .code-editor-container .cm-cursor, diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css index 5a94836b98..e51c1a9c22 100644 --- a/web_src/css/modules/header.css +++ b/web_src/css/modules/header.css @@ -93,6 +93,8 @@ h4.ui.header .sub.header { background: var(--color-box-header); padding: 0.78571429rem 1rem; margin: 0 -1px; + width: calc(100% + 2px); + max-width: calc(100% + 2px); /* the same as "ui attached segment" */ border-radius: 0; border: 1px solid var(--color-secondary); } diff --git a/web_src/css/modules/menu.css b/web_src/css/modules/menu.css index abdce8785b..93992a984c 100644 --- a/web_src/css/modules/menu.css +++ b/web_src/css/modules/menu.css @@ -27,6 +27,7 @@ .ui.menu:not(.vertical) .item { display: flex; align-items: center; + gap: var(--gap-inline); } .ui.menu .item { diff --git a/web_src/css/repo.css b/web_src/css/repo.css index e5c293a4d6..f1359c980c 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1200,38 +1200,6 @@ td .commit-summary { } } -.settings.webhooks .list > .item:not(:first-child), -.settings.githooks .list > .item:not(:first-child), -.settings.actions .list > .item:not(:first-child) { - padding: 0.25rem 1rem; - margin: 12px -1rem -1rem; -} - -.settings .list > .item:not(:first-child) { - border-top: 1px solid var(--color-secondary); - padding: 1rem; - margin: 16px -1rem -1rem; -} - -.settings .list > .item > .svg { - display: table-cell; -} - -.settings .list > .item > .svg + .content { - display: table-cell; - padding: 0 0 0 0.5em; - vertical-align: top; -} - -.settings .list > .item .info { - margin-top: 10px; -} - -.settings .list > .item .info .tab.segment { - border: 0; - padding: 10px 0 0; -} - .comment:target .comment-container { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important; diff --git a/web_src/css/repo/file-view.css b/web_src/css/repo/file-view.css index fec1c7cd8f..74836353d7 100644 --- a/web_src/css/repo/file-view.css +++ b/web_src/css/repo/file-view.css @@ -1,7 +1,5 @@ .file-view-container { padding: 0 !important; /* the file-view itself provides padding */ - width: 100% !important; /* override fomantic's "100% + 2px" */ - max-width: 100% !important; } .file-view tr.active .lines-num,