From f1a4330306a21a1b53aaa744ec5749a52135c807 Mon Sep 17 00:00:00 2001 From: Hester Gong Date: Wed, 26 Apr 2023 23:59:08 +0800 Subject: [PATCH] Modify width of ui container, fine tune css for settings pages and org header (#24315) Close #24302 Part of #24229, Follows #24246 This PR focused on CSS style fine-tune, main changes: 1. Give `.ui.ui.ui.container` a width of `1280px` with a max-width of `calc(100vw - 64px)`, so the main contents looks better on large devices. 2. Share styles for table elements in all levels settings pages to fix overflow of runners table on mobile and for consistency (The headers on mobile can be further improved, but haven't found a proper way yet). 3. Use [stackable grid](https://fomantic-ui.com/collections/grid.html#stackable) and [device column width](https://fomantic-ui.com/examples/responsive.html) for responsiveness for some pages (repo/org collaborators settings pages, org teams related page) 4. Fixed #24302 by sharing label related CSS in reporg.css 5. Fine tune repo tags settings page --------- Co-authored-by: wxiaoguang --- templates/admin/dashboard.tmpl | 24 ++--- templates/admin/notice.tmpl | 105 +++++++++----------- templates/org/settings/runners.tmpl | 6 +- templates/org/team/members.tmpl | 2 +- templates/org/team/repositories.tmpl | 2 +- templates/org/team/teams.tmpl | 2 +- templates/repo/actions/list.tmpl | 2 +- templates/repo/issue/labels/label_list.tmpl | 4 +- templates/repo/settings/collaboration.tmpl | 4 +- templates/repo/settings/deploy_keys.tmpl | 2 +- templates/repo/settings/tags.tmpl | 2 +- templates/user/settings/applications.tmpl | 2 +- templates/user/settings/keys_principal.tmpl | 2 +- templates/user/settings/keys_ssh.tmpl | 2 +- templates/user/settings/repos.tmpl | 2 +- web_src/css/admin.css | 50 +--------- web_src/css/base.css | 17 +++- web_src/css/helpers.css | 18 ++++ web_src/css/organization.css | 11 +- web_src/css/shared/repoorg.css | 6 ++ 20 files changed, 122 insertions(+), 143 deletions(-) diff --git a/templates/admin/dashboard.tmpl b/templates/admin/dashboard.tmpl index 93fcae4ca4d4..0aa95c0e73c5 100644 --- a/templates/admin/dashboard.tmpl +++ b/templates/admin/dashboard.tmpl @@ -19,55 +19,55 @@
{{.CsrfTokenHtml}}
- +
- + - + - + - + {{if and (not .SSH.Disabled) (not .SSH.StartBuiltinServer)}} - + - + {{end}} - + - + - + - + - +
{{.locale.Tr "admin.dashboard.delete_inactive_accounts"}}
{{.locale.Tr "admin.dashboard.delete_repo_archives"}}
{{.locale.Tr "admin.dashboard.delete_missing_repos"}}
{{.locale.Tr "admin.dashboard.git_gc_repos"}}
{{.locale.Tr "admin.dashboard.resync_all_sshkeys"}}
{{.locale.Tr "admin.dashboard.resync_all_sshkeys.desc"}}
{{.locale.Tr "admin.dashboard.resync_all_sshprincipals"}}
{{.locale.Tr "admin.dashboard.resync_all_sshprincipals.desc"}}
{{.locale.Tr "admin.dashboard.resync_all_hooks"}}
{{.locale.Tr "admin.dashboard.reinit_missing_repos"}}
{{.locale.Tr "admin.dashboard.sync_external_users"}}
{{.locale.Tr "admin.dashboard.repo_health_check"}}
{{.locale.Tr "admin.dashboard.delete_generated_repository_avatars"}}
diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl index bd6b74dd2bdf..3dbae0462575 100644 --- a/templates/admin/notice.tmpl +++ b/templates/admin/notice.tmpl @@ -3,67 +3,60 @@

{{.locale.Tr "admin.notices.system_notice_list"}} ({{.locale.Tr "admin.total" .Total}})

-
- - +
+ + + + + + + + + + + + {{range .Notices}} - - - - - - + + + + + + - - - {{range .Notices}} + {{end}} + + {{if .Notices}} + - - - - - - - - {{end}} - - {{if .Notices}} - - - - + - - - {{end}} -
ID{{.locale.Tr "admin.notices.type"}}{{.locale.Tr "admin.notices.desc"}}{{.locale.Tr "admin.users.created"}}{{.locale.Tr "admin.notices.op"}}
ID{{.locale.Tr "admin.notices.type"}}{{.locale.Tr "admin.notices.desc"}}{{.locale.Tr "admin.users.created"}}{{.locale.Tr "admin.notices.op"}}
{{.ID}}{{$.locale.Tr .TrStr}}{{.Description}}{{DateTime "short" .CreatedUnix}}{{svg "octicon-note" 16}}
-
- -
- 		{{.ID}}{{$.locale.Tr .TrStr}}{{.Description}}{{DateTime "short" .CreatedUnix}}{{svg "octicon-note" 16 "view-detail"}}
- - {{.CsrfTokenHtml}} - - -
{{/* TODO: Make this dropdown accessible */}} - {{.locale.Tr "admin.notices.operations"}} -
-
- {{.locale.Tr "admin.notices.select_all"}} -
-
- {{.locale.Tr "admin.notices.deselect_all"}} -
-
- {{.locale.Tr "admin.notices.inverse_selection"}} -
+
+
+ {{.CsrfTokenHtml}} + +
+
{{/* TODO: Make this dropdown accessible */}} + {{.locale.Tr "admin.notices.operations"}} +
+
+ {{.locale.Tr "admin.notices.select_all"}} +
+
+ {{.locale.Tr "admin.notices.deselect_all"}} +
+
+ {{.locale.Tr "admin.notices.inverse_selection"}}
- -
-
- +
+ + + + + {{end}} + {{template "base/paginate" .}} diff --git a/templates/org/settings/runners.tmpl b/templates/org/settings/runners.tmpl index 2350f68ba9e9..86cb1bcd787c 100644 --- a/templates/org/settings/runners.tmpl +++ b/templates/org/settings/runners.tmpl @@ -1,5 +1,5 @@ {{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings runners")}} -
- {{template "shared/actions/runner_list" .}} -
+
+ {{template "shared/actions/runner_list" .}} +
{{template "org/settings/layout_footer" .}} diff --git a/templates/org/team/members.tmpl b/templates/org/team/members.tmpl index 5f520f24a115..b31f2a96c583 100644 --- a/templates/org/team/members.tmpl +++ b/templates/org/team/members.tmpl @@ -3,7 +3,7 @@ {{template "org/header" .}}
{{template "base/alert" .}} -
+
{{template "org/team/sidebar" .}}
{{template "org/team/navbar" .}} diff --git a/templates/org/team/repositories.tmpl b/templates/org/team/repositories.tmpl index 86b4a212d1f3..c73f40f0541e 100644 --- a/templates/org/team/repositories.tmpl +++ b/templates/org/team/repositories.tmpl @@ -3,7 +3,7 @@ {{template "org/header" .}}
{{template "base/alert" .}} -
+
{{template "org/team/sidebar" .}}
{{template "org/team/navbar" .}} diff --git a/templates/org/team/teams.tmpl b/templates/org/team/teams.tmpl index 9148a45e5a55..dcf937f3f073 100644 --- a/templates/org/team/teams.tmpl +++ b/templates/org/team/teams.tmpl @@ -10,7 +10,7 @@
{{end}} -
+
{{range .Teams}}
diff --git a/templates/repo/actions/list.tmpl b/templates/repo/actions/list.tmpl index 15f0d607a3c2..0f446302011b 100644 --- a/templates/repo/actions/list.tmpl +++ b/templates/repo/actions/list.tmpl @@ -3,7 +3,7 @@ {{template "repo/header" .}}
-
+
{{.locale.Tr "actions.runs.all_workflows"}} diff --git a/templates/repo/issue/labels/label_list.tmpl b/templates/repo/issue/labels/label_list.tmpl index d2c041e2ca11..b294036f0ccc 100644 --- a/templates/repo/issue/labels/label_list.tmpl +++ b/templates/repo/issue/labels/label_list.tmpl @@ -30,11 +30,11 @@ {{range .Labels}}
  • -
    +
    {{RenderLabel $.Context .}} {{if .Description}}
    {{.Description | RenderEmoji $.Context}}{{end}}
    -
    +
    {{if $.PageIsOrgSettingsLabels}} {{svg "octicon-issue-opened"}} {{$.locale.Tr "repo.issues.label_open_issues" .NumOpenIssues}} {{else}} diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl index 66448da0c582..84f23ee0bdea 100644 --- a/templates/repo/settings/collaboration.tmpl +++ b/templates/repo/settings/collaboration.tmpl @@ -13,7 +13,7 @@ {{.DisplayName}}
    -
    +
    {{svg "octicon-shield-lock"}}
    {{if eq .Collaboration.Mode 1}}{{$.locale.Tr "repo.settings.collaboration.read"}}{{else if eq .Collaboration.Mode 2}}{{$.locale.Tr "repo.settings.collaboration.write"}}{{else if eq .Collaboration.Mode 3}}{{$.locale.Tr "repo.settings.collaboration.admin"}}{{else}}{{$.locale.Tr "repo.settings.collaboration.undefined"}}{{end}}
    @@ -62,7 +62,7 @@ {{.Name}}
    -
    +
    {{svg "octicon-shield-lock"}}
    {{if eq .AccessMode 1}}{{$.locale.Tr "repo.settings.collaboration.read"}}{{else if eq .AccessMode 2}}{{$.locale.Tr "repo.settings.collaboration.write"}}{{else if eq .AccessMode 3}}{{$.locale.Tr "repo.settings.collaboration.admin"}}{{else if eq .AccessMode 4}}{{$.locale.Tr "repo.settings.collaboration.owner"}}{{else}}{{$.locale.Tr "repo.settings.collaboration.undefined"}}{{end}}
    diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl index 1a0f8f826af9..9012c1f8e2c6 100644 --- a/templates/repo/settings/deploy_keys.tmpl +++ b/templates/repo/settings/deploy_keys.tmpl @@ -60,7 +60,7 @@ {{.Fingerprint}}
    - {{$.locale.Tr "settings.add_on"}} {{DateTime "short" .CreatedUnix}} — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} {{DateTime "short" .UpdatedUnix.FormatLong .UpdatedUnix.FormatShort}}{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}} - {{$.locale.Tr "settings.can_read_info"}}{{if not .IsReadOnly}} / {{$.locale.Tr "settings.can_write_info"}} {{end}} + {{$.locale.Tr "settings.add_on"}} {{DateTime "short" .CreatedUnix}} — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} {{DateTime "short" .UpdatedUnix}}{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}} - {{$.locale.Tr "settings.can_read_info"}}{{if not .IsReadOnly}} / {{$.locale.Tr "settings.can_write_info"}} {{end}}
    diff --git a/templates/repo/settings/tags.tmpl b/templates/repo/settings/tags.tmpl index fffb97100ec4..e618c3fb03a4 100644 --- a/templates/repo/settings/tags.tmpl +++ b/templates/repo/settings/tags.tmpl @@ -11,7 +11,7 @@
    -
    +
    {{.CsrfTokenHtml}} diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl index ffb9a8f677a0..a9ca65256424 100644 --- a/templates/user/settings/applications.tmpl +++ b/templates/user/settings/applications.tmpl @@ -27,7 +27,7 @@
    - {{$.locale.Tr "settings.add_on"}} {{DateTime "short" .CreatedUnix}} — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} {{DateTime "short" .UpdatedUnix.FormatLong .UpdatedUnix.FormatShort}}{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}} + {{$.locale.Tr "settings.add_on"}} {{DateTime "short" .CreatedUnix}} — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} {{DateTime "short" .UpdatedUnix}}{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}
    diff --git a/templates/user/settings/keys_principal.tmpl b/templates/user/settings/keys_principal.tmpl index 020a56479e58..fbb35b90d6d6 100644 --- a/templates/user/settings/keys_principal.tmpl +++ b/templates/user/settings/keys_principal.tmpl @@ -25,7 +25,7 @@
    {{.Name}}
    - {{$.locale.Tr "settings.add_on"}} {{DateTime "short" .CreatedUnix}} — {{svg "octicon-info" 16}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} {{DateTime "short" .UpdatedUnix.FormatLong .UpdatedUnix.FormatShort}}{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}} + {{$.locale.Tr "settings.add_on"}} {{DateTime "short" .CreatedUnix}} — {{svg "octicon-info" 16}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} {{DateTime "short" .UpdatedUnix}}{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}
    diff --git a/templates/user/settings/keys_ssh.tmpl b/templates/user/settings/keys_ssh.tmpl index 2e46869aebcc..c365ef226da4 100644 --- a/templates/user/settings/keys_ssh.tmpl +++ b/templates/user/settings/keys_ssh.tmpl @@ -59,7 +59,7 @@ {{.Fingerprint}}
    - {{$.locale.Tr "settings.add_on"}} {{DateTime "short" .CreatedUnix}} — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} {{DateTime "short" .UpdatedUnix.FormatLong .UpdatedUnix.FormatShort}}{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}} + {{$.locale.Tr "settings.add_on"}} {{DateTime "short" .CreatedUnix}} — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} {{DateTime "short" .UpdatedUnix}}{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}
    diff --git a/templates/user/settings/repos.tmpl b/templates/user/settings/repos.tmpl index 3d9f4e5a80d5..d60f1ffcf269 100644 --- a/templates/user/settings/repos.tmpl +++ b/templates/user/settings/repos.tmpl @@ -46,7 +46,7 @@ {{$.CsrfTokenHtml}} - {{template "base/modal_actions_confirm" .}} + {{template "base/modal_actions_confirm" $}}
    {{end}} diff --git a/web_src/css/admin.css b/web_src/css/admin.css index a07a63b11ea4..c8e17dbba916 100644 --- a/web_src/css/admin.css +++ b/web_src/css/admin.css @@ -4,30 +4,6 @@ margin: 12px -1rem -1rem; } -.admin .table.segment { - padding: 0; - font-size: 13px; - overflow-x: auto; -} - -.admin .table.segment:not(.striped) thead th:last-child { - padding-right: 5px !important; -} - -.admin .table.segment th { - padding-top: 5px; - padding-bottom: 5px; -} - -.admin .table.segment:not(.select) th:first-of-type, -.admin .table.segment:not(.select) td:first-of-type { - padding-left: 15px !important; -} - -.admin .table.segment form tbody button[type="submit"] { - padding: 5px 8px; -} - .admin .settings .button.adopt, .admin .settings .button.delete { margin-top: -15px; @@ -44,7 +20,7 @@ } .admin dl.admin-dl-horizontal { - padding: 20px; + padding: 1em; margin: 0; } @@ -84,27 +60,3 @@ white-space: pre-wrap; word-wrap: break-word; } - -@media (max-width: 767px) { - .admin #notice-table .notice-description { - max-width: 80vw; - } -} - -@media (min-width: 768px) and (max-width: 991px) { - .admin #notice-table .notice-description { - max-width: 360px; - } -} - -@media (min-width: 992px) and (max-width: 1200px) { - .admin #notice-table .notice-description { - max-width: 510px; - } -} - -@media (min-width: 1201px) { - .admin #notice-table .notice-description { - max-width: 640px; - } -} diff --git a/web_src/css/base.css b/web_src/css/base.css index 33d84bc90c6a..dc7942e8a277 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1183,6 +1183,12 @@ img.ui.avatar, padding-bottom: 80px; } +/* overwrite semantic width of containers inside the main page content div (div with class "page-content") */ +.page-content .ui.ui.ui.container:not(.fluid) { + width: 1280px; + max-width: calc(100vw - 64px); +} + /* enable fluid page widths for medium size viewports */ @media (min-width: 768px) and (max-width: 1200px) { .ui.ui.ui.container:not(.fluid) { @@ -1190,6 +1196,13 @@ img.ui.avatar, } } +@media only screen and (max-width: 767px) { + .page-content .ui.ui.ui.container:not(.fluid) { + width: auto; /* copied from semantic css */ + max-width: 100%; + } +} + .following.bar { z-index: 900; left: 0; @@ -2638,10 +2651,6 @@ table th[data-sortt-desc] .svg { } .labelspage .item { - margin-top: 0; - margin-right: -14px; - margin-left: -14px; - padding: 10px; border-bottom: 1px solid var(--color-secondary); border-top: none; } diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 70ac8ff4698d..22a284d43c09 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -2,6 +2,7 @@ Gitea's tailwind-style CSS helper classes have `gt-` prefix. Gitea's private styles use `g-` prefix. */ +.gt-db { display: block !important; } .gt-df { display: flex !important; } .gt-di { display: inline !important; } .gt-dif { display: inline-flex !important; } @@ -42,6 +43,23 @@ Gitea's private styles use `g-` prefix. text-overflow: ellipsis !important; } + +.g-table-auto-ellipsis td.auto-ellipsis { + position: relative; +} + +.g-table-auto-ellipsis td.auto-ellipsis span { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + padding: inherit; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + /* below class names match Tailwind CSS */ .gt-break-all { word-break: break-all !important; } .gt-content-center { align-content: center !important; } diff --git a/web_src/css/organization.css b/web_src/css/organization.css index 42a6dcc5eac8..25d4940fe53e 100644 --- a/web_src/css/organization.css +++ b/web_src/css/organization.css @@ -40,11 +40,6 @@ } } -.organization .head .ui.header .org-visibility .label { - margin-left: 5px; - margin-top: 5px; -} - .organization .head .ui.header .ui.right { margin-top: 5px; } @@ -232,6 +227,12 @@ height: 60px; } +@media (max-width: 767px) { + .organization.teams #repo-top-segment { + height: 100px; + } +} + .org-team-navbar .active.item { background: var(--color-box-body) !important; } diff --git a/web_src/css/shared/repoorg.css b/web_src/css/shared/repoorg.css index ee9d94bafac6..7f0a805d0ff3 100644 --- a/web_src/css/shared/repoorg.css +++ b/web_src/css/shared/repoorg.css @@ -17,3 +17,9 @@ margin-top: 14px; margin-bottom: 0; } + +.repository .head .ui.header .org-visibility .label, +.organization .head .ui.header .org-visibility .label { + margin-left: 5px; + margin-top: 5px; +}