Skip to content

Introduce flex-list & flex-item elements for Gitea UI #25790

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
merged 22 commits into from
Jul 31, 2023
Merged

Introduce flex-list & flex-item elements for Gitea UI #25790

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
001da67
fix shared styles, additional fixes
denyskon Jul 7, 2023
650a226
restore accidentially removed class
denyskon Jul 7, 2023
607257a
introduce flex-card style
denyskon Jul 9, 2023
86d9c11
fixes
denyskon Jul 9, 2023
62449e9
fix issues, reduce feed spacing
denyskon Jul 9, 2023
fd6cce3
fix tests
denyskon Jul 9, 2023
cf3ef0d
Merge branch 'main' into refactor/flex-card
denyskon Jul 9, 2023
759223c
Update issue_test.go
denyskon Jul 9, 2023
e059aab
fix tests
denyskon Jul 10, 2023
d731a23
rename flex-card to flex-item
denyskon Jul 10, 2023
1be2cbd
Merge branch 'main' into refactor/flex-card
denyskon Jul 10, 2023
8159daf
Merge branch 'main' into refactor/flex-card
denyskon Jul 10, 2023
792961e
Delete generate-ini-sqlite
denyskon Jul 10, 2023
82e436f
Merge branch 'main' into refactor/flex-card
denyskon Jul 14, 2023
aea1437
Merge branch 'main' into refactor/flex-card
denyskon Jul 21, 2023
147f7a4
Merge branch 'main' into refactor/flex-card
denyskon Jul 24, 2023
6c490f5
Merge branch 'main' into refactor/flex-card
denyskon Jul 26, 2023
6477d43
Merge branch 'main' into refactor/flex-card
denyskon Jul 30, 2023
ca1618b
Merge branch 'main' into refactor/flex-card
denyskon Jul 31, 2023
3798d8e
Update organizations.tmpl
denyskon Jul 31, 2023
67b4fe8
Merge branch 'main' into refactor/flex-card
GiteaBot Jul 31, 2023
f5e5aa9
move issue-list-specific styles from flex-list to issue-list
denyskon Jul 31, 2023
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
58 changes: 58 additions & 0 deletions templates/devtest/gitea-ui.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,5 +253,63 @@
{{template "shared/combomarkdowneditor" .}}
</div>
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>

<div>
<h1>Flex List</h1>
<div class="flex-list">
<div class="flex-card">
<div class="flex-card-leading">
{{svg "octicon-info" 32}}
</div>
<div class="flex-card-main">
<div class="flex-card-title">
Flex Card
<span class="ui basic label">
with label
</span>
</div>
<div class="flex-card-body">
consists of leading/main/trailing part
</div>
<div class="flex-card-body">
main part contains title and (multiple) body lines
</div>
</div>
<div class="flex-card-trailing">
<button class="ui tiny red button">
{{svg "octicon-warning" 12}} Button
</button>
<button class="ui tiny green button">
{{svg "octicon-info" 12}} Button
</button>
</div>
</div>
<div class="flex-card">
<div class="flex-card-leading">
{{svg "octicon-repo" 32}}
</div>
<div class="flex-card-main">
<div class="flex-card-header">
<div class="flex-card-title">
<a class="text primary" href="{{$.Link}}">
gitea-org / gitea
</a>
<span data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
</div>
<div class="flex-card-trailing">
<a class="muted" href="{{$.Link}}">
<span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: aqua"></i>Go</span>
</a>
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
</div>
</div>
<div class="flex-card-body">
when inside header, the trailing part will wrap below the title
</div>
</div>
</div>
</div>
</div>
</div>
{{template "base/footer" .}}
39 changes: 1 addition & 38 deletions templates/explore/organizations.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content explore users">
{{template "explore/navbar" .}}
<div class="ui container">
{{template "explore/search" .}}

<div class="ui user list">
{{range .Users}}
<div class="item">
{{avatar $.Context .}}
<div class="content">
<span class="header">
<a href="{{.HomeLink}}">{{.Name}}</a> {{.FullName}}
{{if .Visibility.IsPrivate}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.private"}}</span>
{{end}}
</span>
<div class="description">
{{if .Location}}
{{svg "octicon-location"}} {{.Location}}
{{end}}
{{if and .Website}}
{{svg "octicon-link"}}
<a href="{{.Website}}" rel="nofollow">{{.Website}}</a>
{{end}}
{{svg "octicon-clock"}} {{$.locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix) | Safe}}
</div>
</div>
</div>
{{else}}
<div>{{$.locale.Tr "explore.org_no_results"}}</div>
{{end}}
</div>

{{template "base/paginate" .}}
</div>
</div>
{{template "base/footer" .}}
{{template "explore/users" .}}
98 changes: 52 additions & 46 deletions templates/explore/repo_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,72 @@
<div class="ui repository list">
<div class="flex-list">
{{range .Repos}}
<div class="item">
<div class="ui header gt-df gt-ac">
<div class="repo-title">
{{$avatar := (repoAvatar . 32 "gt-mr-3")}}
{{if $avatar}}
{{$avatar}}
{{end}}
<a class="name" href="{{.Link}}">
{{if or $.PageIsExplore $.PageIsProfileStarList}}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
</a>
<div class="labels gt-df gt-ac gt-fw gt-mr-3">
{{if .IsArchived}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span>
{{end}}
{{if .IsTemplate}}
{{if .IsPrivate}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.private_template"}}</span>
{{else}}
{{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.internal_template"}}</span>
{{end}}
<div class="flex-card">
<div class="flex-card-leading">
{{$avatar := (repoAvatar . 32)}}
{{if $avatar}}
{{$avatar}}
{{else}}
{{template "repo/icon" .}}
{{end}}
</div>
<div class="flex-card-main">
<div class="flex-card-header">
<div class="flex-card-title">
<a class="text primary name" href="{{.Link}}">
{{if or $.PageIsExplore $.PageIsProfileStarList}}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
</a>
<span class="label-list">
{{if .IsArchived}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span>
{{end}}
{{else}}
{{if .IsPrivate}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.private"}}</span>
{{if .IsTemplate}}
{{if .IsPrivate}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.private_template"}}</span>
{{else}}
{{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.internal_template"}}</span>
{{end}}
{{end}}
{{else}}
{{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.internal"}}</span>
{{if .IsPrivate}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.private"}}</span>
{{else}}
{{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.internal"}}</span>
{{end}}
{{end}}
{{end}}
{{end}}
</span>
{{if .IsFork}}
<span class="gt-df" data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
<span data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
{{else if .IsMirror}}
<span class="gt-df" data-tooltip-content="{{$.locale.Tr "mirror"}}">{{svg "octicon-mirror"}}</span>
<span data-tooltip-content="{{$.locale.Tr "mirror"}}">{{svg "octicon-mirror"}}</span>
{{end}}
</div>
<div class="flex-card-trailing">
{{if .PrimaryLanguage}}
<a class="muted" href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}">
<span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>
</a>
{{end}}
{{if not $.DisableStars}}
<a class="text grey flex-text-inline" href="{{.Link}}/stars">{{svg "octicon-star" 16}}{{.NumStars}}</a>
{{end}}
<a class="text grey flex-text-inline" href="{{.Link}}/forks">{{svg "octicon-git-branch" 16}}{{.NumForks}}</a>
</div>
</div>
<div class="gt-font-13 gt-df gt-ac text grey">
{{if .PrimaryLanguage}}
<a class="muted" href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}">
<span class="gt-df gt-ac gt-mr-3"><i class="color-icon gt-mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>
</a>
{{end}}
{{if not $.DisableStars}}
<a class="text grey gt-df gt-ac gt-mr-3" href="{{.Link}}/stars">{{svg "octicon-star" 16 "gt-mr-3"}}{{.NumStars}}</a>
{{end}}
<a class="text grey gt-df gt-ac gt-mr-3" href="{{.Link}}/forks">{{svg "octicon-git-branch" 16 "gt-mr-3"}}{{.NumForks}}</a>
</div>
</div>
<div class="description">
{{$description := .DescriptionHTML $.Context}}
{{if $description}}<p>{{$description}}</p>{{end}}
{{if $description}}
<div class="flex-card-body">{{$description}}</div>
{{end}}
{{if .Topics}}
<div class="gt-df gt-fw gt-gap-2 gt-mb-3">
<div class="label-list">
{{range .Topics}}
{{if ne . ""}}<a class="ui label" href="{{AppSubUrl}}/explore/repos?q={{.}}&topic=1">{{.}}</a>{{end}}
{{end}}
</div>
{{end}}
<p class="time">{{$.locale.Tr "org.repo_updated"}} {{TimeSinceUnix .UpdatedUnix $.locale}}</p>
<div class="flex-card-body">{{$.locale.Tr "org.repo_updated"}} {{TimeSinceUnix .UpdatedUnix $.locale}}</div>
</div>
</div>
{{else}}
Expand Down
31 changes: 20 additions & 11 deletions templates/explore/users.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,35 @@
<div class="ui container">
{{template "explore/search" .}}

<div class="ui user list">
<div class="flex-list">
{{range .Users}}
<div class="item">
{{avatar $.Context .}}
<div class="content">
<span class="header"><a href="{{.HomeLink}}">{{.Name}}</a> {{.FullName}}</span>
<div class="description">
<div class="flex-card flex-card-center">
<div class="flex-card-leading">
{{avatar $.Context . 48}}
</div>
<div class="flex-card-main">
<div class="flex-card-title">
{{template "shared/user/name" .}}
{{if .Visibility.IsPrivate}}
<span class="ui basic tiny label">{{$.locale.Tr "repo.desc.private"}}</span>
{{end}}
</div>
<div class="flex-card-body">
{{if .Location}}
{{svg "octicon-location"}} {{.Location}}
<span class="flex-text-inline">{{svg "octicon-location"}}{{.Location}}</span>
{{end}}
{{if and $.ShowUserEmail .Email $.IsSigned (not .KeepEmailPrivate)}}
{{svg "octicon-mail"}}
<a href="mailto:{{.Email}}" rel="nofollow">{{.Email}}</a>
<span class="flex-text-inline">
{{svg "octicon-mail"}}
<a href="mailto:{{.Email}}" rel="nofollow">{{.Email}}</a>
</span>
{{end}}
{{svg "octicon-clock"}} {{$.locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix) | Safe}}
<span class="flex-text-inline">{{svg "octicon-clock"}}{{$.locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix) | Safe}}</span>
</div>
</div>
</div>
{{else}}
<div>{{$.locale.Tr "explore.user_no_results"}}</div>
<div class="flex-card">{{$.locale.Tr "explore.user_no_results"}}</div>
{{end}}
</div>

Expand Down
89 changes: 38 additions & 51 deletions templates/org/member/members.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,31 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content organization members">
<div role="main" aria-label="{{.Title}}" class="page-content organization">
Copy link
Contributor

@Sonic853 Sonic853 Oct 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why to delete this "members" class?

Copy link
Member

@puni9869 puni9869 Oct 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any impact? of regression

Copy link
Member

@silverwind silverwind Oct 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe they were depending on this class for customization. I wonder if there would be a better way to indicate the current page to CSS, like an data attribute that indicates the matching template file or router. We could make better stability guarantees for those then these flimsy classes.

Copy link
Contributor

@Sonic853 Sonic853 Oct 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any impact? of regression

Although there is currently no impact. But there is no way to tell under Vanilla JS whether it is a "Members" page.

Copy link
Member

@silverwind silverwind Oct 30, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In JS, you could check the URL which I guess is more stable than these classes. e.g. check if /^\/[^/]+/[^/]+/members$/.test(window.location.pathname).

{{template "org/header" .}}
<div class="ui container">
{{template "base/alert" .}}

<div class="list">
<div class="flex-list">
{{range .Members}}
<div class="item ui grid">
<div class="ui four wide column gt-df">
{{$isPublic := index $.MembersIsPublicMember .ID}}
<div class="flex-card {{if $.PublicOnly}}flex-card-center{{end}}">
<div class="flex-card-leading">
<a href="{{.HomeLink}}">{{avatar $.Context . 48}}</a>
<div>
<div class="meta"><a href="{{.HomeLink}}">{{.Name}}</a></div>
<div class="meta">{{.FullName}}</div>
</div>
</div>
<div class="ui four wide column center">
<div class="meta">
{{$.locale.Tr "org.members.membership_visibility"}}
</div>
<div class="meta">
{{$isPublic := index $.MembersIsPublicMember .ID}}
{{if $isPublic}}
<strong>{{$.locale.Tr "org.members.public"}}</strong>
{{if or (eq $.SignedUser.ID .ID) $.IsOrganizationOwner}}(<a class="link-action" href data-url="{{$.OrgLink}}/members/action/private?uid={{.ID}}">{{$.locale.Tr "org.members.public_helper"}}</a>){{end}}
{{else}}
<strong>{{$.locale.Tr "org.members.private"}}</strong>
{{if or (eq $.SignedUser.ID .ID) $.IsOrganizationOwner}}(<a class="link-action" href data-url="{{$.OrgLink}}/members/action/public?uid={{.ID}}">{{$.locale.Tr "org.members.private_helper"}}</a>){{end}}
<div class="flex-card-main">
<div class="flex-card-title">
{{template "shared/user/name" .}}
{{if not $isPublic}}
<span class="ui basic tiny label">{{$.locale.Tr "org.members.private"}}</span>
{{end}}
</div>
</div>
{{if not $.PublicOnly}}
<div class="ui three wide column center">
<div class="meta">
{{if not $.PublicOnly}}
<div class="flex-card-body">
{{$.locale.Tr "org.members.member_role"}}
<strong class="flex-text-inline">{{if index $.MembersIsUserOrgOwner .ID}}{{svg "octicon-shield-lock"}} {{$.locale.Tr "org.members.owner"}}{{else}}{{$.locale.Tr "org.members.member"}}{{end}}</strong>
</div>
<div class="meta">
<strong>{{if index $.MembersIsUserOrgOwner .ID}}{{svg "octicon-shield-lock"}} {{$.locale.Tr "org.members.owner"}}{{else}}{{$.locale.Tr "org.members.member"}}{{end}}</strong>
</div>
</div>
<div class="ui two wide column center">
{{if $.IsOrganizationOwner}}
<div class="meta">
<div class="flex-card-body">
{{$.locale.Tr "admin.users.2fa"}}
</div>
<div class="meta">
<strong>
{{if index $.MembersTwoFaStatus .ID}}
<span class="text green">{{svg "octicon-check"}}</span>
Expand All @@ -53,26 +35,31 @@
</strong>
</div>
{{end}}
</div>
{{end}}
<div class="ui three wide column gt-df gt-ac gt-je">
<div class="text right">
{{if eq $.SignedUser.ID .ID}}
<form>
<button class="ui red small button delete-button" data-modal-id="leave-organization"
data-url="{{$.OrgLink}}/members/action/leave" data-datauid="{{.ID}}"
data-name="{{.DisplayName}}"
data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.leave"}}</button>
</form>
{{else if $.IsOrganizationOwner}}
<form>
<button class="ui red small button delete-button" data-modal-id="remove-organization-member"
data-url="{{$.OrgLink}}/members/action/remove" data-datauid="{{.ID}}"
data-name="{{.DisplayName}}"
data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.remove"}}</button>
</form>
{{end}}
</div>
<div class="flex-card-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"}}{{$.locale.Tr "org.members.public_helper"}}</a>
{{else}}
<a class="ui tiny button link-action" href data-url="{{$.OrgLink}}/members/action/public?uid={{.ID}}">{{svg "octicon-eye" 12 "icon"}}{{$.locale.Tr "org.members.private_helper"}}</a>
{{end}}
</div>
{{end}}
{{if eq $.SignedUser.ID .ID}}
<form>
<button class="ui red tiny button delete-button" data-modal-id="leave-organization"
data-url="{{$.OrgLink}}/members/action/leave" data-datauid="{{.ID}}"
data-name="{{.DisplayName}}"
data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.leave"}}</button>
</form>
{{else if $.IsOrganizationOwner}}
<form>
<button class="ui red tiny button delete-button" data-modal-id="remove-organization-member"
data-url="{{$.OrgLink}}/members/action/remove" data-datauid="{{.ID}}"
data-name="{{.DisplayName}}"
data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.remove"}}</button>
</form>
{{end}}
</div>
</div>
{{end}}
Expand Down
Loading