From 78b5986027354a0ac6e3a9c9a891ef5a806acfb6 Mon Sep 17 00:00:00 2001
From: rubenwardy <rw@rubenwardy.com>
Date: Thu, 1 Jun 2023 17:48:59 +0100
Subject: [PATCH] Add client preview to screenshots page

---
 app/blueprints/packages/screenshots.py        |   3 -
 app/public/static/minetest_client_buttons.png | Bin 0 -> 750 bytes
 app/templates/base.html                       |   2 +-
 app/templates/packages/screenshots.html       |  69 ++++++++++++------
 4 files changed, 49 insertions(+), 25 deletions(-)
 create mode 100644 app/public/static/minetest_client_buttons.png

diff --git a/app/blueprints/packages/screenshots.py b/app/blueprints/packages/screenshots.py
index 1912b35b..31aa1c44 100644
--- a/app/blueprints/packages/screenshots.py
+++ b/app/blueprints/packages/screenshots.py
@@ -53,9 +53,6 @@ def screenshots(package):
 	if not package.checkPerm(current_user, Permission.ADD_SCREENSHOTS):
 		return redirect(package.getURL("packages.view"))
 
-	if package.screenshots.count() == 0:
-		return redirect(package.getURL("packages.create_screenshot"))
-
 	form = EditPackageScreenshotsForm(obj=package)
 	form.cover_image.query = package.screenshots
 
diff --git a/app/public/static/minetest_client_buttons.png b/app/public/static/minetest_client_buttons.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f77ca83b8abb403130d672cab11f3410a2046bc
GIT binary patch
literal 750
zcmeAS@N?(olHy`uVBq!ia0vp^NkFX4!3-p~=&YT=z`!UH;1l8s<jTp(Y1jy9X=!O|
zYwPIf=<4d~>FMd~>l+vt7#bQH85tQH8=IJzn3|fJnVFfJn_E~|SXR4OSy@>FfxnuK
zjg76Xt(~2ny}iAIgM*`^qmz@93lKzlySlo%xw*N!yL)(ec*dG|0YRLpHxR^|`2azJ
znNNbbFAyY}`zBiW0YQ?be=-nR1pq-%TtJFdK#FxB5TsfM0YREgP?~LUIuO}~06~Ub
zC=g`Yhh{p20YR2Sc(!ABwo^ooQ)I4lWUfn8aBx(fOLV?#biP|mfm>{$du*XcT#-k7
zv1fd-S3-$bVySmhnNM=LZ{aGFrh+L8CiiW-YIFVGHKiLoFM#1Q)zif>B;xSh=^OnH
z8wj-R*N9Ensl~*`QhifUSBS?)fhGUcl|@~vgt(a%6yqAj9YXhRXpm)7SIYCuZeQZ`
zby7t7@6+|=mbWjO-OF8U@a<}SRJZZ{h33^q=Y8MuTTFB6EWUuijWZcsTt(-fRSsM5
zC|g&cN>`ws=eybgcZEj=)%$*|_RwBsuvIapSloeA!?G!z--XAD<zjG0(}|*x>FVr>
zb*ci=^+z@eh1?75SoHlyiq5k$rbm+|?qoZn>EUv_>=px)I)CqKjT_w^YjrMddz%va
zsMgZyq{(!Hty)u-q)LjOUp7szd-Y<aqTIlhT?+kEe7)5^_ZeM%73-lhN43Nzd}A;B
z&J*4<mh|m?v7+!_5o5vhQod=cC)lLsUQ(0N>~uXIxp?ypW&3!`M>g6Dxii$vyxp|_
z?e^WOw1vaaahhTYj}?RAo-IdhyeCFTT-vcXh<%}VpSTr6VKr-$*IN_W^9oskh7H*)
z0&H>B-z5_4F9iPm<m|^R`E+5@_O`!G4MsP5x^@XZyRYP=cXUnb;(N399jakIU%bw<
UO4&3Dm~a_9UHx3vIVCg!08R-KlmGw#

literal 0
HcmV?d00001

diff --git a/app/templates/base.html b/app/templates/base.html
index 0d5a9928..9055dd67 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -16,7 +16,7 @@
 	{%- endif %}
 
 	<link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css">
-	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=38">
+	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=39">
 	<link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
 
 	{% if noindex -%}
diff --git a/app/templates/packages/screenshots.html b/app/templates/packages/screenshots.html
index 3cdc2304..a52221f7 100644
--- a/app/templates/packages/screenshots.html
+++ b/app/templates/packages/screenshots.html
@@ -13,12 +13,9 @@
 	{% endif %}
 	<h2 class="mt-0">{{ _("Screenshots") }}</h2>
 
-	<p class="mb-4">
-		{{ _("Topmost screenshot will be used as the package thumbnail.") }}
-	</p>
-
 	<ul class="list-group sortable">
-		{% for ss in package.screenshots %}
+		{% set screenshots = package.screenshots.all() %}
+		{% for ss in screenshots %}
 			{% if ss.approved or package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
 				<li class="list-group-item" data-id="{{ ss.id }}">
 					<div class="row">
@@ -74,28 +71,58 @@
 		{% endfor %}
 	</ul>
 
-	<form action="" method="POST" class="form mt-4" role="form">
-		<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-		<input type="hidden" name="order" value="" />
-		<input type="submit" value="{{ _('Save Order') }}" class="btn btn-primary">
-	</form>
+	{% if screenshots %}
+		<form action="" method="POST" class="form mt-4" role="form">
+			<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+			<input type="hidden" name="order" value="" />
+			<input type="submit" value="{{ _('Save Order') }}" class="btn btn-primary">
+		</form>
 
-	<noscript>
-		<p class="alert alert-warning mt-5">
-			{{ _("Reordering requires JavaScript.") }}
-		</p>
-	</noscript>
+		<noscript>
+			<p class="alert alert-warning mt-5">
+				{{ _("Reordering requires JavaScript.") }}
+			</p>
+		</noscript>
+	{% endif %}
+
+	<h2 id="client-preview">{{ _("Client Preview") }}</h2>
+	<p class="mb-4">
+		{{ _("The first screenshot in the list above will be the package thumbnail.") }}
+	</p>
+	<div class="client-preview d-flex flex-row align-items-center">
+		<img class="mt-thumb" src="{{ package.getThumbnailOrPlaceholder(1) }}" alt="{{ _('Thumbnail') }}">
+		<div class="flex-grow desc align-self-stretch">
+			<p>
+				<span class="title">{{ package.title }}</span> by {{ package.author.username }}
+			</p>
+			<p>
+				{% if package.state.name == 'WORK_IN_PROGRESS' %}
+					Work in Progress.
+				{% endif %}
+				{{ package.short_desc }}
+			</p>
+		</div>
+		<div>
+			<img src="/static/minetest_client_buttons.png" alt="Install">
+		</div>
+	</div>
 
 	<h2>{{ _("Cover Image") }}</h2>
 
-	{% from "macros/forms.html" import render_submit_field, render_field %}
-	<form action="" method="POST" class="form" role="form">
-		{{ form.hidden_tag() }}
+	{% if screenshots %}
+		{% from "macros/forms.html" import render_submit_field, render_field %}
+		<form action="" method="POST" class="form" role="form">
+			{{ form.hidden_tag() }}
 
-		{{ render_field(form.cover_image, tabindex=220) }}
+			{{ render_field(form.cover_image, tabindex=220) }}
 
-		{{ render_submit_field(form.submit, tabindex=280) }}
-	</form>
+			{{ render_submit_field(form.submit, tabindex=280) }}
+		</form>
+	{% else %}
+		<p class="text-muted">
+			<i>{{ _("No screenshots.") }}</i>
+		</p>
+	{% endif %}
 
 	<h2>{{ _("Videos") }}</h2>
 	<p>