mirror of
https://github.com/go-gitea/gitea
synced 2025-07-03 09:07:19 +00:00
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>
This commit is contained in:
Denys Konovalov
GitHub
@ -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>
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -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}}
|
||||
|
||||
Reference in New Issue
Block a user