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/users.tmpl | |
| 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/users.tmpl')
| -rw-r--r-- | templates/explore/users.tmpl | 31 |
1 files changed, 20 insertions, 11 deletions
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> |