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/shared/issuelist.tmpl | |
| parent | Mention `devtest` in frontend contributing guidelines (#26249) (diff) | |
| download | forgejo-b9baed2c74286710481886c5d1f3010e43840012.tar.xz forgejo-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/shared/issuelist.tmpl')
| -rw-r--r-- | templates/shared/issuelist.tmpl | 24 |
1 files changed, 12 insertions, 12 deletions
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 7d80e04736..30e19baf7c 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -1,19 +1,19 @@ -<div class="issue list"> +<div id="issue-list" class="flex-list gt-pt-4"> {{$approvalCounts := .ApprovalCounts}} {{range .Issues}} - <li class="item"> - <div class="issue-item-left"> + <div class="flex-item flex-item-baseline"> + <div class="flex-item-leading gt-ac"> {{if $.CanWriteIssuesOrPulls}} - <input type="checkbox" autocomplete="off" class="issue-checkbox gt-mt-2 gt-mr-4" data-issue-id={{.ID}} aria-label="{{$.locale.Tr "repo.issues.action_check"}} "{{.Title}}""> + <input type="checkbox" autocomplete="off" class="issue-checkbox gt-mr-4" data-issue-id={{.ID}} aria-label="{{$.locale.Tr "repo.issues.action_check"}} "{{.Title}}""> {{end}} - <div class="issue-item-icon"> + <div class="flex-item-icon"> {{template "shared/issueicon" .}} </div> </div> - <div class="issue-item-main"> - <div class="issue-item-header"> - <div class="issue-item-title"> - <a class="title gt-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a> + <div class="flex-item-main"> + <div class="flex-item-header"> + <div class="flex-item-title"> + <a class="gt-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a> {{if .IsPull}} {{if (index $.CommitStatuses .PullRequest.ID)}} {{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID) "root" $}} @@ -26,7 +26,7 @@ </span> </div> {{if or .TotalTrackedTime .Assignees .NumComments}} - <div class="issue-item-right"> + <div class="flex-item-trailing"> {{if .TotalTrackedTime}} <div class="text grey flex-text-block"> {{svg "octicon-clock" 16}} @@ -52,7 +52,7 @@ </div> {{end}} </div> - <div class="issue-item-body"> + <div class="flex-item-body"> <a class="index" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> {{if eq $.listType "dashboard"}} {{.Repo.FullName}}#{{.Index}} @@ -149,7 +149,7 @@ {{end}} </div> </div> - </li> + </div> {{end}} {{if .IssueIndexerUnavailable}} <div class="ui error message"> |