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:
wxiaoguang
2026-05-03 00:10:52 +08:00
committed by GitHub
parent f049668c21
commit 134e86c78c
54 changed files with 560 additions and 557 deletions
+11 -11
View File
@@ -26,36 +26,36 @@
</button>
</form>
</div>
<div id="keys-ssh" class="flex-list">
<div class="flex-item">
<div id="keys-ssh" class="flex-divided-list items-with-main">
<div class="item">
<p>
{{ctx.Locale.Tr "settings.ssh_desc"}}<br>
{{ctx.Locale.Tr "settings.ssh_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/connecting-to-github-with-ssh" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/troubleshooting-ssh"}}
</p>
</div>
{{if .DisableSSH}}
<div class="flex-item">
<div class="item">
{{ctx.Locale.Tr "settings.ssh_signonly"}}
</div>
{{end}}
{{range $index, $key := .Keys}}
<div class="flex-item">
<div class="flex-item-leading">
<div class="item">
<div class="item-leading">
<span class="{{if .HasRecentActivity}}tw-text-green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
</div>
<div class="flex-item-main">
<div class="item-main">
{{if .Verified}}
<div class="flex-item-title flex-text-block" data-tooltip-content="{{ctx.Locale.Tr "settings.ssh_key_verified_long"}}">{{svg "octicon-verified"}}{{ctx.Locale.Tr "settings.ssh_key_verified"}}</div>
<div class="item-title flex-text-block" data-tooltip-content="{{ctx.Locale.Tr "settings.ssh_key_verified_long"}}">{{svg "octicon-verified"}}{{ctx.Locale.Tr "settings.ssh_key_verified"}}</div>
{{end}}
<div class="flex-item-title">{{.Name}}</div>
<div class="flex-item-body">
<div class="item-title">{{.Name}}</div>
<div class="item-body">
{{.Fingerprint}}
</div>
<div class="flex-item-body">
<div class="item-body">
<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}}{{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="tw-text-green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}</i>
</div>
</div>
<div class="flex-item-trailing">
<div class="item-trailing">
<button class="ui red tiny button delete-button{{if index $.ExternalKeys $index}} disabled{{end}}" data-modal-id="delete-ssh" data-url="{{$.Link}}/delete?type=ssh" data-id="{{.ID}}"{{if index $.ExternalKeys $index}} title="{{ctx.Locale.Tr "settings.ssh_externally_managed"}}"{{end}}>
{{ctx.Locale.Tr "settings.delete_key"}}
</button>