Add approval state labels to screenshots and package tiles

app/scss/packages.scss

@@ -27,6 +27,13 @@
 	}
 }
 
+.badge-tr {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	color: #ccc !important;;
+}
+
 .screenshot-add {
 	display: block !important;
 	width: 200px;

app/templates/base.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>{% block title %}title{% endblock %} - {{ config.USER_APP_NAME }}</title>
 	<link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css">
-	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=27">
+	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=28">
 	<link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
 	<link rel="shortcut icon" href="/favicon-16.png" sizes="16x16">
 	<link rel="icon" href="/favicon-128.png" sizes="128x128">

app/templates/macros/packagegridtile.html

@@ -9,6 +9,11 @@
 				{% if show_author %}<br />
 					<small>{{ package.author.display_name }}</small>
 				{% endif %}
+				{% if not package.approved %}
+					<span class="badge ml-1 {% if package.state == package.state.CHANGES_NEEDED %}bg-danger{% else %}bg-warning{% endif %}">
+						{{ package.state.value }}
+					</span>
+				{% endif %}
 			</h3>
 
 			<p>

app/templates/packages/screenshots.html

@@ -30,9 +30,14 @@
 							<img class="img-fluid" style="max-height: 64px;"
 									src="{{ ss.getThumbnailURL() }}" alt="{{ ss.title }}" />
 						</div>
-						<span class="col">
+						<div class="col">
 							{{ ss.title }}
-						</span>
+							{% if not ss.approved %}
+								<div class="text-muted">
+									Awaiting review
+								</div>
+							{%  endif %}
+						</div>
 						<form action="{{ ss.getDeleteURL() }}" method="POST" class="col-auto text-right" role="form">
 							<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 							<a class="btn btn-sm btn-primary" href="{{ ss.getEditURL() }}">

app/templates/packages/view.html

@@ -219,8 +219,9 @@
 						{% for ss in screenshots %}
 							{% if ss.approved or package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
 								<li>
-									<a href="{{ ss.url }}">
+									<a href="{{ ss.url }}" class="position-relative">
 										<img src="{{ ss.getThumbnailURL() }}" alt="{{ ss.title }}" />
+										<span class="badge bg-dark badge-tr">{{ _("Awaiting review") }}</span>
 									</a>
 								</li>
 							{% endif %}