[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:
		
							parent
							
								
									44d00650ce
								
							
						
					
					
						commit
						ec935a16a3
					
				
					 5 changed files with 48 additions and 63 deletions
				
			
		| 
						 | 
				
			
			@ -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" .}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										28
									
								
								templates/shared/blocked_users_list.tmpl
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										28
									
								
								templates/shared/blocked_users_list.tmpl
									
										
									
									
									
										Normal 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>
 | 
			
		||||
| 
						 | 
				
			
			@ -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" .}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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" .}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue