diff options
| author | Denys Konovalov <kontakt@denyskon.de> | 2023-08-01 00:13:42 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-08-01 00:13:42 +0200 |
| commit | b9baed2c74286710481886c5d1f3010e43840012 (patch) | |
| tree | e39bdc26d90aafc29a13f134db0fa424a8b37e87 /templates/explore | |
| parent | fc6c3d626ef9f383c3ff7f774fcef0116de4f2e3 (diff) | |
| download | gitea-b9baed2c74286710481886c5d1f3010e43840012.tar.gz gitea-b9baed2c74286710481886c5d1f3010e43840012.zip | |
Introduce `flex-list` & `flex-item` elements for Gitea UI (#25790)
This PR introduces a new UI element type for Gitea called `flex-item`.
It consists of a horizontal card with a leading, main and trailing part:
The idea behind it is that in Gitea UI, we have many cases where we use
this kind of layout, but it is achieved in many different ways:
- grid layout
- `.ui.list` with additional hacky flexbox
- `.ui.key.list` - looks to me like a style set originally created for
ssh/gpg key list, was used in many other places
- `.issue.list` - created for issue cards, used in many other places
- ...
This new style is based on `.issue.list`, specifically the refactoring
of it done in #25750.
In this PR, the new element is introduced and lots of templates are
being refactored to use that style. This allows to remove a lot of
page-specific css, makes many of the elements responsive or simply
provides a cleaner/better-looking way to present information.
A devtest section with the new style is also available.
<details>
<summary>Screenshots (left: before, right: after)</summary>
</details>
---------
Co-authored-by: Giteabot <teabot@gitea.io>
Diffstat (limited to 'templates/explore')
| -rw-r--r-- | templates/explore/organizations.tmpl | 39 | ||||
| -rw-r--r-- | templates/explore/repo_list.tmpl | 98 | ||||
| -rw-r--r-- | templates/explore/users.tmpl | 31 |
3 files changed, 73 insertions, 95 deletions
diff --git a/templates/explore/organizations.tmpl b/templates/explore/organizations.tmpl index ecf7f21bdd..ea788b149b 100644 --- a/templates/explore/organizations.tmpl +++ b/templates/explore/organizations.tmpl @@ -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-calendar"}} {{$.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" .}} diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl index 47e9921332..44f7900327 100644 --- a/templates/explore/repo_list.tmpl +++ b/templates/explore/repo_list.tmpl @@ -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-item"> + <div class="flex-item-leading"> + {{$avatar := (repoAvatar . 32)}} + {{if $avatar}} + {{$avatar}} + {{else}} + {{template "repo/icon" .}} + {{end}} + </div> + <div class="flex-item-main"> + <div class="flex-item-header"> + <div class="flex-item-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-item-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-item-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-item-body">{{$.locale.Tr "org.repo_updated"}} {{TimeSinceUnix .UpdatedUnix $.locale}}</div> </div> </div> {{else}} diff --git a/templates/explore/users.tmpl b/templates/explore/users.tmpl index e3318479bb..5e150f692f 100644 --- a/templates/explore/users.tmpl +++ b/templates/explore/users.tmpl @@ -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-item flex-item-center"> + <div class="flex-item-leading"> + {{avatar $.Context . 48}} + </div> + <div class="flex-item-main"> + <div class="flex-item-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-item-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-calendar"}} {{$.locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix) | Safe}} + <span class="flex-text-inline">{{svg "octicon-calendar"}}{{$.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-item">{{$.locale.Tr "explore.user_no_results"}}</div> {{end}} </div> |