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/package/shared | |
| 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/package/shared')
| -rw-r--r-- | templates/package/shared/cleanup_rules/list.tmpl | 46 | ||||
| -rw-r--r-- | templates/package/shared/list.tmpl | 16 | ||||
| -rw-r--r-- | templates/package/shared/versionlist.tmpl | 14 |
3 files changed, 48 insertions, 28 deletions
diff --git a/templates/package/shared/cleanup_rules/list.tmpl b/templates/package/shared/cleanup_rules/list.tmpl index 485bff562e..e2af344817 100644 --- a/templates/package/shared/cleanup_rules/list.tmpl +++ b/templates/package/shared/cleanup_rules/list.tmpl @@ -5,10 +5,41 @@ </div> </h4> <div class="ui attached segment"> - <div class="ui key list"> + <div class="flex-list"> {{range .CleanupRules}} - <div class="item"> - <div class="right floated content"> + <div class="flex-item"> + <div class="flex-item-leading"> + {{svg .Type.SVGName 32}} + </div> + <div class="flex-item-main"> + <div class="flex-item-title"> + <a class="item" href="{{$.Link}}/rules/{{.ID}}">{{.Type.Name}}</a> + </div> + <div class="flex-item-body"> + <i>{{if .Enabled}}{{$.locale.Tr "enabled"}}{{else}}{{$.locale.Tr "disabled"}}{{end}}</i> + </div> + {{if .KeepCount}} + <div class="flex-item-body"> + <i>{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.count"}}:</i> {{if eq .KeepCount 1}}{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.count.1"}}{{else}}{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.count.n" .KeepCount}}{{end}} + </div> + {{end}} + {{if .KeepPattern}} + <div class="flex-item-body"> + <i>{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.pattern"}}:</i> {{StringUtils.EllipsisString .KeepPattern 100}} + </div> + {{end}} + {{if .RemoveDays}} + <div class="flex-item-body"> + <i>{{$.locale.Tr "packages.owner.settings.cleanuprules.remove.days"}}:</i> {{$.locale.Tr "tool.days" .RemoveDays}} + </div> + {{end}} + {{if .RemovePattern}} + <div class="flex-item-body"> + <i>{{$.locale.Tr "packages.owner.settings.cleanuprules.remove.pattern"}}:</i> {{StringUtils.EllipsisString .RemovePattern 100}} + </div> + {{end}} + </div> + <div class="flex-item-trailing"> <div class="ui dropdown tiny basic button"> {{svg "octicon-kebab-horizontal"}} <div class="menu"> @@ -17,15 +48,6 @@ </div> </div> </div> - <i class="icon">{{svg .Type.SVGName 36}}</i> - <div class="content"> - <a class="item" href="{{$.Link}}/rules/{{.ID}}"><strong>{{.Type.Name}}</strong></a> - <div><i>{{if .Enabled}}{{$.locale.Tr "enabled"}}{{else}}{{$.locale.Tr "disabled"}}{{end}}</i></div> - {{if .KeepCount}}<div><i>{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.count"}}:</i> {{if eq .KeepCount 1}}{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.count.1"}}{{else}}{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.count.n" .KeepCount}}{{end}}</div>{{end}} - {{if .KeepPattern}}<div><i>{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.pattern"}}:</i> {{StringUtils.EllipsisString .KeepPattern 100}}</div>{{end}} - {{if .RemoveDays}}<div><i>{{$.locale.Tr "packages.owner.settings.cleanuprules.remove.days"}}:</i> {{$.locale.Tr "tool.days" .RemoveDays}}</div>{{end}} - {{if .RemovePattern}}<div><i>{{$.locale.Tr "packages.owner.settings.cleanuprules.remove.pattern"}}:</i> {{StringUtils.EllipsisString .RemovePattern 100}}</div>{{end}} - </div> </div> {{else}} <div class="item">{{.locale.Tr "packages.owner.settings.cleanuprules.none"}}</div> diff --git a/templates/package/shared/list.tmpl b/templates/package/shared/list.tmpl index 79a2d885fb..d2370b1208 100644 --- a/templates/package/shared/list.tmpl +++ b/templates/package/shared/list.tmpl @@ -12,15 +12,15 @@ <button class="ui primary button">{{.locale.Tr "explore.search"}}</button> </div> </form> -<div class="ui {{if .PackageDescriptors}}issue list{{end}}"> +<div class="{{if .PackageDescriptors}}flex-list{{end}} gt-pt-4"> {{range .PackageDescriptors}} - <li class="item"> - <div class="issue-item-main"> - <div class="issue-item-title"> - <a class="title" href="{{.FullWebLink}}">{{.Package.Name}}</a> + <div class="flex-item"> + <div class="flex-item-main"> + <div class="flex-item-title"> + <a href="{{.FullWebLink}}">{{.Package.Name}}</a> <span class="ui label">{{svg .Package.Type.SVGName 16}} {{.Package.Type.Name}}</span> </div> - <div class="issue-item-body"> + <div class="flex-item-body"> {{$timeStr := TimeSinceUnix .Version.CreatedUnix $.locale}} {{$hasRepositoryAccess := false}} {{if .Repository}} @@ -33,10 +33,10 @@ {{end}} </div> </div> - </li> + </div> {{else}} {{if not .HasPackages}} - <div class="gt-pt-5 empty center"> + <div class="empty center"> {{svg "octicon-package" 48}} <h2>{{.locale.Tr "packages.empty"}}</h2> {{if and .Repository .CanWritePackages}} diff --git a/templates/package/shared/versionlist.tmpl b/templates/package/shared/versionlist.tmpl index feba8ef145..897f4d716a 100644 --- a/templates/package/shared/versionlist.tmpl +++ b/templates/package/shared/versionlist.tmpl @@ -18,18 +18,16 @@ <button class="ui primary button">{{.locale.Tr "explore.search"}}</button> </div> </form> -<div class="ui {{if .PackageDescriptors}}issue list{{end}}"> +<div class="{{if .PackageDescriptors}}flex-list{{end}} gt-pt-4"> {{range .PackageDescriptors}} - <li class="item"> - <div class="issue-item-main"> - <div class="issue-item-title"> - <a class="title" href="{{.FullWebLink}}">{{.Version.LowerVersion}}</a> - </div> - <div class="issue-item-body"> + <div class="flex-item"> + <div class="flex-item-main"> + <a class="flex-item-title" href="{{.FullWebLink}}">{{.Version.LowerVersion}}</a> + <div class="flex-item-body"> {{$.locale.Tr "packages.published_by" (TimeSinceUnix .Version.CreatedUnix $.locale) .Creator.HomeLink (.Creator.GetDisplayName | Escape) | Safe}} </div> </div> - </li> + </div> {{else}} <p>{{.locale.Tr "packages.filter.no_result"}}</p> {{end}} |