From 134e86c78c4c9f356c5853be5149778c8e61160f Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sun, 3 May 2026 00:10:52 +0800 Subject: [PATCH] Refactor "flex-list" to "flex-divided-list" (#37505) Purpose: 1. Make the whole code base have unified "item" layout 2. Clarify our "list" styles: "flex-relaxed-list", "flex-divided-list" 3. Prepare to replace legacy "ui relaxed list" * https://github.com/go-gitea/gitea/pull/37445#discussion_r3144458865 4. Prepare for refactoring the "pull merge box", it needs the "flex-divided-list" * related to "Refactor pull request view (*)" like #37451 5. Fix legacy abuses of "flex-list", e.g.: repo home sidebar --- templates/admin/badge/users.tmpl | 12 +- templates/admin/badge/view.tmpl | 12 +- templates/admin/user/view_details.tmpl | 28 ++--- templates/admin/user/view_emails.tmpl | 6 +- templates/devtest/flex-list.tmpl | 93 ++++++++------ templates/devtest/fomantic-dropdown.tmpl | 2 +- templates/explore/user_list.tmpl | 14 +-- templates/org/member/members.tmpl | 12 +- .../org/settings/options_dangerzone.tmpl | 32 ++--- templates/org/team/members.tmpl | 24 ++-- templates/org/team/repositories.tmpl | 14 +-- templates/package/settings.tmpl | 12 +- .../package/shared/cleanup_rules/list.tmpl | 22 ++-- templates/package/shared/list.tmpl | 10 +- templates/package/shared/versionlist.tmpl | 10 +- templates/repo/actions/runs_list.tmpl | 14 +-- templates/repo/header.tmpl | 31 ++--- templates/repo/home_sidebar_bottom.tmpl | 90 ++++++-------- templates/repo/home_sidebar_top.tmpl | 115 ++++++++---------- templates/repo/settings/actions_general.tmpl | 12 +- templates/repo/settings/branches.tmpl | 12 +- templates/repo/settings/collaboration.tmpl | 26 ++-- templates/repo/settings/deploy_keys.tmpl | 16 +-- templates/repo/settings/options.tmpl | 78 ++++++------ templates/shared/issuelist.tmpl | 18 +-- templates/shared/repo/list.tmpl | 18 +-- templates/shared/secrets/add_list.tmpl | 16 +-- templates/shared/user/blocked_users.tmpl | 14 +-- templates/shared/variables/variable_list.tmpl | 16 +-- templates/user/dashboard/feeds.tmpl | 16 +-- templates/user/settings/applications.tmpl | 16 +-- .../settings/applications_oauth2_list.tmpl | 16 +-- templates/user/settings/grants_oauth2.tmpl | 16 +-- templates/user/settings/keys_gpg.tmpl | 16 +-- templates/user/settings/keys_principal.tmpl | 16 +-- templates/user/settings/keys_ssh.tmpl | 22 ++-- templates/user/settings/organization.tmpl | 12 +- .../user/settings/security/accountlinks.tmpl | 14 +-- templates/user/settings/security/openid.tmpl | 14 +-- .../user/settings/security/webauthn.tmpl | 14 +-- tests/e2e/issue-project.test.ts | 2 +- tests/integration/auth_ldap_test.go | 2 +- tests/integration/issue_test.go | 2 +- tests/integration/privateactivity_test.go | 2 +- tests/integration/repo_fork_test.go | 2 +- web_src/css/actions.css | 4 +- web_src/css/base.css | 7 -- web_src/css/index.css | 1 - web_src/css/repo.css | 9 ++ web_src/css/repo/header.css | 29 ----- web_src/css/repo/home.css | 9 +- web_src/css/repo/issue-list.css | 12 +- web_src/css/shared/flex-list.css | 79 ++++++++---- .../features/repo-settings-branches.test.ts | 6 +- 54 files changed, 560 insertions(+), 557 deletions(-) delete mode 100644 web_src/css/repo/header.css diff --git a/templates/admin/badge/users.tmpl b/templates/admin/badge/users.tmpl index 97d332010f3..711110ca68a 100644 --- a/templates/admin/badge/users.tmpl +++ b/templates/admin/badge/users.tmpl @@ -13,18 +13,18 @@ {{if .Users}}
-
+
{{range .Users}} -
-
+
+
{{ctx.AvatarUtils.Avatar . 32}}
-
-
+
+
{{template "shared/user/name" .}}
-
+
{{ctx.Locale.Tr "admin.badges.remove_user"}} diff --git a/templates/admin/badge/view.tmpl b/templates/admin/badge/view.tmpl index efd31f4c411..cbe5c7b7102 100644 --- a/templates/admin/badge/view.tmpl +++ b/templates/admin/badge/view.tmpl @@ -10,18 +10,18 @@
-
-
+
+
{{if .Badge.ImageURL}} -
+
{{.Badge.Description}}
{{end}} -
-
+
+
{{.Badge.Slug}}
-
+
{{.Badge.Description}}
diff --git a/templates/admin/user/view_details.tmpl b/templates/admin/user/view_details.tmpl index db61bc93597..45fb83d1259 100644 --- a/templates/admin/user/view_details.tmpl +++ b/templates/admin/user/view_details.tmpl @@ -1,10 +1,10 @@ -
-
-
+
+
+
{{ctx.AvatarUtils.Avatar .User 48}}
-
-
+
+
{{template "shared/user/name" .User}} {{if .User.IsAdmin}} {{ctx.Locale.Tr "admin.users.admin"}} @@ -13,34 +13,34 @@ {{ctx.Locale.Tr "admin.users.bot"}} {{end}}
-
+
{{ctx.Locale.Tr "admin.users.auth_source"}}: {{Iif (eq .LoginSource.ID 0) (ctx.Locale.Tr "admin.users.local") .LoginSource.Name}}
-
+
{{ctx.Locale.Tr "admin.users.activated"}}: {{svg (Iif .User.IsActive "octicon-check" "octicon-x")}}
-
+
{{ctx.Locale.Tr "admin.users.prohibit_login"}}: {{svg (Iif .User.ProhibitLogin "octicon-check" "octicon-x")}}
-
+
{{ctx.Locale.Tr "admin.users.restricted"}}: {{svg (Iif .User.IsRestricted "octicon-check" "octicon-x")}}
-
+
{{ctx.Locale.Tr "settings.visibility"}}: {{if .User.Visibility.IsPublic}}{{ctx.Locale.Tr "settings.visibility.public"}}{{end}} {{if .User.Visibility.IsLimited}}{{ctx.Locale.Tr "settings.visibility.limited"}}{{end}} {{if .User.Visibility.IsPrivate}}{{ctx.Locale.Tr "settings.visibility.private"}}{{end}}
-
+
{{ctx.Locale.Tr "admin.users.2fa"}}: {{svg (Iif .TwoFactorEnabled "octicon-check" "octicon-x")}}
{{if .User.Language}} -
+
{{ctx.Locale.Tr "settings.language"}}: {{range .AllLangs}}{{if eq $.User.Language .Lang}}{{.Name}}{{end}}{{end}} @@ -48,12 +48,12 @@
{{end}} {{if .User.Location}} -
+
{{svg "octicon-location"}}{{.User.Location}}
{{end}} {{if .User.Website}} -
+
{{svg "octicon-link"}} {{.User.Website}} diff --git a/templates/admin/user/view_emails.tmpl b/templates/admin/user/view_emails.tmpl index 7e77206f1c7..29f059e05fb 100644 --- a/templates/admin/user/view_emails.tmpl +++ b/templates/admin/user/view_emails.tmpl @@ -1,7 +1,7 @@ -
+
{{range .Emails}} -
-
+
+
{{.Email}} {{if .IsPrimary}} diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl index c0863ba4f0c..de59473a703 100644 --- a/templates/devtest/flex-list.tmpl +++ b/templates/devtest/flex-list.tmpl @@ -1,28 +1,28 @@ {{template "devtest/devtest-header"}}
-

Flex List (standalone)

+

Flex List (standalone)

-
-
-
+
+
+
{{svg "octicon-info" 32}}
-
-
+
+
Flex Item with label
-
+
consists of leading/main/trailing part
-
+
main part contains title and (multiple) body lines
-
+
@@ -35,42 +35,42 @@
-
-
+
+
{{svg "octicon-info" 32}}
-
-
+
+
Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title
-
+
consists of leading/main/trailing part
-
+
Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content Truncate very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
-
+
-
-
+
+
{{svg "octicon-repo" 32}}
-
-
-
+
+
+
gitea-org / gitea {{svg "octicon-repo-forked"}}
-
+
Go @@ -78,7 +78,7 @@ {{svg "octicon-git-branch" 16}}1234
-
+
when inside header, the trailing part will wrap below the title
@@ -87,27 +87,48 @@
-

Flex List (with "ui segment")

+

Flex List (with "ui segment")

-
-
item 1
-
item 2
+
+
item 1
+
item 2
-

Flex List (with "ui segment")

-
-
item 1
-
item 2
+

segment header

+
+
item 1
+
item 2
+
+
+

Flex List (with "ui segment fitted")

+
+
+
item 1
+
item 2
-

If parent provides the padding/margin space:

-
-
-
item 1 (no padding top)
-
item 2 (no padding bottom)
+

If parent provides border or padding:

+
+
before divider
+
+
+
item 1
+
item 2
+
+
after divider
+
+
+
before divider
+
+
+
item 1
+
item 2
+
+
+
after divider
diff --git a/templates/devtest/fomantic-dropdown.tmpl b/templates/devtest/fomantic-dropdown.tmpl index a10dc890cef..8fea2307689 100644 --- a/templates/devtest/fomantic-dropdown.tmpl +++ b/templates/devtest/fomantic-dropdown.tmpl @@ -4,7 +4,7 @@

Dropdown

- search-input & flex-item in menu + search-input & flexed items in menu {{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-search"}}
diff --git a/templates/explore/user_list.tmpl b/templates/explore/user_list.tmpl index 4128a489aa2..e9248bd5495 100644 --- a/templates/explore/user_list.tmpl +++ b/templates/explore/user_list.tmpl @@ -1,17 +1,17 @@ -
+
{{range .Users}} -
-
+
+
{{ctx.AvatarUtils.Avatar . 48}}
-
-
+
+
{{template "shared/user/name" .}} {{if .Visibility.IsPrivate}} {{ctx.Locale.Tr "repo.desc.private"}} {{end}}
-
+
{{if .Location}} {{svg "octicon-location"}}{{.Location}} {{end}} @@ -26,7 +26,7 @@
{{else}} -
+
{{ctx.Locale.Tr "search.no_results"}}
{{end}} diff --git a/templates/org/member/members.tmpl b/templates/org/member/members.tmpl index 1cb50f785b3..b8e88b837d5 100644 --- a/templates/org/member/members.tmpl +++ b/templates/org/member/members.tmpl @@ -11,15 +11,15 @@
{{end}} -
+
{{range .Members}} {{$isPublic := index $.MembersIsPublicMember .ID}} -
-
+
+
{{ctx.AvatarUtils.Avatar . 48}}
-
-
+
+
{{template "shared/user/name" .}} {{if not $isPublic}} {{ctx.Locale.Tr "org.members.private"}} @@ -44,7 +44,7 @@ {{end}}
-
+
{{if or (eq $.SignedUser.ID .ID) $.IsOrganizationOwner}} {{if $isPublic}} {{svg "octicon-eye-closed" 12 "icon"}}{{ctx.Locale.Tr "org.members.public_helper"}} diff --git a/templates/org/settings/options_dangerzone.tmpl b/templates/org/settings/options_dangerzone.tmpl index df513c5525f..ed9cb4e4622 100644 --- a/templates/org/settings/options_dangerzone.tmpl +++ b/templates/org/settings/options_dangerzone.tmpl @@ -2,33 +2,33 @@ {{ctx.Locale.Tr "repo.settings.danger_zone"}}
-
-
-
-
{{ctx.Locale.Tr "org.settings.visibility"}}
-
{{ctx.Locale.Tr "org.settings.visibility_desc"}}
+
+
+
+
{{ctx.Locale.Tr "org.settings.visibility"}}
+
{{ctx.Locale.Tr "org.settings.visibility_desc"}}
-
+
-
-
-
{{ctx.Locale.Tr "org.settings.rename"}}
-
{{ctx.Locale.Tr "org.settings.rename_desc"}}
+
+
+
{{ctx.Locale.Tr "org.settings.rename"}}
+
{{ctx.Locale.Tr "org.settings.rename_desc"}}
-
+
-
-
-
{{ctx.Locale.Tr "org.settings.delete_account"}}
-
{{ctx.Locale.Tr "org.settings.delete_prompt"}}
+
+
+
{{ctx.Locale.Tr "org.settings.delete_account"}}
+
{{ctx.Locale.Tr "org.settings.delete_prompt"}}
-
+
diff --git a/templates/org/team/members.tmpl b/templates/org/team/members.tmpl index d2dd9d9ab93..ac4039e5965 100644 --- a/templates/org/team/members.tmpl +++ b/templates/org/team/members.tmpl @@ -21,18 +21,18 @@
{{end}}
-
- {{range .Team.Members}} -
-
+
+ {{range .Team.Members}} +
+
{{ctx.AvatarUtils.Avatar . 32}}
-
-
+
+
{{template "shared/user/name" .}}
-
+
{{if and $.IsOrganizationOwner (not (and ($.Team.IsOwnerTeam) (eq (len $.Team.Members) 1)))}}
{{else}} -
+
{{ctx.Locale.Tr "org.teams.members.none"}}
{{end}} @@ -53,13 +53,13 @@ {{if and .Invites $.IsOrganizationOwner}}

{{ctx.Locale.Tr "org.teams.invite_team_member.list"}}

-
+
{{range .Invites}} -
-
+
+
{{.Email}}
-
+
diff --git a/templates/org/team/repositories.tmpl b/templates/org/team/repositories.tmpl index 8e0a2885d76..54d0a3ea700 100644 --- a/templates/org/team/repositories.tmpl +++ b/templates/org/team/repositories.tmpl @@ -31,18 +31,18 @@
{{ctx.Locale.Tr "org.teams.all_repositories"}}
{{end}}
-
+
{{range $.TeamRepos}} -
-
+
+
{{template "repo/icon" .}}
-
- +
+ {{$.Org.Name}}/{{.Name}}
-
+
{{if $canAddRemove}} @@ -51,7 +51,7 @@
{{else}} -
+
{{ctx.Locale.Tr "org.teams.repos.none"}}
{{end}} diff --git a/templates/package/settings.tmpl b/templates/package/settings.tmpl index f9f8b7476a8..d4241e65410 100644 --- a/templates/package/settings.tmpl +++ b/templates/package/settings.tmpl @@ -30,13 +30,13 @@ {{ctx.Locale.Tr "repo.settings.danger_zone"}}
-
-
-
-
{{ctx.Locale.Tr "packages.settings.delete"}}
-
{{ctx.Locale.Tr "packages.settings.delete.description"}}
+
+
+
+
{{ctx.Locale.Tr "packages.settings.delete"}}
+
{{ctx.Locale.Tr "packages.settings.delete.description"}}
-
+
-
+
{{range .CleanupRules}} -
-
+
+
{{svg .Type.SVGName 32}}
-
-
+
+
{{.Type.Name}}
-
+
{{if .Enabled}}{{ctx.Locale.Tr "enabled"}}{{else}}{{ctx.Locale.Tr "disabled"}}{{end}}
{{if .KeepCount}} -
+
{{ctx.Locale.Tr "packages.owner.settings.cleanuprules.keep.count"}}: {{if eq .KeepCount 1}}{{ctx.Locale.Tr "packages.owner.settings.cleanuprules.keep.count.1"}}{{else}}{{ctx.Locale.Tr "packages.owner.settings.cleanuprules.keep.count.n" .KeepCount}}{{end}}
{{end}} {{if .KeepPattern}} -
+
{{ctx.Locale.Tr "packages.owner.settings.cleanuprules.keep.pattern"}}: {{StringUtils.EllipsisString .KeepPattern 100}}
{{end}} {{if .RemoveDays}} -
+
{{ctx.Locale.Tr "packages.owner.settings.cleanuprules.remove.days"}}: {{ctx.Locale.Tr "tool.days" .RemoveDays}}
{{end}} {{if .RemovePattern}} -
+
{{ctx.Locale.Tr "packages.owner.settings.cleanuprules.remove.pattern"}}: {{StringUtils.EllipsisString .RemovePattern 100}}
{{end}}
-
+
{{svg "octicon-kebab-horizontal"}}
diff --git a/templates/package/shared/list.tmpl b/templates/package/shared/list.tmpl index e4ecbd06c4e..54e2a2c20ec 100644 --- a/templates/package/shared/list.tmpl +++ b/templates/package/shared/list.tmpl @@ -16,14 +16,14 @@ {{end}}
{{range .PackageDescriptors}} -
-
-
-
+
+
+
+
{{.Package.Name}} {{svg .Package.Type.SVGName 16}} {{.Package.Type.Name}}
-
+
{{$timeStr := DateUtils.TimeSince .Version.CreatedUnix}} {{$hasRepositoryAccess := false}} {{if .Repository}} diff --git a/templates/package/shared/versionlist.tmpl b/templates/package/shared/versionlist.tmpl index 7a1059e262c..3ef9e790f17 100644 --- a/templates/package/shared/versionlist.tmpl +++ b/templates/package/shared/versionlist.tmpl @@ -20,11 +20,11 @@
{{range .PackageDescriptors}} -
-
-
- {{.Version.LowerVersion}} -
+
+
+
+ {{.Version.LowerVersion}} +
{{ctx.Locale.Tr "packages.published_by" (DateUtils.TimeSince .Version.CreatedUnix) .Creator.HomeLink .Creator.GetDisplayName}}
diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl index 0f35fa014e5..f60d480f8af 100644 --- a/templates/repo/actions/runs_list.tmpl +++ b/templates/repo/actions/runs_list.tmpl @@ -1,4 +1,4 @@ -
+
{{if not .Runs}}
{{svg "octicon-no-entry" 48}} @@ -6,19 +6,19 @@
{{end}} {{range $run := .Runs}} -
-
+
+
{{template "repo/actions/status" (dict "status" $run.Status.String)}}
-
- +
+ {{if $run.Title}} {{ctx.RenderUtils.RenderCommitMessageLinkSubject $run.Title $run.Link $.Repository}} {{else}} {{ctx.Locale.Tr "actions.runs.empty_commit_message"}} {{end}} -
+
{{if not $.CurWorkflow}}{{$run.WorkflowID}} {{end}}#{{$run.Index}}: {{- if $run.ScheduleID -}} @@ -38,7 +38,7 @@ {{end}}
-
+
{{if $run.IsRefDeleted}} {{$run.PrettyRef}} {{else}} diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 9fbe6a9a114..c522bf38655 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -1,17 +1,14 @@
-{{with .Repository}} + {{with .Repository}}
-
-
-
- {{template "repo/icon" .}} +
+ {{/* left part */}} +
+ {{template "repo/icon" .}} +
+ {{.Owner.Name}}/{{.Name}}
-
-
- {{.Owner.Name}}/{{.Name}} -
-
-
+
{{if .IsArchived}} {{ctx.Locale.Tr "repo.desc.archived"}}
{{svg "octicon-archive" 18}}
@@ -38,6 +35,7 @@
{{if not (or .IsBeingCreated .IsBroken)}} + {{/* right part */}}
{{if $.CanUserAcceptOrRejectTransfer}}
+ + {{/* next line, secondary info */}} {{if $.PullMirror}} -
+
{{ctx.Locale.Tr "repo.mirror_from"}} {{$.PullMirror.RemoteAddress}} {{if $.PullMirror.UpdatedUnix}}{{ctx.Locale.Tr "repo.mirror_sync"}} {{DateUtils.TimeSince $.PullMirror.UpdatedUnix}}{{end}}
{{end}} - {{if .IsFork}}
{{ctx.Locale.Tr "repo.forked_from"}} {{.BaseRepo.FullName}}
{{end}} - {{if .IsGenerated}}
{{ctx.Locale.Tr "repo.generated_from"}} {{(.TemplateRepo ctx).FullName}}
{{end}} + {{if .IsFork}}
{{ctx.Locale.Tr "repo.forked_from"}} {{.BaseRepo.FullName}}
{{end}} + {{if .IsGenerated}}
{{ctx.Locale.Tr "repo.generated_from"}} {{(.TemplateRepo ctx).FullName}}
{{end}}
-{{end}} + {{end}} +
{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}} diff --git a/templates/repo/home_sidebar_bottom.tmpl b/templates/repo/home_sidebar_bottom.tmpl index 4ba6aa05bf6..d91adf1dd16 100644 --- a/templates/repo/home_sidebar_bottom.tmpl +++ b/templates/repo/home_sidebar_bottom.tmpl @@ -1,61 +1,47 @@ -
-
- {{if .LatestRelease}} -
-
-
- - {{ctx.Locale.Tr "repo.releases"}} - - {{.NumReleases}} -
-
-
-
{{svg "octicon-tag" 16}}
-
-
-
-
- {{.LatestRelease.Title}} - {{template "repo/release/label" (dict "Release" .LatestRelease "IsLatest" true)}} -
-
-
- {{DateUtils.TimeSince .LatestRelease.CreatedUnix}} -
-
+
+ {{if .LatestRelease}} +
+
+ + {{ctx.Locale.Tr "repo.releases"}} + + {{.NumReleases}} +
+
+
+
{{svg "octicon-tag"}}
+ {{.LatestRelease.Title}} +
+ {{template "repo/release/label" (dict "Release" .LatestRelease "IsLatest" true)}}
+
{{DateUtils.TimeSince .LatestRelease.CreatedUnix}}
- {{end}} + {{end}} - {{if and (not .IsEmptyRepo) .LanguageStats}} -
-
-
- {{ctx.Locale.Tr "repo.repo_lang"}} -
+ {{if and (not .IsEmptyRepo) .LanguageStats}} +
+
+ {{ctx.Locale.Tr "repo.repo_lang"}} +
-
-
- {{range .LanguageStats}} -
- {{end}} -
-
- {{range .LanguageStats}} -
- - - {{Iif (eq .Language "other") (ctx.Locale.Tr "repo.language_other") .Language}} - - {{.Percentage}}% -
- {{end}} -
+
+
+ {{range .LanguageStats}} +
+ {{end}} +
+
+ {{range .LanguageStats}} +
+ + + {{Iif (eq .Language "other") (ctx.Locale.Tr "repo.language_other") .Language}} + + {{.Percentage}}%
+ {{end}}
- {{end}} -
+ {{end}}
diff --git a/templates/repo/home_sidebar_top.tmpl b/templates/repo/home_sidebar_top.tmpl index 1560e054d82..c28f0e83067 100644 --- a/templates/repo/home_sidebar_top.tmpl +++ b/templates/repo/home_sidebar_top.tmpl @@ -1,4 +1,4 @@ -
+
@@ -9,71 +9,64 @@
-
-
-
-
{{ctx.Locale.Tr "repo.repo_desc"}}
-
-
-
- {{- $description := .Repository.DescriptionHTML ctx -}} - {{if $description}}{{$description | RenderCodeBlock}}{{else}}{{ctx.Locale.Tr "repo.repo_no_desc"}}{{end}} -
+
+
{{ctx.Locale.Tr "repo.repo_desc"}}
- {{if .Repository.Website}} - - {{svg "octicon-link" 16 "tw-text-text"}} {{.Repository.Website}} - - {{end}} +
+ {{- $description := .Repository.DescriptionHTML ctx -}} + {{if $description}}{{$description | RenderCodeBlock}}{{else}}{{ctx.Locale.Tr "repo.repo_no_desc"}}{{end}} +
-
- {{/* !!!! it SHOULD and MUST match the code in repo-home.ts */}} - {{range .Topics}}{{.Name}}{{end}} -
- {{if and .Permission.IsAdmin (not .Repository.IsArchived)}} - -
-
- - {{range .Topics}} - {{/* keep the same layout as Fomantic UI generated labels */}} - {{.Name}}{{svg "octicon-x" 16 "delete icon"}} - {{end}} -
-
-
- - -
-
- {{end}} + {{if .Repository.Website}} + + {{svg "octicon-link" 16 "tw-text-text"}} {{.Repository.Website}} + + {{end}} - {{if .ReadmeExist}} - - {{svg "octicon-book"}} {{ctx.Locale.Tr "readme"}} - - {{end}} - - {{if .DetectedRepoLicenses}} - - {{svg "octicon-law"}} {{if eq (len .DetectedRepoLicenses) 1}}{{index .DetectedRepoLicenses 0}}{{else}}{{ctx.Locale.Tr "repo.multiple_licenses"}}{{end}} - - {{end}} - - {{if .CitiationExist}} - {{template "repo/cite/cite_modal" .}} - - {{svg "octicon-cross-reference"}} {{ctx.Locale.Tr "repo.cite_this_repo"}} - - {{end}} - - {{$fileSizeFormatted := FileSize .Repository.Size}}{{/* the formatted string is always "{val} {unit}" */}} - {{$fileSizeFields := StringUtils.Split $fileSizeFormatted " "}} - {{svg "octicon-database"}} {{ctx.Locale.PrettyNumber (index $fileSizeFields 0)}} {{index $fileSizeFields 1}} - -
+
+ {{/* !!!! it SHOULD and MUST match the code in repo-home.ts */}} + {{range .Topics}}{{.Name}}{{end}} +
+ {{if and .Permission.IsAdmin (not .Repository.IsArchived)}} + +
+
+ + {{range .Topics}} + {{/* keep the same layout as Fomantic UI generated labels */}} + {{.Name}}{{svg "octicon-x" 16 "delete icon"}} + {{end}} +
+
+
+ +
+ {{end}} + + {{if .ReadmeExist}} + + {{svg "octicon-book"}} {{ctx.Locale.Tr "readme"}} + + {{end}} + + {{if .DetectedRepoLicenses}} + + {{svg "octicon-law"}} {{if eq (len .DetectedRepoLicenses) 1}}{{index .DetectedRepoLicenses 0}}{{else}}{{ctx.Locale.Tr "repo.multiple_licenses"}}{{end}} + + {{end}} + + {{if .CitiationExist}} + {{template "repo/cite/cite_modal" .}} + + {{svg "octicon-cross-reference"}} {{ctx.Locale.Tr "repo.cite_this_repo"}} + + {{end}} +
+ {{$fileSizeFormatted := FileSize .Repository.Size}}{{/* the formatted string is always "{val} {unit}" */}} + {{$fileSizeFields := StringUtils.Split $fileSizeFormatted " "}} + {{svg "octicon-database"}} {{ctx.Locale.PrettyNumber (index $fileSizeFields 0)}} {{index $fileSizeFields 1}}
diff --git a/templates/repo/settings/actions_general.tmpl b/templates/repo/settings/actions_general.tmpl index c4f55698345..fec17bc7af3 100644 --- a/templates/repo/settings/actions_general.tmpl +++ b/templates/repo/settings/actions_general.tmpl @@ -62,18 +62,18 @@ {{if len .CollaborativeOwners}}
-
+
{{range .CollaborativeOwners}} -
-
+
+
{{ctx.AvatarUtils.Avatar . 32}}
-
-
+
+
{{template "shared/user/name" .}}
-
+
{{else}} -
+
{{ctx.Locale.Tr "repo.settings.no_protected_branch"}}
{{end}} diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl index 48c02692733..479448e6de7 100644 --- a/templates/repo/settings/collaboration.tmpl +++ b/templates/repo/settings/collaboration.tmpl @@ -5,18 +5,18 @@ {{if .Collaborators}}
-
+
{{range .Collaborators}} -
-
+
+
{{ctx.AvatarUtils.Avatar . 32}}
-
-
+
+
{{template "shared/user/name" .}}
-
+
{{svg "octicon-shield-lock"}}
@@ -54,14 +54,14 @@ {{$allowedToChangeTeams := (or (.Org.RepoAdminChangeTeamAccess) (.Permission.IsOwner))}} {{if .Teams}}
-
+
{{range $t, $team := .Teams}} -
-
- +
+
+ {{.Name}} -
+
{{/*FIXME: TEAM-UNIT-PERMISSION this display is not right, search the fixme keyword to see more details */}} {{svg "octicon-shield-lock"}} {{if eq .AccessMode 0}} @@ -80,7 +80,7 @@
{{if or (eq .AccessMode 0) (eq .AccessMode 1) (eq .AccessMode 2)}} {{$first := true}} -
+
Units: {{range $u, $unit := $.Units}} {{- if and ($.Repo.UnitEnabled ctx $unit.Type) ($team.UnitEnabled ctx $unit.Type) -}} @@ -93,7 +93,7 @@ {{end}}
{{if $allowedToChangeTeams}} -
+
diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl index 481fabe4f92..c4bffbbf08a 100644 --- a/templates/repo/settings/deploy_keys.tmpl +++ b/templates/repo/settings/deploy_keys.tmpl @@ -42,22 +42,22 @@
{{if .Deploykeys}} -
+
{{range .Deploykeys}} -
-
+
+
{{svg "octicon-key" 32}}
-
-
{{.Name}}
-
+
+
{{.Name}}
+
{{.Fingerprint}}
-
+
{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} — {{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} {{DateUtils.AbsoluteShort .UpdatedUnix}}{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}} - {{ctx.Locale.Tr "settings.can_read_info"}}{{if not .IsReadOnly}} / {{ctx.Locale.Tr "settings.can_write_info"}} {{end}}
-
+
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl index 6a18c63fd28..352469234bb 100644 --- a/templates/repo/settings/options.tmpl +++ b/templates/repo/settings/options.tmpl @@ -761,18 +761,18 @@ {{ctx.Locale.Tr "repo.settings.danger_zone"}}
-
+
{{if not .Repository.IsFork}} -
-
-
{{ctx.Locale.Tr "repo.visibility"}}
+
+
+
{{ctx.Locale.Tr "repo.visibility"}}
{{if .Repository.IsPrivate}} -
{{ctx.Locale.Tr "repo.settings.visibility.public.text"}}
+
{{ctx.Locale.Tr "repo.settings.visibility.public.text"}}
{{else}} -
{{ctx.Locale.Tr "repo.settings.visibility.private.text"}}
+
{{ctx.Locale.Tr "repo.settings.visibility.private.text"}}
{{end}}
-
+
{{end}} {{if .Repository.IsMirror}} -
-
-
{{ctx.Locale.Tr "repo.settings.convert"}}
-
{{ctx.Locale.Tr "repo.settings.convert_desc"}}
+
+
+
{{ctx.Locale.Tr "repo.settings.convert"}}
+
{{ctx.Locale.Tr "repo.settings.convert_desc"}}
-
+
{{end}} {{if .CanConvertFork}} -
-
-
{{ctx.Locale.Tr "repo.settings.convert_fork"}}
-
{{ctx.Locale.Tr "repo.settings.convert_fork_desc"}}
+
+
+
{{ctx.Locale.Tr "repo.settings.convert_fork"}}
+
{{ctx.Locale.Tr "repo.settings.convert_fork_desc"}}
-
+
{{end}} -
-
-
{{ctx.Locale.Tr "repo.settings.transfer"}}
-
+
+
+
{{ctx.Locale.Tr "repo.settings.transfer"}}
+
{{if .RepoTransfer}} {{ctx.Locale.Tr "repo.settings.transfer_started" .RepoTransfer.Recipient.DisplayName}} {{else}} @@ -816,7 +816,7 @@ {{end}}
-
+
{{if .RepoTransfer}}
@@ -828,37 +828,37 @@
{{if .Permission.CanRead ctx.Consts.RepoUnitTypeWiki}} -
-
-
{{ctx.Locale.Tr "repo.settings.wiki_delete"}}
-
{{ctx.Locale.Tr "repo.settings.wiki_delete_desc"}}
+
+
+
{{ctx.Locale.Tr "repo.settings.wiki_delete"}}
+
{{ctx.Locale.Tr "repo.settings.wiki_delete_desc"}}
-
+
{{end}} -
-
-
{{ctx.Locale.Tr "repo.settings.delete"}}
-
{{ctx.Locale.Tr "repo.settings.delete_desc"}}
+
+
+
{{ctx.Locale.Tr "repo.settings.delete"}}
+
{{ctx.Locale.Tr "repo.settings.delete_desc"}}
-
+
{{if not .Repository.IsMirror}} -
-
+
+
{{if .Repository.IsArchived}} -
{{ctx.Locale.Tr "repo.settings.unarchive.header"}}
-
{{ctx.Locale.Tr "repo.settings.unarchive.text"}}
+
{{ctx.Locale.Tr "repo.settings.unarchive.header"}}
+
{{ctx.Locale.Tr "repo.settings.unarchive.text"}}
{{else}} -
{{ctx.Locale.Tr "repo.settings.archive.header"}}
-
{{ctx.Locale.Tr "repo.settings.archive.text"}}
+
{{ctx.Locale.Tr "repo.settings.archive.header"}}
+
{{ctx.Locale.Tr "repo.settings.archive.text"}}
{{end}}
-
+
diff --git a/templates/shared/variables/variable_list.tmpl b/templates/shared/variables/variable_list.tmpl index e3a0b3972a9..257738802ed 100644 --- a/templates/shared/variables/variable_list.tmpl +++ b/templates/shared/variables/variable_list.tmpl @@ -15,24 +15,24 @@
{{if .Variables}} -
+
{{range .Variables}} -
-
+
+
{{svg "octicon-pencil" 32}}
-
-
+
+
{{.Name}}
-
+
{{if .Description}}{{.Description}}{{else}}-{{end}}
-
+
{{.Data}}
-
+
{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl index 99f7f91bfdb..03f03b176da 100644 --- a/templates/user/dashboard/feeds.tmpl +++ b/templates/user/dashboard/feeds.tmpl @@ -1,10 +1,10 @@ -
+
{{range .Feeds}} -
-
+
+
{{ctx.AvatarUtils.AvatarByAction .}}
-
+
{{if gt .ActUser.ID 0}} {{.GetActDisplayName ctx}} @@ -113,15 +113,15 @@
{{ctx.RenderUtils.MarkdownToHtml $comment}}
{{end}} {{else if .GetOpType.InActions "merge_pull_request"}} -
{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}
+
{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}
{{else if .GetOpType.InActions "close_issue" "reopen_issue" "close_pull_request" "reopen_pull_request"}} {{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}} {{else if .GetOpType.InActions "pull_review_dismissed"}} -
{{ctx.Locale.Tr "action.review_dismissed_reason"}}
-
{{index .GetIssueInfos 2 | ctx.RenderUtils.RenderEmoji}}
+
{{ctx.Locale.Tr "action.review_dismissed_reason"}}
+
{{index .GetIssueInfos 2 | ctx.RenderUtils.RenderEmoji}}
{{end}}
-
+
{{svg (printf "octicon-%s" (ActionIcon .GetOpType)) 32 "tw-text-text-light tw-mr-1"}}
diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl index c02645dc764..4f1c1bbd82e 100644 --- a/templates/user/settings/applications.tmpl +++ b/templates/user/settings/applications.tmpl @@ -4,20 +4,20 @@ {{ctx.Locale.Tr "settings.manage_access_token"}}
-
-
+
+
{{ctx.Locale.Tr "settings.tokens_desc"}}
{{range .Tokens}} -
-
+
+
{{svg "fontawesome-send" 32}}
-
+
- {{.Name}} + {{.Name}}

{{ctx.Locale.Tr "settings.repo_and_org_access"}}: {{if .DisplayPublicOnly}} @@ -35,11 +35,11 @@ {{end}}

-
+
{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} — {{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} {{DateUtils.AbsoluteShort .UpdatedUnix}}{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}
-
+
-
-
+
+

{{ctx.Locale.Tr "settings.gpg_desc"}}
{{ctx.Locale.Tr "settings.gpg_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/about-commit-signature-verification#gpg-commit-signature-verification"}}

{{range .GPGKeys}} -
-
+
+
{{svg "octicon-key" 32}}
-
+
{{if .Verified}} {{svg "octicon-verified"}} {{ctx.Locale.Tr "settings.gpg_key_verified"}} {{end}} {{if .Emails}} {{svg "octicon-mail"}} {{ctx.Locale.Tr "settings.gpg_key_matched_identities"}} {{range .Emails}}{{.Email}} {{end}} {{end}} -
+
{{ctx.Locale.Tr "settings.key_id"}}: {{.PaddedKeyID}} {{ctx.Locale.Tr "settings.subkeys"}}: {{range .SubsKey}} {{.PaddedKeyID}} {{end}}
-
+
{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .AddedUnix)}} - {{if not .ExpiredUnix.IsZero}}{{ctx.Locale.Tr "settings.valid_until_date" (DateUtils.AbsoluteShort .ExpiredUnix)}}{{else}}{{ctx.Locale.Tr "settings.valid_forever"}}{{end}}
-
+
diff --git a/templates/user/settings/keys_principal.tmpl b/templates/user/settings/keys_principal.tmpl index 2d06275c91c..162f1f43d80 100644 --- a/templates/user/settings/keys_principal.tmpl +++ b/templates/user/settings/keys_principal.tmpl @@ -10,22 +10,22 @@
-
-
+
+
{{ctx.Locale.Tr "settings.principal_desc"}}
{{range .Principals}} -
-
+
+
{{svg "octicon-key" 32}}
-
-
{{.Name}}
-
+
+
{{.Name}}
+
{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} — {{svg "octicon-info" 16}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} {{DateUtils.AbsoluteShort .UpdatedUnix}}{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}
-
+
diff --git a/templates/user/settings/keys_ssh.tmpl b/templates/user/settings/keys_ssh.tmpl index 9a32db0ee2f..15dc5bb7a99 100644 --- a/templates/user/settings/keys_ssh.tmpl +++ b/templates/user/settings/keys_ssh.tmpl @@ -26,36 +26,36 @@
-
-
+
+

{{ctx.Locale.Tr "settings.ssh_desc"}}
{{ctx.Locale.Tr "settings.ssh_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/connecting-to-github-with-ssh" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/troubleshooting-ssh"}}

{{if .DisableSSH}} -
+
{{ctx.Locale.Tr "settings.ssh_signonly"}}
{{end}} {{range $index, $key := .Keys}} -
-
+
+
{{svg "octicon-key" 32}}
-
+
{{if .Verified}} -
{{svg "octicon-verified"}}{{ctx.Locale.Tr "settings.ssh_key_verified"}}
+
{{svg "octicon-verified"}}{{ctx.Locale.Tr "settings.ssh_key_verified"}}
{{end}} -
{{.Name}}
-
+
{{.Name}}
+
{{.Fingerprint}}
-
+
{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} — {{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} {{DateUtils.AbsoluteShort .UpdatedUnix}}{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}
-
+
diff --git a/templates/user/settings/organization.tmpl b/templates/user/settings/organization.tmpl index 0dd89b2fd71..0b1873bda0f 100644 --- a/templates/user/settings/organization.tmpl +++ b/templates/user/settings/organization.tmpl @@ -10,19 +10,19 @@
{{if .Orgs}} -
+
{{range .Orgs}} -
-
+
+
{{ctx.AvatarUtils.Avatar . 28 "mini"}}
-
-
{{template "shared/user/name" .}}
+
+
{{template "shared/user/name" .}}
{{.Description}}
-
+
diff --git a/templates/user/settings/security/openid.tmpl b/templates/user/settings/security/openid.tmpl index 3e7a478bf4a..6ae7d0e0d6e 100644 --- a/templates/user/settings/security/openid.tmpl +++ b/templates/user/settings/security/openid.tmpl @@ -2,19 +2,19 @@ {{ctx.Locale.Tr "settings.manage_openid"}}
-
-
+
+
{{ctx.Locale.Tr "settings.openid_desc"}}
{{range .OpenIDs}} -
-
+
+
{{svg "fontawesome-openid" 20}}
-
-
{{.URI}}
+
+
{{.URI}}
-
+
{{if .Show}} diff --git a/templates/user/settings/security/webauthn.tmpl b/templates/user/settings/security/webauthn.tmpl index 149b7eb5cc2..82653086b06 100644 --- a/templates/user/settings/security/webauthn.tmpl +++ b/templates/user/settings/security/webauthn.tmpl @@ -3,19 +3,19 @@

{{ctx.Locale.Tr "settings.webauthn_desc" "https://w3c.github.io/webauthn/#webauthn-authenticator"}}

{{ctx.Locale.Tr "settings.webauthn_key_loss_warning"}} {{ctx.Locale.Tr "settings.webauthn_alternative_tip"}}

{{template "user/auth/webauthn_error" .}} -
+
{{range .WebAuthnCredentials}} -
-
+
+
{{svg "octicon-key" 32}}
-
-
{{.Name}}
-
+
+
{{.Name}}
+
{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}}
-
+
diff --git a/tests/e2e/issue-project.test.ts b/tests/e2e/issue-project.test.ts index 40edf7420fe..b1fed72a6f9 100644 --- a/tests/e2e/issue-project.test.ts +++ b/tests/e2e/issue-project.test.ts @@ -335,7 +335,7 @@ test('filter issues with no project using project=-1', async ({page}) => { await expect(page.locator('#issue-list')).not.toContainText('Issue with project assigned'); // Verify the last item in the list is NOT the issue with a project - const issueItems = page.locator('#issue-list .flex-item'); + const issueItems = page.locator('#issue-list .item'); const lastIssueItem = issueItems.last(); await expect(lastIssueItem).not.toContainText('Issue with project assigned'); } finally { diff --git a/tests/integration/auth_ldap_test.go b/tests/integration/auth_ldap_test.go index ab4d120b9cb..43d593f16a3 100644 --- a/tests/integration/auth_ldap_test.go +++ b/tests/integration/auth_ldap_test.go @@ -395,7 +395,7 @@ func testLDAPUserSyncSSHKeys(t *testing.T) { resp := session.MakeRequest(t, req, http.StatusOK) htmlDoc := NewHTMLParser(t, resp.Body) - divs := htmlDoc.doc.Find("#keys-ssh .flex-item .flex-item-body:not(:last-child)") + divs := htmlDoc.doc.Find("#keys-ssh .item .item-body:not(:last-child)") syncedKeys := make([]string, divs.Length()) for i := 0; i < divs.Length(); i++ { syncedKeys[i] = strings.TrimSpace(divs.Eq(i).Text()) diff --git a/tests/integration/issue_test.go b/tests/integration/issue_test.go index 7733e75d5e7..29a1d665af5 100644 --- a/tests/integration/issue_test.go +++ b/tests/integration/issue_test.go @@ -34,7 +34,7 @@ import ( func getIssuesSelection(t testing.TB, htmlDoc *HTMLDoc) *goquery.Selection { issueList := htmlDoc.doc.Find("#issue-list") assert.Equal(t, 1, issueList.Length()) - return issueList.Find(".flex-item").Find(".issue-title") + return issueList.Find(".item").Find(".issue-title") } func getIssue(t *testing.T, repoID int64, issueSelection *goquery.Selection) *issues_model.Issue { diff --git a/tests/integration/privateactivity_test.go b/tests/integration/privateactivity_test.go index 5315042b090..4db483a0748 100644 --- a/tests/integration/privateactivity_test.go +++ b/tests/integration/privateactivity_test.go @@ -57,7 +57,7 @@ func testPrivateActivityHelperEnablePrivateActivity(t *testing.T) { } func testPrivateActivityHelperHasVisibleActivitiesInHTMLDoc(htmlDoc *HTMLDoc) bool { - return htmlDoc.doc.Find("#activity-feed").Find(".flex-item").Length() > 0 + return htmlDoc.doc.Find("#activity-feed").Find(".item").Length() > 0 } func testPrivateActivityHelperHasVisibleActivitiesFromSession(t *testing.T, session *TestSession) bool { diff --git a/tests/integration/repo_fork_test.go b/tests/integration/repo_fork_test.go index bf3ef2571e1..fd6a0eac7ac 100644 --- a/tests/integration/repo_fork_test.go +++ b/tests/integration/repo_fork_test.go @@ -82,7 +82,7 @@ func TestRepoForkToOrg(t *testing.T) { func TestForkListLimitedAndPrivateRepos(t *testing.T) { defer tests.PrepareTestEnv(t)() - forkItemSelector := ".fork-list .flex-item" + forkItemSelector := ".fork-list .item" user1Sess := loginUser(t, "user1") user1 := unittest.AssertExistsAndLoadBean(t, &user_model.User{Name: "user1"}) diff --git a/web_src/css/actions.css b/web_src/css/actions.css index 14cf65f273d..25bb2f68f82 100644 --- a/web_src/css/actions.css +++ b/web_src/css/actions.css @@ -43,7 +43,7 @@ align-items: center; } -.run-list .flex-item-trailing { +.run-list .item-trailing { flex-wrap: nowrap; width: 280px; flex: 0 0 280px; @@ -55,7 +55,7 @@ } @media (max-width: 767.98px) { - .run-list .flex-item-trailing { + .run-list .item-trailing { flex-direction: column; align-items: flex-end; width: auto; diff --git a/web_src/css/base.css b/web_src/css/base.css index e309d85fbfb..6724fced7b3 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -872,13 +872,6 @@ table th[data-sortt-desc] .svg { align-items: stretch; } -/* can be used to replace "ui relaxed list" or "tw-flex tw-flex-col tw-gap-xxx" when we need more flexible layout */ -.flex-relaxed-list { - display: flex; - flex-direction: column; - gap: var(--gap-block); -} - /* this is useful to make a left-right (e.g.: title .... operations) layout with default gap, and it wrap for small widths */ .flex-left-right { display: flex; diff --git a/web_src/css/index.css b/web_src/css/index.css index d7f57e324b0..06f7101af95 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -67,7 +67,6 @@ @import "./repo/list-header.css"; @import "./repo/file-view.css"; @import "./repo/wiki.css"; -@import "./repo/header.css"; @import "./repo/home.css"; @import "./repo/home-file-list.css"; @import "./repo/reactions.css"; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index f5e4b80ad32..26ef377e623 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1,3 +1,12 @@ +.repo-header { + margin: 1em 0 0.5em; +} + +.repo-header .secondary-info { + margin-top: 0.5rem; + font-size: 12px; +} + .repository .data-table .line-num, .repository .diff-file-box .file-body.file-code .lines-num, .repository .diff-file-box .code-diff tbody tr .lines-type-marker { diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css deleted file mode 100644 index 910648ea325..00000000000 --- a/web_src/css/repo/header.css +++ /dev/null @@ -1,29 +0,0 @@ -.repository .secondary-nav { - padding-top: 12px; -} - -.repository .secondary-nav .fork-flag { - margin-top: 0.5rem; - font-size: 12px; -} - -.repo-header { - display: flex; - flex-flow: row wrap; - justify-content: space-between; - gap: 0.5rem; - margin-bottom: 4px; -} - -.repo-header .flex-item { - padding: 0; -} - -.repo-header .flex-item-main { - flex: 0; - flex-basis: unset; -} - -.repo-header .flex-item-trailing { - flex-wrap: nowrap; -} diff --git a/web_src/css/repo/home.css b/web_src/css/repo/home.css index 60bf1f17f94..b34fde2b460 100644 --- a/web_src/css/repo/home.css +++ b/web_src/css/repo/home.css @@ -21,8 +21,10 @@ grid-row: 2; } -.repo-home-sidebar-bottom .flex-list > :first-child { - border-top: 1px solid var(--color-secondary); /* same to .flex-list > .flex-item + .flex-item */ +.repo-home-sidebar-header { + font-weight: var(--font-weight-semibold); + font-size: 16px; + margin-top: 0.5em; } @media (max-width: 767.98px) { @@ -87,8 +89,7 @@ border-radius: 5px; overflow: hidden; width: 100%; - margin-top: 1rem; - margin-bottom: 5px; + margin: 5px 0; } .language-stats-details { diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css index 33888101b6d..1248984bd2b 100644 --- a/web_src/css/repo/issue-list.css +++ b/web_src/css/repo/issue-list.css @@ -34,17 +34,17 @@ } } -#issue-list .flex-item-body .branches { +#issue-list .branches { display: inline-flex; } -#issue-list .flex-item-body .branches .branch { +#issue-list .branches .branch { background-color: var(--color-secondary-alpha-50); border-radius: var(--border-radius); padding: 0 4px; } -#issue-list .flex-item-body .branches .truncated-name { +#issue-list .branches .truncated-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -53,18 +53,18 @@ vertical-align: top; } -#issue-list .flex-item-body .checklist progress { +#issue-list .checklist progress { margin-left: 2px; width: 80px; height: 6px; display: inline-block; } -#issue-list .flex-item-body .checklist progress::-webkit-progress-value { +#issue-list .checklist progress::-webkit-progress-value { background-color: var(--color-secondary-dark-4); } -#issue-list .flex-item-body .checklist progress::-moz-progress-bar { +#issue-list .checklist progress::-moz-progress-bar { background-color: var(--color-secondary-dark-4); } diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css index e94e9e9cc26..93a3a1b3f90 100644 --- a/web_src/css/shared/flex-list.css +++ b/web_src/css/shared/flex-list.css @@ -1,40 +1,61 @@ -.flex-list { - list-style: none; +/* can be used to replace "ui relaxed list" or "tw-flex tw-flex-col tw-gap-xxx" when we need more flexible layout */ +.flex-relaxed-list { + display: flex; + flex-direction: column; + gap: var(--gap-block); } -.flex-item { +.flex-relaxed-list > .divider { + margin: 0; +} + +/* items have dividers between them, the dividers align with items (use parent padding) */ +.flex-divided-list { + list-style: none; display: flex; - gap: 8px; - align-items: flex-start; + flex-direction: column; +} + +.flex-divided-list > .item { padding: 10px 0; } -.flex-item .flex-item-leading { +.flex-divided-list > .item + .item { + border-top: 1px solid var(--color-secondary); +} + +.items-with-main > .item { + display: flex; + gap: 8px; + align-items: flex-start; +} + +.items-with-main > .item .item-leading { display: flex; align-items: flex-start; } -.flex-item .flex-item-main { +.items-with-main > .item .item-main { display: flex; flex-direction: column; gap: 0.25em; flex-grow: 1; - flex-basis: 60%; /* avoid wrapping the "flex-item-trailing" too aggressively */ + flex-basis: 60%; /* avoid wrapping the "item-trailing" too aggressively */ min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */ } -.flex-item-header { +.items-with-main > .item .item-header { display: flex; gap: .25rem; justify-content: space-between; flex-wrap: wrap; } -.flex-item a:not(.label, .button):hover { +.items-with-main > .item a:not(.label, .button):hover { color: var(--color-primary) !important; } -.flex-item .flex-item-trailing { +.items-with-main > .item .item-trailing { display: flex; gap: 0.5rem; align-items: center; @@ -43,7 +64,7 @@ justify-content: end; } -.flex-item .flex-item-title { +.items-with-main > .item .item-title { display: inline-flex; flex-wrap: wrap; align-items: center; @@ -58,12 +79,12 @@ min-width: 0; } -.flex-item .flex-item-title a { +.items-with-main > .item .item-title a { color: var(--color-text); overflow-wrap: anywhere; } -.flex-item .flex-item-body { +.items-with-main > .item .item-body { display: flex; align-items: center; flex-wrap: wrap; @@ -72,32 +93,40 @@ overflow-wrap: anywhere; } -.flex-item .flex-item-body a { +.items-with-main > .item .item-body a { color: inherit; overflow-wrap: anywhere; } -.flex-list > .flex-item + .flex-item { - border-top: 1px solid var(--color-secondary); +/* special rules to make the list work with existing UI elements */ +.container-segmented > .flex-divided-list > .item { + padding-left: 1em; + padding-right: 1em; } -/* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly (there might also be some `tw-hidden` siblings). -Developers could also use "flex-space-fitted" class to remove the first item's padding-top and the last item's padding-bottom */ -.flex-list.flex-space-fitted > .flex-item:first-child, -.ui.segment > .flex-list > .flex-item:first-child { +.ui.segment.fitted > .flex-divided-list > .item { + padding: 1em; +} + +.container-padded > .flex-divided-list > .item:first-child, +.ui.segment:not(.fitted) > .flex-divided-list > .item:first-child { padding-top: 0; } -.flex-list.flex-space-fitted > .flex-item:last-child, -.ui.segment > .flex-list > .flex-item:last-child { +.container-padded > .flex-divided-list > .item:last-child, +.ui.segment:not(.fitted) > .flex-divided-list > .item:last-child { padding-bottom: 0; } /* If there is a divider besides the flex-list, some padding/margin are not needs */ -.divider + .flex-list > .flex-item:first-child { +.divider + .flex-divided-list > .item:first-child { padding-top: 0; } -.flex-list + .divider { +.flex-divided-list + .divider { margin-top: 0; } + +.container-padded > .flex-divided-list + .divider { + margin-top: 10px; +} diff --git a/web_src/js/features/repo-settings-branches.test.ts b/web_src/js/features/repo-settings-branches.test.ts index 7f34781bcba..55dbcd761b9 100644 --- a/web_src/js/features/repo-settings-branches.test.ts +++ b/web_src/js/features/repo-settings-branches.test.ts @@ -13,13 +13,13 @@ vi.mock('../modules/sortable.ts', () => ({ const branchesHTML = `
-
+
-
+
-
+