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/repo/actions | |
| 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/repo/actions')
| -rw-r--r-- | templates/repo/actions/runs_list.tmpl | 28 |
1 files changed, 13 insertions, 15 deletions
diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl index 87b5ed69de..1a45733b77 100644 --- a/templates/repo/actions/runs_list.tmpl +++ b/templates/repo/actions/runs_list.tmpl @@ -1,4 +1,4 @@ -<div class="issue list gt-m-0"> +<div class="flex-list gt-m-0"> {{if eq (len .Runs) 0}} <div class="empty center"> {{svg "octicon-no-entry" 48}} @@ -6,17 +6,15 @@ </div> {{end}} {{range .Runs}} - <li class="item action-item"> - <div class="issue-item-left issue-item-icon"> + <div class="flex-item flex-item-center"> + <div class="flex-item-leading"> {{template "repo/actions/status" (dict "status" .Status.String "locale" $.locale)}} </div> - <div class="issue-item-main action-item-main"> - <div class="issue-item-title"> - <a class="index gt-no-underline title action-item-title" title="{{.Title}}" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> - {{- .Title -}} - </a> - </div> - <div class="issue-item-body"> + <div class="flex-item-main"> + <a class="flex-item-title" title="{{.Title}}" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> + {{- .Title -}} + </a> + <div class="flex-item-body"> <b>{{if not $.CurWorkflow}}{{.WorkflowID}} {{end}}#{{.Index}}</b> : {{$.locale.Tr "actions.runs.commit"}} <a href="{{$.RepoLink}}/commit/{{.CommitSHA}}">{{ShortSha .CommitSHA}}</a> @@ -24,18 +22,18 @@ <a href="{{.TriggerUser.HomeLink}}">{{.TriggerUser.GetDisplayName}}</a> </div> </div> - <div class="action-item-center"> + <div class="flex-item-trailing"> {{if .RefLink}} <a class="ui label gt-px-2 gt-mx-0" href="{{.RefLink}}">{{.PrettyRef}}</a> {{else}} <span class="ui label gt-px-2 gt-mx-0">{{.PrettyRef}}</span> {{end}} </div> - <div class="action-item-right"> - <div class="flex-text-block">{{svg "octicon-calendar" 16}}{{TimeSinceUnix .Updated $.locale}}</div> - <div class="flex-text-block">{{svg "octicon-stopwatch" 16}}{{.Duration}}</div> + <div class="run-list-item-right"> + <div class="run-list-meta">{{svg "octicon-calendar" 16}}{{TimeSinceUnix .Updated $.locale}}</div> + <div class="run-list-meta">{{svg "octicon-stopwatch" 16}}{{.Duration}}</div> </div> - </li> + </div> {{end}} </div> {{template "base/paginate" .}} |