Skip to content

Refactor "flex-list" to "flex-divided-list" #37505

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wxiaoguang merged 5 commits into from
May 2, 2026
Merged

Refactor "flex-list" to "flex-divided-list" #37505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1d95a98
init
wxiaoguang May 2, 2026
fc22ab3
flex-list
wxiaoguang May 2, 2026
eda5bdd
repo home, issue list
wxiaoguang May 2, 2026
6f7ec85
flex-divided-list
wxiaoguang May 2, 2026
4dc45eb
Merge branch 'main' into refactor-flex-list
wxiaoguang May 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions templates/admin/badge/users.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,18 @@
</div>
{{if .Users}}
<div class="ui attached segment">
<div class="flex-list">
<div class="flex-divided-list items-with-main">
{{range .Users}}
<div class="flex-item tw-items-center">
<div class="flex-item-leading">
<div class="item tw-items-center">
<div class="item-leading">
<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
</div>
<div class="flex-item-main">
<div class="flex-item-title">
<div class="item-main">
<div class="item-title">
{{template "shared/user/name" .}}
</div>
</div>
<div class="flex-item-trailing">
<div class="item-trailing">
<a class="ui red tiny button inline link-action" data-url="{{$.Link}}/delete?id={{.ID}}" data-modal-confirm="{{ctx.Locale.Tr "admin.badges.delete_user_desc"}}">
{{ctx.Locale.Tr "admin.badges.remove_user"}}
</a>
Expand Down
12 changes: 6 additions & 6 deletions templates/admin/badge/view.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,18 @@
</div>
</h4>
<div class="ui attached segment">
<div class="flex-list">
<div class="flex-item">
<div class="flex-divided-list items-with-main">
<div class="item">
{{if .Badge.ImageURL}}
<div class="flex-item-leading">
<div class="item-leading">
<img width="64" height="64" src="{{.Badge.ImageURL}}" alt="{{.Badge.Description}}" data-tooltip-content="{{.Badge.Description}}">
</div>
{{end}}
<div class="flex-item-main">
<div class="flex-item-title">
<div class="item-main">
<div class="item-title">
{{.Badge.Slug}}
</div>
<div class="flex-item-body">
<div class="item-body">
{{.Badge.Description}}
</div>
</div>
Expand Down
28 changes: 14 additions & 14 deletions templates/admin/user/view_details.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<div class="flex-list">
<div class="flex-item">
<div class="flex-item-leading">
<div class="flex-divided-list items-with-main">
<div class="item">
<div class="item-leading">
{{ctx.AvatarUtils.Avatar .User 48}}
</div>
<div class="flex-item-main">
<div class="flex-item-title">
<div class="item-main">
<div class="item-title">
{{template "shared/user/name" .User}}
{{if .User.IsAdmin}}
<span class="ui basic label">{{ctx.Locale.Tr "admin.users.admin"}}</span>
Expand All @@ -13,47 +13,47 @@
<span class="ui basic label">{{ctx.Locale.Tr "admin.users.bot"}}</span>
{{end}}
</div>
<div class="flex-item-body">
<div class="item-body">
<b>{{ctx.Locale.Tr "admin.users.auth_source"}}:</b>
{{Iif (eq .LoginSource.ID 0) (ctx.Locale.Tr "admin.users.local") .LoginSource.Name}}
</div>
<div class="flex-item-body">
<div class="item-body">
<b>{{ctx.Locale.Tr "admin.users.activated"}}:</b>
{{svg (Iif .User.IsActive "octicon-check" "octicon-x")}}
</div>
<div class="flex-item-body">
<div class="item-body">
<b>{{ctx.Locale.Tr "admin.users.prohibit_login"}}:</b>
{{svg (Iif .User.ProhibitLogin "octicon-check" "octicon-x")}}
</div>
<div class="flex-item-body">
<div class="item-body">
<b>{{ctx.Locale.Tr "admin.users.restricted"}}:</b>
{{svg (Iif .User.IsRestricted "octicon-check" "octicon-x")}}
</div>
<div class="flex-item-body">
<div class="item-body">
<b>{{ctx.Locale.Tr "settings.visibility"}}:</b>
{{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}}
</div>
<div class="flex-item-body">
<div class="item-body">
<b>{{ctx.Locale.Tr "admin.users.2fa"}}:</b>
{{svg (Iif .TwoFactorEnabled "octicon-check" "octicon-x")}}
</div>
{{if .User.Language}}
<div class="flex-item-body">
<div class="item-body">
<span class="flex-text-inline">
<b>{{ctx.Locale.Tr "settings.language"}}:</b>
{{range .AllLangs}}{{if eq $.User.Language .Lang}}{{.Name}}{{end}}{{end}}
</span>
</div>
{{end}}
{{if .User.Location}}
<div class="flex-item-body">
<div class="item-body">
<span class="flex-text-inline">{{svg "octicon-location"}}{{.User.Location}}</span>
</div>
{{end}}
{{if .User.Website}}
<div class="flex-item-body">
<div class="item-body">
<span class="flex-text-inline">
{{svg "octicon-link"}}
<a target="_blank" href="{{.User.Website}}">{{.User.Website}}</a>
Expand Down
6 changes: 3 additions & 3 deletions templates/admin/user/view_emails.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="flex-list">
<div class="flex-divided-list items-with-main">
{{range .Emails}}
<div class="flex-item">
<div class="flex-item-main">
<div class="item">
<div class="item-main">
<div class="flex-text-block">
<a href="mailto:{{.Email}}">{{.Email}}</a>
{{if .IsPrimary}}
Expand Down
93 changes: 57 additions & 36 deletions templates/devtest/flex-list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
{{template "devtest/devtest-header"}}
<div class="page-content devtest">
<div class="ui container">
<h1>Flex List (standalone)</h1>
<h3>Flex List (standalone)</h3>
<div class="divider"></div>
<div class="flex-list">
<div class="flex-item">
<div class="flex-item-leading">
<div class="flex-divided-list items-with-main">
<div class="item">
<div class="item-leading">
{{svg "octicon-info" 32}}
</div>
<div class="flex-item-main">
<div class="flex-item-title">
<div class="item-main">
<div class="item-title">
Flex Item
<span class="ui basic label">
with label
</span>
</div>
<div class="flex-item-body">
<div class="item-body">
consists of leading/main/trailing part
</div>
<div class="flex-item-body">
<div class="item-body">
main part contains title and (multiple) body lines
</div>
</div>
<div class="flex-item-trailing">
<div class="item-trailing">
<button class="ui tiny red button">
{{svg "octicon-alert" 14}} CJK文本测试
</button>
Expand All @@ -35,50 +35,50 @@
</div>
</div>

<div class="flex-item">
<div class="flex-item-leading">
<div class="item">
<div class="item-leading">
{{svg "octicon-info" 32}}
</div>
<div class="flex-item-main">
<div class="flex-item-title">
<div class="item-main">
<div class="item-title">
Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title
</div>
<div class="flex-item-body">
<div class="item-body">
consists of leading/main/trailing part
</div>
<div class="flex-item-body">
<div class="item-body">
Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
<span class="tw-inline-block tw-truncate">Truncate very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content</span>
</div>
</div>
<div class="flex-item-trailing">
<div class="item-trailing">
<button class="ui tiny red button">
{{svg "octicon-alert" 12}} CJK文本测试 <!-- single CJK text test, it shouldn't be horizontal -->
</button>
</div>
</div>

<div class="flex-item">
<div class="flex-item-leading">
<div class="item">
<div class="item-leading">
{{svg "octicon-repo" 32}}
</div>
<div class="flex-item-main">
<div class="flex-item-header">
<div class="flex-item-title">
<div class="item-main">
<div class="item-header">
<div class="item-title">
<a class="tw-text-primary" href="{{$.Link}}">
gitea-org / gitea
</a>
<span class="flex-text-inline" data-tooltip-content="{{ctx.Locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
</div>
<div class="flex-item-trailing">
<div class="item-trailing">
<a class="muted" href="{{$.Link}}">
<span class="flex-text-inline"><i class="color-icon tw-mr-2 tw-bg-blue"></i>Go</span>
</a>
<a class="tw-text-text-light flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
<a class="tw-text-text-light flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
</div>
</div>
<div class="flex-item-body">
<div class="item-body">
when inside header, the trailing part will wrap below the title
</div>
</div>
Expand All @@ -87,27 +87,48 @@

<div class="divider"></div>

<h1>Flex List (with "ui segment")</h1>
<h3>Flex List (with "ui segment")</h3>
<div class="ui attached segment">
<div class="flex-list">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<div class="flex-divided-list">
<div class="item">item 1</div>
<div class="item">item 2</div>
</div>
</div>
<div class="ui attached segment">
<h1>Flex List (with "ui segment")</h1>
<div class="flex-list">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<h4>segment header</h4>
<div class="flex-divided-list">
<div class="item">item 1</div>
<div class="item">item 2</div>
</div>
</div>
<h3>Flex List (with "ui segment fitted")</h3>
<div class="ui attached segment fitted">
<div class="flex-divided-list">
<div class="item">item 1</div>
<div class="item">item 2</div>
</div>
</div>

<h1>If parent provides the padding/margin space:</h1>
<div class="tw-border tw-border-secondary tw-py-4">
<div class="flex-list flex-space-fitted">
<div class="flex-item">item 1 (no padding top)</div>
<div class="flex-item">item 2 (no padding bottom)</div>
<h3>If parent provides border or padding:</h3>
<div class="container-segmented tw-border tw-border-secondary">
<div class="tw-m-3">before divider</div>
<div class="divider"></div>
<div class="flex-divided-list">
<div class="item">item 1</div>
<div class="item">item 2</div>
</div>
<div class="divider"></div>
<div class="tw-m-3">after divider</div>
</div>
<div class="container-padded tw-border tw-border-secondary tw-p-4 tw-my-2">
<div>before divider</div>
<div class="divider"></div>
<div class="flex-divided-list">
<div class="item">item 1</div>
<div class="item">item 2</div>
</div>
<div class="divider"></div>
<div>after divider</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion templates/devtest/fomantic-dropdown.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<h2>Dropdown</h2>
<div>
<div class="ui dropdown tw-border tw-border-red tw-border-dashed" data-tooltip-content="border for demo purpose only">
<span class="text">search-input &amp; flex-item in menu</span>
<span class="text">search-input &amp; flexed items in menu</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu flex-items-menu">
<div class="ui icon search input"><i class="icon">{{svg "octicon-search"}}</i><input type="text" value="search input in menu"></div>
Expand Down
14 changes: 7 additions & 7 deletions templates/explore/user_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<div class="flex-list">
<div class="flex-divided-list items-with-main">
{{range .Users}}
<div class="flex-item tw-items-center">
<div class="flex-item-leading">
<div class="item tw-items-center">
<div class="item-leading">
{{ctx.AvatarUtils.Avatar . 48}}
</div>
<div class="flex-item-main">
<div class="flex-item-title">
<div class="item-main">
<div class="item-title">
{{template "shared/user/name" .}}
{{if .Visibility.IsPrivate}}
<span class="ui basic tiny label">{{ctx.Locale.Tr "repo.desc.private"}}</span>
{{end}}
</div>
<div class="flex-item-body">
<div class="item-body">
{{if .Location}}
<span class="flex-text-inline">{{svg "octicon-location"}}{{.Location}}</span>
{{end}}
Expand All @@ -26,7 +26,7 @@
</div>
</div>
{{else}}
<div class="flex-item">
<div class="item">
{{ctx.Locale.Tr "search.no_results"}}
</div>
{{end}}
Expand Down
12 changes: 6 additions & 6 deletions templates/org/member/members.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@
</div>
<div class="divider"></div>
{{end}}
<div class="flex-list">
<div class="flex-divided-list items-with-main">
{{range .Members}}
{{$isPublic := index $.MembersIsPublicMember .ID}}
<div class="flex-item {{if $.PublicOnly}}tw-items-center{{end}}">
<div class="flex-item-leading">
<div class="item {{if $.PublicOnly}}tw-items-center{{end}}">
<div class="item-leading">
<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 48}}</a>
</div>
<div class="flex-item-main">
<div class="flex-item-title">
<div class="item-main">
<div class="item-title">
{{template "shared/user/name" .}}
{{if not $isPublic}}
<span class="ui basic small label">{{ctx.Locale.Tr "org.members.private"}}</span>
Expand All @@ -44,7 +44,7 @@
{{end}}
</div>
</div>
<div class="flex-item-trailing">
<div class="item-trailing">
{{if or (eq $.SignedUser.ID .ID) $.IsOrganizationOwner}}
{{if $isPublic}}
<a class="ui tiny button link-action" href data-url="{{$.OrgLink}}/members/action/private?uid={{.ID}}">{{svg "octicon-eye-closed" 12 "icon"}}{{ctx.Locale.Tr "org.members.public_helper"}}</a>
Expand Down
Loading