feat: theme changes for nodebb/nodebb#8510

Squashed commit of the following:

commit bbafa08bd7e1753af5adc50e1b01a6939d154907
Author: Julian Lam <julian@nodebb.org>
Date:   Fri Jul 17 15:52:31 2020 -0400

    add trash can icon to delete target button

commit 0e585109e5d19aad31dde13a084dec78b1cc533f
Author: Julian Lam <julian@nodebb.org>
Date:   Fri Jul 17 15:44:29 2020 -0400

    removed refunct 'reporter' dropdown in quick actions

commit 7bc2c0bdbcb42fa322c82c1808cdbbfa7419b1fd
Author: Julian Lam <julian@nodebb.org>
Date:   Fri Jul 17 15:14:35 2020 -0400

    fix: margin in flag report bq

commit eb59fc455c63f67d51f2ae12f06208e5e09a7afc
Author: Julian Lam <julian@nodebb.org>
Date:   Fri Jul 17 15:08:40 2020 -0400

    wip: nodebb/nodebb#8510

less/flags.less

@@ -1,15 +1,7 @@
 .page-flags {
     [component="flags/list"] {
-        td {
-            max-width: 300px;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-
-        [component="flags/list/description"] {
-            font-style: italic;
-            color: @gray-light;
+        tr {
+            .pointer;
         }
     }
 
@@ -17,6 +9,13 @@
         .pointer;
     }
 
+    [component="flag/reports"] {
+        blockquote {
+            margin: 0;
+            margin-top: 1rem;
+        }
+    }
+
     [component="flag/notes"] {
         .media {
             padding: 1rem;

templates/flags/detail.tpl

@@ -48,24 +48,17 @@
 		<div class="row">
 			<div class="col-sm-6">
 				<form role="form" id="attributes">
-					<div class="form-group row">
-						<div class="col-sm-6">
-							<h2 class="h4">[[flags:reporter]]</h2>
-							<div>
-								{buildAvatar(reporter, "sm", false, "media-object")}
-								<a href="{config.relative_path}/user/{reporter.userslug}">{reporter.username}</a>
-							</div>
-						</div>
-						<div class="col-sm-6">
-							<h2 class="h4">[[flags:reported-at]]</h2>
-							<p>
-								{datetimeISO}
-							</p>
-						</div>
-					</div>
 					<div class="form-group">
-						<h2 class="h4">[[flags:description]]</h2>
-						<blockquote>{description}</blockquote>
+						<h2 class="h4">[[flags:reports]]</h2>
+						<ul class="list-group" component="flag/reports">
+							{{{ each reports }}}
+							<li class="list-group-item">
+								<a href="{config.relative_path}/user/{reporter.userslug}">{buildAvatar(./reporter, "sm", false)}</a>
+								&ndash; <span class="timeago" title="{./timestampISO}"></span>
+								<blockquote><em>{./value}</em></blockquote>
+							</li>
+							{{{ end }}}
+						</ul>
 					</div>
 					<div class="form-group">
 						<h2 class="h4" for="state">[[flags:state]]</h2>
@@ -137,10 +130,10 @@
 
 				{{{ if type_bool.post }}}
 				{{{ if !target.deleted}}}
-				<a class="btn btn-danger btn-block" href="#" data-action="delete-post">[[flags:delete-post]]</a>
+				<a class="btn btn-danger btn-block" href="#" data-action="delete-post"><i class="fa fa-trash"></i> [[flags:delete-post]]</a>
 				{{{ else }}}
-				<a class="btn btn-danger btn-block" href="#" data-action="purge-post">[[flags:purge-post]]</a>
-				<a class="btn btn-success btn-block" href="#" data-action="restore-post">[[flags:restore-post]]</a>
+				<a class="btn btn-danger btn-block" href="#" data-action="purge-post"><i class="fa fa-trash"></i> [[flags:purge-post]]</a>
+				<a class="btn btn-success btn-block" href="#" data-action="restore-post"><i class="fa fa-reply"></i><i class="fa fa-trash"></i> [[flags:restore-post]]</a>
 				{{{ end }}}
 				{{{ end }}}
 
@@ -165,18 +158,6 @@
 				</div>
 				{{{ end }}}
 
-				<div class="btn-group btn-block">
-					<button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-						<i class="fa fa-user"></i>
-						[[flags:reporter]]
-						<span class="caret"></span>
-					</button>
-					<ul class="dropdown-menu">
-						<li><a href="{config.relative_path}/uid/{reporter.uid}">[[flags:view-profile]]</a></li>
-						<li><a href="#" data-chat="{reporter.uid}">[[flags:start-new-chat]]</a></li>
-					</ul>
-				</div>
-
 				<hr />
 
 				<h2 class="h4">[[flags:history]]</h2>

templates/flags/list.tpl

@@ -30,8 +30,8 @@
 				<tr>
 					<th>[[flags:state]]</th>
 					<th></th>
-					<th><span class="hidden-xs">[[flags:reporter]] </span><i class="fa fa-user-plus"></i></th>
-					<th><span class="hidden-xs">[[flags:reported-at]] </span><i class="fa fa-clock-o"></i></th>
+					<th><span class="hidden-xs">[[flags:reports]] </span><i class="fa fa-user-plus"></i></th>
+					<th><span class="hidden-xs">[[flags:first-reported]] </span><i class="fa fa-clock-o"></i></th>
 				</tr>
 			</thead>
 			<tbody>
@@ -49,12 +49,11 @@
 					<td><span class="label label-{../labelClass}">[[flags:state-{../state}]]</span></td>
 					<td>
 						<a href="{config.relative_path}/flags/{../flagId}">
-							<strong>{../target_readable}</strong> &mdash; <span component="flags/list/description">{../description}</span>
+							<strong>{../target_readable}</strong>
 						</a>
 					</td>
 					<td>
-						{buildAvatar(../reporter, "sm")}
-						{../reporter.username}
+						{./heat}
 					</td>
 					<td><span class="timeago" title="{../datetimeISO}"></span></td>
 				</tr>