[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.

templates/org/settings/blocked_users.tmpl

@@ -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">
+	<div class="ui attached segment">
-		{{range .BlockedUsers}}
+		{{template "shared/blocked_users_list" dict "locale" .locale "BlockedUsers" .BlockedUsers}}
-			<div class="item gt-df gt-ac gt-fw">
+	</div>
-				{{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>
 {{template "org/settings/layout_footer" .}}

templates/shared/blocked_users_list.tmpl

@@ -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>

templates/user/profile.tmpl

@@ -40,17 +40,17 @@
 		</div>
 	</div>
 </div>
-<div class="ui small basic delete modal" id="block-user">
+
-	<div class="ui icon header">
+<div class="ui g-modal-confirm delete modal" id="block-user">
-		{{svg "octicon-blocked" 16 "blocked inside"}}
+	<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_1"}}</li>
-				<li>{{$.locale.Tr "user.block_user.detail_2"}}</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_3"}}</li>
 		</ul>
 	</div>
 	{{template "base/modal_actions_confirm" .}}

templates/user/settings/blocked_users.tmpl

@@ -1,31 +1,10 @@
-{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings blocked_users")}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings blocked-users")}}
-	<div class="user-setting-content">
+<div class="user-setting-content">
-		<h4 class="ui top attached header">
+	<h4 class="ui top attached header">
-			{{.locale.Tr "settings.blocked_users"}}
+		{{.locale.Tr "settings.blocked_users"}}
-		</h4>
+	</h4>
-		<div class="ui attached segment">
+	<div class="ui attached segment">
-			<div class="ui blocked-user list gt-mt-0">
+		{{template "shared/blocked_users_list" dict "locale" .locale "BlockedUsers" .BlockedUsers}}
-				{{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>
 	</div>
+</div>
 {{template "user/settings/layout_footer" .}}

web_src/css/org.css

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