WIP theme stuff for nodebb/nodebb#5232

less/flags.less

@@ -0,0 +1,15 @@
+.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;
+        }
+    }
+}

less/persona.less

@@ -17,6 +17,7 @@
 @import "footer";
 @import "posts_list";
 @import "register";
+@import "flags";
 
 @import "mobile";
 

templates/flags/detail.tpl

@@ -0,0 +1,47 @@
+<div class="row">
+	<div class="col-sm-4 col-md-3">
+		<!-- IMPORT partials/flags/quick-filters.tpl -->
+	</div>
+	<div class="col-sm-6 col-md-9">
+		<h2>
+			{target_readable}
+			<small><span class="timeago" title="{datetimeISO}"></span></small>
+		</h2>
+
+		<hr />
+
+		<div class="media">
+			<div class="media-left">
+				<a href="#">
+					<!-- IF target.user.picture -->
+					<img class="media-object avatar avatar-md" src="{target.user.picture}" alt="{target.user.username}" />
+					<!-- ELSE -->
+					<div class="media-object avatar avatar-md" style="background-color: {target.user.icon:bgColor}">{target.user.icon:text}</div>
+					<!-- ENDIF target.user.picture -->
+				</a>
+			</div>
+			<div class="media-body">
+				<h4 class="media-heading"><a href="{config.relative_path}/user/{target.user.userslug}">{target.user.username}</a></h4>
+				{target.content}
+			</div>
+		</div>
+
+		<hr />
+
+		<div class="row">
+			<div class="col-sm-6">
+				<form role="form">
+					<div class="form-group">
+						<label for="state">[[flags:state]]</label>
+						<select class="form-control" name="state">
+							<option value="open">[[flags:state-open]]</option>
+							<option value="wip">[[flags:state-wip]]</option>
+							<option value="resolved">[[flags:state-resolved]]</option>
+							<option value="rejected">[[flags:state-rejected]]</option>
+						</select>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+</div>

templates/flags/list.tpl

@@ -0,0 +1,47 @@
+<div class="row">
+	<div class="col-sm-4 col-md-3">
+		<!-- IMPORT partials/flags/quick-filters.tpl -->
+	</div>
+	<div class="col-sm-6 col-md-9">
+		<table class="table table-striped table-hover" component="flags/list">
+			<thead>
+				<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>
+				</tr>
+			</thead>
+			<tbody>
+				<!-- IF !flags.length -->
+				<tr>
+					<td colspan="4">
+						<div class="alert alert-success text-center">
+							[[flags:no-flags]]
+						</div>
+					</td>
+				</tr>
+				<!-- ENDIF !flags.length -->
+				<!-- BEGIN flags -->
+				<tr data-flag-id="{../flagId}">
+					<td><span class="label label-{../labelClass}">{../state}</span></td>
+					<td>
+						<a href="{config.relative_path}/flags/{../flagId}">
+							<strong>{../target_readable}</strong> &mdash; <span component="flags/list/description">{../description}</span>
+						</a>
+					</td>
+					<td>
+						<!-- IF ../reporter.picture -->
+						<img class="avatar avatar-sm" src="{../reporter.picture}" />
+						<!-- ELSE -->
+						<div class="avatar avatar-sm" style="background-color: {../reporter.icon:bgColor};">{../reporter.icon:text}</div>
+						<!-- ENDIF ../reporter.picture -->
+						{../reporter.username}
+					</td>
+					<td><span class="timeago" title="{../datetimeISO}"></span></td>
+				</tr>
+				<!-- END flags -->
+			</tbody>
+		</table>
+	</div>
+</div>

templates/partials/flags/quick-filters.tpl

@@ -0,0 +1,9 @@
+<div class="panel panel-default">
+	<div class="panel-heading">
+		<h3 class="panel-title">[[flags:quick-filters]]</h3>
+	</div>
+	<ul>
+		<li>foo</li>
+		<li>bar</li>
+	</ul>
+</div>