revamped ACP Flags interface, #3907

public/less/admin/manage/flags.less

@@ -1 +1,22 @@
+.flag-reporters {
+	font-size: 1.2rem;
 
+	ul {
+		padding-left: 0;
+
+		li {
+			list-style-type: none;
+
+			img, .user-icon {
+				.user-icon-style(18px, 1rem);
+				margin-right: 1rem;
+			}
+		}
+	}
+}
+
+.flag-post-body {
+	img, .user-icon {
+		.user-icon-style(24px, 1.5rem);
+	}
+}

public/src/admin/manage/flags.js

@@ -40,7 +40,7 @@ define('admin/manage/flags', [
 					return app.alertError(err.message);
 				}
 
-				$('.post-container').empty().text('No flagged posts!');
+				ajaxify.refresh();
 			});
 		});
 	}

src/views/admin/manage/flags.tpl

@@ -30,19 +30,26 @@
 
 			<div class="post-container" data-next="{next}">
 				<!-- IF !posts.length -->
+				<div class="alert alert-success">
 					No flagged posts!
+				</div>
 				<!-- ENDIF !posts.length -->
 
 				<!-- BEGIN posts -->
-				<div>
+				<div class="row">
+					<div class="col-sm-8">
 						<div class="panel panel-default" data-pid="{posts.pid}" data-tid="{posts.topic.tid}">
-						<div class="panel-body">
-							<a href="{config.relative_path}/user/{posts.user.userslug}">
-								<img title="{posts.user.username}" class="img-rounded user-img" src="{posts.user.picture}">
+							<div class="panel-body flag-post-body">
+								<a href="{config.relative_path}/user/{../user.userslug}">
+									<!-- IF ../user.picture -->
+									<img title="{posts.user.username}" src="{../user.picture}">
+									<!-- ELSE -->
+									<div class="user-icon" style="background-color: {../user.icon:bgColor};">{../user.icon:text}</div>
+									<!-- ENDIF ../user.picture -->
 								</a>
 
-							<a href="{config.relative_path}/user/{posts.user.userslug}">
-								<strong><span>{posts.user.username}</span></strong>
+								<a href="{config.relative_path}/user/{../user.userslug}">
+									<strong><span>{../user.username}</span></strong>
 								</a>
 								<div class="content">
 									<p>{posts.content}</p>
@@ -56,16 +63,30 @@
 								</small>
 							</div>
 						</div>
-
-					<span class="badge badge-warning"><i class="fa fa-flag"></i> {posts.flags}</span>
-					<br/>
+					</div>
+					<div class="col-sm-4">
+						<i class="fa fa-flag"></i> This post has been flagged {posts.flags} time(s):
+						<blockquote class="flag-reporters">
+							<ul>
 								<!-- BEGIN posts.flagReasons -->
-					<a target="_blank" href="{config.relative_path}/user/{../user.userslug}"><img class="user-img" src="{../user.picture}">{../user.username}</a>: "{../reason}" <br/>
+								<li>
+									<a target="_blank" href="{config.relative_path}/user/{../user.userslug}">
+										<!-- IF ../user.picture -->
+										<img src="{../user.picture}" />
+										<!-- ELSE -->
+										<div class="user-icon" style="background-color: {../user.icon:bgColor};">{../user.icon:text}</div>
+										<!-- ENDIF ../user.picture -->
+										{../user.username}
+									</a>: "{../reason}"
+								</li>
 								<!-- END posts.flagReasons -->
-					<br/>
-					<button class="btn btn-warning dismiss">Dismiss</button>
-					<button class="btn btn-danger delete">Delete</button>
-					<br/><br/>
+							</ul>
+						</blockquote>
+						<div class="btn-group">
+							<button class="btn btn-sm btn-success dismiss">Dismiss</button>
+							<button class="btn btn-sm btn-danger delete">Delete</button>
+						</div>
+					</div>
 				</div>
 				<!-- END posts -->
 			</div>