Refactor "flex-list" to "flex-divided-list" (#37505)
Purpose: 1. Make the whole code base have unified "item" layout 2. Clarify our "list" styles: "flex-relaxed-list", "flex-divided-list" 3. Prepare to replace legacy "ui relaxed list" * https://github.com/go-gitea/gitea/pull/37445#discussion_r3144458865 4. Prepare for refactoring the "pull merge box", it needs the "flex-divided-list" * related to "Refactor pull request view (*)" like #37451 5. Fix legacy abuses of "flex-list", e.g.: repo home sidebar
This commit is contained in:
@@ -1,21 +1,21 @@
|
||||
<div id="issue-list" class="flex-list">
|
||||
<div id="issue-list" class="flex-divided-list items-with-main">
|
||||
{{$approvalCounts := .ApprovalCounts}}
|
||||
{{range .Issues}}
|
||||
<div class="flex-item">
|
||||
<div class="item">
|
||||
|
||||
<div class="flex-item-leading">
|
||||
<div class="item-leading">
|
||||
{{/* using some tw helpers is the only way to align the checkbox */}}
|
||||
<div class="flex-text-inline tw-mt-[3px]">
|
||||
{{if $.CanWriteIssuesOrPulls}}
|
||||
<input type="checkbox" autocomplete="off" class="issue-checkbox tw-mr-[14px]" data-issue-id={{.ID}} aria-label="{{ctx.Locale.Tr "repo.issues.action_check"}} "{{.Title}}"">
|
||||
<input type="checkbox" autocomplete="off" class="issue-checkbox tw-mr-[14px]" data-issue-id="{{.ID}}" aria-label="{{ctx.Locale.Tr "repo.issues.action_check"}}: {{.Title}}">
|
||||
{{end}}
|
||||
{{template "shared/issueicon" .}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-item-main">
|
||||
<div class="flex-item-header">
|
||||
<div class="flex-item-title">
|
||||
<div class="item-main">
|
||||
<div class="item-header">
|
||||
<div class="item-title">
|
||||
<a class="tw-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{.Title | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
|
||||
{{if .IsPull}}
|
||||
{{if (index $.CommitStatuses .PullRequest.ID)}}
|
||||
@@ -35,7 +35,7 @@
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="flex-item-body">
|
||||
<div class="item-body">
|
||||
<a class="index" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
|
||||
{{if eq $.listType "dashboard"}}
|
||||
{{.Repo.FullName}}#{{.Index}}
|
||||
@@ -136,7 +136,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{{if or .Assignees .NumComments}}
|
||||
<div class="flex-item-trailing">
|
||||
<div class="item-trailing">
|
||||
{{if .Assignees}}
|
||||
<div class="tw-text-text-light">
|
||||
{{range .Assignees}}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<div class="flex-list">
|
||||
<div class="flex-divided-list items-with-main">
|
||||
{{range .Repos}}
|
||||
<div class="flex-item">
|
||||
<div class="flex-item-leading">
|
||||
<div class="item">
|
||||
<div class="item-leading">
|
||||
{{if $.ShowRepoOwnerAvatar}}
|
||||
{{ctx.AvatarUtils.Avatar .Owner 24}}
|
||||
{{else}}
|
||||
{{template "repo/icon" .}}
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="flex-item-main">
|
||||
<div class="flex-item-header">
|
||||
<div class="flex-item-title">
|
||||
<div class="item-main">
|
||||
<div class="item-header">
|
||||
<div class="item-title">
|
||||
{{if and $.ShowRepoOwnerOnList .Owner}}
|
||||
<a class="tw-text-primary name" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/
|
||||
{{end}}
|
||||
@@ -34,7 +34,7 @@
|
||||
{{end}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-item-trailing muted-links">
|
||||
<div class="item-trailing muted-links">
|
||||
{{if .PrimaryLanguage}}
|
||||
<a class="flex-text-inline" href="?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}{{if $.TabName}}&tab={{$.TabName}}{{end}}">
|
||||
<i class="color-icon tw-mr-2" style="background-color: {{.PrimaryLanguage.Color}}"></i>
|
||||
@@ -55,7 +55,7 @@
|
||||
</div>
|
||||
{{$description := .DescriptionHTML ctx}}
|
||||
{{if $description}}
|
||||
<div class="flex-item-body">{{$description}}</div>
|
||||
<div class="item-body">{{$description}}</div>
|
||||
{{end}}
|
||||
{{if .Topics}}
|
||||
<div class="label-list">
|
||||
@@ -64,7 +64,7 @@
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="flex-item-body">{{ctx.Locale.Tr "org.repo_updated"}} {{DateUtils.TimeSince .UpdatedUnix}}</div>
|
||||
<div class="item-body">{{ctx.Locale.Tr "org.repo_updated"}} {{DateUtils.TimeSince .UpdatedUnix}}</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
|
||||
@@ -16,24 +16,24 @@
|
||||
</h4>
|
||||
<div class="ui attached segment">
|
||||
{{if .Secrets}}
|
||||
<div class="flex-list">
|
||||
<div class="flex-divided-list items-with-main">
|
||||
{{range .Secrets}}
|
||||
<div class="flex-item tw-items-center">
|
||||
<div class="flex-item-leading">
|
||||
<div class="item tw-items-center">
|
||||
<div class="item-leading">
|
||||
{{svg "octicon-key" 32}}
|
||||
</div>
|
||||
<div class="flex-item-main">
|
||||
<div class="flex-item-title">
|
||||
<div class="item-main">
|
||||
<div class="item-title">
|
||||
{{.Name}}
|
||||
</div>
|
||||
<div class="flex-item-body">
|
||||
<div class="item-body">
|
||||
{{if .Description}}{{.Description}}{{else}}-{{end}}
|
||||
</div>
|
||||
<div class="flex-item-body">
|
||||
<div class="item-body">
|
||||
******
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item-trailing">
|
||||
<div class="item-trailing">
|
||||
<span class="color-text-light-2">
|
||||
{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}}
|
||||
</span>
|
||||
|
||||
@@ -22,23 +22,23 @@
|
||||
{{ctx.Locale.Tr "user.block.list"}}
|
||||
</h4>
|
||||
<div class="ui attached segment">
|
||||
<div class="flex-list">
|
||||
<div class="flex-divided-list items-with-main">
|
||||
{{range .UserBlocks}}
|
||||
<div class="flex-item">
|
||||
<div class="flex-item-leading">
|
||||
<div class="item">
|
||||
<div class="item-leading">
|
||||
{{ctx.AvatarUtils.Avatar .Blockee}}
|
||||
</div>
|
||||
<div class="flex-item-main">
|
||||
<div class="flex-item-title">
|
||||
<div class="item-main">
|
||||
<div class="item-title">
|
||||
<a class="item" href="{{.Blockee.HomeLink}}">{{.Blockee.GetDisplayName}}</a>
|
||||
</div>
|
||||
{{if .Note}}
|
||||
<div class="flex-item-body">
|
||||
<div class="item-body">
|
||||
<i>{{ctx.Locale.Tr "user.block.note"}}:</i> {{.Note}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="flex-item-trailing">
|
||||
<div class="item-trailing">
|
||||
<button class="ui compact mini button show-modal" data-modal="#block-user-note-modal" data-modal-modal-blockee="{{.Blockee.Name}}" data-modal-modal-note="{{.Note}}">{{ctx.Locale.Tr "user.block.note.edit"}}</button>
|
||||
<form class="form-fetch-action" action="{{$.Link}}" method="post">
|
||||
<input type="hidden" name="action" value="unblock">
|
||||
|
||||
@@ -15,24 +15,24 @@
|
||||
</h4>
|
||||
<div class="ui attached segment">
|
||||
{{if .Variables}}
|
||||
<div class="flex-list">
|
||||
<div class="flex-divided-list items-with-main">
|
||||
{{range .Variables}}
|
||||
<div class="flex-item tw-items-center">
|
||||
<div class="flex-item-leading">
|
||||
<div class="item tw-items-center">
|
||||
<div class="item-leading">
|
||||
{{svg "octicon-pencil" 32}}
|
||||
</div>
|
||||
<div class="flex-item-main">
|
||||
<div class="flex-item-title">
|
||||
<div class="item-main">
|
||||
<div class="item-title">
|
||||
{{.Name}}
|
||||
</div>
|
||||
<div class="flex-item-body">
|
||||
<div class="item-body">
|
||||
{{if .Description}}{{.Description}}{{else}}-{{end}}
|
||||
</div>
|
||||
<div class="flex-item-body">
|
||||
<div class="item-body">
|
||||
{{.Data}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item-trailing">
|
||||
<div class="item-trailing">
|
||||
<span class="color-text-light-2">
|
||||
{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user