forgejo/templates/org/member/members.tmpl
wxiaoguang ffa4949eaa
Improve flex list UI (#26970)
1. There is already `gt-ac`, so no need to introduce `flex-item-center`
2. The `flex-item-baseline` and `.flex-item-icon svg { margin-top: 1px
}` seem to be a tricky patch, they don't resolve the root problem, and
still cause misalignment in some cases.
* The root problem is: the "icon" needs to align with the sibling
"title"
    * So, make the "icon" and the "title" both have the same height 
3. `flex-text-inline` could only be used if the element is really
"inline", otherwise its `vertical-align` would make the box size change.
In most cases, `flex-text-block` is good enough.


![image](https://github.com/go-gitea/gitea/assets/2114189/1b7acfc2-b1c7-4e9c-a983-2fa932026479)

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-09-08 13:57:18 +00:00

90 lines
3.5 KiB
Handlebars

{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content organization">
{{template "org/header" .}}
<div class="ui container">
{{template "base/alert" .}}
<div class="flex-list">
{{range .Members}}
{{$isPublic := index $.MembersIsPublicMember .ID}}
<div class="flex-item {{if $.PublicOnly}}gt-ac{{end}}">
<div class="flex-item-leading">
<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 48}}</a>
</div>
<div class="flex-item-main">
<div class="flex-item-title">
{{template "shared/user/name" .}}
{{if not $isPublic}}
<span class="ui basic tiny label">{{$.locale.Tr "org.members.private"}}</span>
{{end}}
</div>
{{if not $.PublicOnly}}
<div class="flex-item-body">
{{$.locale.Tr "org.members.member_role"}}
<strong class="flex-text-inline">{{if index $.MembersIsUserOrgOwner .ID}}{{svg "octicon-shield-lock"}} {{$.locale.Tr "org.members.owner"}}{{else}}{{$.locale.Tr "org.members.member"}}{{end}}</strong>
</div>
{{if $.IsOrganizationOwner}}
<div class="flex-item-body">
{{$.locale.Tr "admin.users.2fa"}}
<strong>
{{if index $.MembersTwoFaStatus .ID}}
<span class="text green">{{svg "octicon-check"}}</span>
{{else}}
{{svg "octicon-x"}}
{{end}}
</strong>
</div>
{{end}}
{{end}}
</div>
<div class="flex-item-trailing">
{{if or (eq $.SignedUser.ID .ID) $.IsOrganizationOwner}}
{{if $isPublic}}
<a class="ui tiny button link-action" href data-url="{{$.OrgLink}}/members/action/private?uid={{.ID}}">{{svg "octicon-eye-closed" 12 "icon"}}{{$.locale.Tr "org.members.public_helper"}}</a>
{{else}}
<a class="ui tiny button link-action" href data-url="{{$.OrgLink}}/members/action/public?uid={{.ID}}">{{svg "octicon-eye" 12 "icon"}}{{$.locale.Tr "org.members.private_helper"}}</a>
{{end}}
{{end}}
{{if eq $.SignedUser.ID .ID}}
<form>
<button class="ui red tiny button delete-button" data-modal-id="leave-organization"
data-url="{{$.OrgLink}}/members/action/leave" data-datauid="{{.ID}}"
data-name="{{.DisplayName}}"
data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.leave"}}</button>
</form>
{{else if $.IsOrganizationOwner}}
<form>
<button class="ui red tiny button delete-button" data-modal-id="remove-organization-member"
data-url="{{$.OrgLink}}/members/action/remove" data-datauid="{{.ID}}"
data-name="{{.DisplayName}}"
data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.remove"}}</button>
</form>
{{end}}
</div>
</div>
{{end}}
</div>
{{template "base/paginate" .}}
</div>
</div>
<div class="ui g-modal-confirm delete modal" id="leave-organization">
<div class="header">
{{$.locale.Tr "org.members.leave"}}
</div>
<div class="content">
<p>{{$.locale.Tr "org.members.leave.detail" `<span class="dataOrganizationName"></span>` | Safe}}</p>
</div>
{{template "base/modal_actions_confirm" .}}
</div>
<div class="ui g-modal-confirm delete modal" id="remove-organization-member">
<div class="header">
{{$.locale.Tr "org.members.remove"}}
</div>
<div class="content">
<p>{{$.locale.Tr "org.members.remove.detail" `<span class="name"></span>` `<span class="dataOrganizationName"></span>` | Safe}}</p>
</div>
{{template "base/modal_actions_confirm" .}}
</div>
{{template "base/footer" .}}