[MODERATION] Modernize frontend (squash)

- Unify blocked users list.
- Use the new flex list classes for blocked users list to avoid using
the CSS helper classes and thereby be consistent in the design.
- Fix the modal by using the new modal class.
- Remove the icon in the modal as looks too big in the new design.
- Fix avatar not displaying as it was passing the context where the user
should've been passed.
- Don't use italics for 'Blocked since' text.
- Use namelink template to display the user's name and homelink.
This commit is contained in:
Gusted 2023-09-10 04:03:15 +02:00
parent 44d00650ce
commit ec935a16a3
No known key found for this signature in database
GPG key ID: FD821B732837125F
5 changed files with 48 additions and 63 deletions

View file

@ -14,27 +14,8 @@
<button type="submit" class="ui red button">{{.locale.Tr "user.block"}}</button>
</form>
</div>
<div class="ui bottom attached table segment blocked-users">
{{range .BlockedUsers}}
<div class="item gt-df gt-ac gt-fw">
{{ctx.AvatarUtils.Avatar $.Context . 48 "gt-mr-3 gt-mb-0"}}
<div class="gt-df gt-fc">
<a href="{{.HomeLink}}">{{.Name}}</a>
<i class="gt-mt-2">{{$.locale.Tr "settings.blocked_since" (DateTime "short" .CreatedUnix) | Safe}}</i>
</div>
<div class="gt-ml-auto content">
<form action="{{$.Link}}/unblock" method="post">
{{$.CsrfTokenHtml}}
<input type="hidden" name="user_id" value="{{.ID}}">
<button class="ui red button">{{$.locale.Tr "user.unblock"}}</button>
</form>
</div>
</div>
{{else}}
<div class="item">
<span class="text grey italic">{{$.locale.Tr "settings.blocked_users_none"}}</span>
</div>
{{end}}
</div>
<div class="ui attached segment">
{{template "shared/blocked_users_list" dict "locale" .locale "BlockedUsers" .BlockedUsers}}
</div>
</div>
{{template "org/settings/layout_footer" .}}

View file

@ -0,0 +1,28 @@
<div class="flex-list">
{{range .BlockedUsers}}
<div class="flex-item flex-item-center">
<div class="flex-item-leading">
{{ctx.AvatarUtils.Avatar . 48}}
</div>
<div class="flex-item-main">
<div class="flex-item-title">
{{template "shared/user/name" .}}
</div>
<div class="flex-item-body">
<span>{{$.locale.Tr "settings.blocked_since" (DateTime "short" .CreatedUnix) | Safe}}</span>
</div>
</div>
<div class="flex-item-trailing">
<form action="{{$.Link}}/unblock" method="post">
{{$.CsrfTokenHtml}}
<input type="hidden" name="user_id" value="{{.ID}}">
<button class="ui red button">{{$.locale.Tr "user.unblock"}}</button>
</form>
</div>
</div>
{{else}}
<div class="flex-item">
<span class="text grey italic">{{$.locale.Tr "settings.blocked_users_none"}}</span>
</div>
{{end}}
</div>

View file

@ -40,17 +40,17 @@
</div>
</div>
</div>
<div class="ui small basic delete modal" id="block-user">
<div class="ui icon header">
{{svg "octicon-blocked" 16 "blocked inside"}}
<div class="ui g-modal-confirm delete modal" id="block-user">
<div class="header">
{{$.locale.Tr "user.block_user"}}
</div>
<div class="content">
<p>{{$.locale.Tr "user.block_user.detail"}}</p>
<ul>
<li>{{$.locale.Tr "user.block_user.detail_1"}}</li>
<li>{{$.locale.Tr "user.block_user.detail_2"}}</li>
<li>{{$.locale.Tr "user.block_user.detail_3"}}</li>
<li>{{$.locale.Tr "user.block_user.detail_1"}}</li>
<li>{{$.locale.Tr "user.block_user.detail_2"}}</li>
<li>{{$.locale.Tr "user.block_user.detail_3"}}</li>
</ul>
</div>
{{template "base/modal_actions_confirm" .}}

View file

@ -1,31 +1,10 @@
{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings blocked_users")}}
<div class="user-setting-content">
<h4 class="ui top attached header">
{{.locale.Tr "settings.blocked_users"}}
</h4>
<div class="ui attached segment">
<div class="ui blocked-user list gt-mt-0">
{{range .BlockedUsers}}
<div class="item gt-df gt-ac">
{{ctx.AvatarUtils.Avatar $.Context . 28 "gt-mr-3"}}
<div class="gt-df gt-fc">
<a href="{{.HomeLink}}">{{.Name}}</a>
<i class="gt-mt-2">{{$.locale.Tr "settings.blocked_since" (DateTime "short" .CreatedUnix) | Safe}}</i>
</div>
<div class="gt-ml-auto content">
<form action="{{$.Link}}/unblock" method="post">
{{$.CsrfTokenHtml}}
<input type="hidden" name="user_id" value="{{.ID}}">
<button class="ui red button">{{$.locale.Tr "user.unblock"}}</button>
</form>
</div>
</div>
{{else}}
<div class="item">
<span class="text grey italic">{{$.locale.Tr "settings.blocked_users_none"}}</span>
</div>
{{end}}
</div>
</div>
{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings blocked-users")}}
<div class="user-setting-content">
<h4 class="ui top attached header">
{{.locale.Tr "settings.blocked_users"}}
</h4>
<div class="ui attached segment">
{{template "shared/blocked_users_list" dict "locale" .locale "BlockedUsers" .BlockedUsers}}
</div>
</div>
{{template "user/settings/layout_footer" .}}

View file

@ -167,20 +167,17 @@
}
.organization.teams .repositories .item,
.organization.teams .members .item,
.organization.settings .blocked-users .item {
.organization.teams .members .item {
padding: 10px 19px;
}
.organization.teams .repositories .item:not(:last-child),
.organization.teams .members .item:not(:last-child),
.organization.settings .blocked-users .item:not(:last-child) {
.organization.teams .members .item:not(:last-child) {
border-bottom: 1px solid var(--color-secondary);
}
.organization.teams .repositories .item .button,
.organization.teams .members .item .button,
.organization.settings .blocked-users .item button {
.organization.teams .members .item .button {
padding: 9px 10px;
margin: 0;
}