contentdb/app/templates/packages/screenshots.html

86 lines
2.4 KiB
HTML
Raw Normal View History

2020-12-06 04:35:25 +01:00
{% extends "base.html" %}
{% block title %}
Screenshots | {{ package.title }}
{% endblock %}
{% block content %}
<h1 class="mb-5"><a href="{{ package.getDetailsURL() }}">{{ package.title }}</a></h1>
{% if package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
<a href="{{ package.getNewScreenshotURL() }}" class="btn btn-primary float-right">
{{ _("Add Image") }}
</a>
{% endif %}
<h2 class="mt-0">Screenshots</h2>
<p class="mb-4">
{{ _("Topmost screenshot will be used as the package thumbnail.") }}
</p>
2020-12-06 04:35:25 +01:00
<ul class="list-group sortable">
{% for ss in package.screenshots %}
{% if ss.approved or package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
<li class="list-group-item" data-id="{{ ss.id }}">
<div class="row">
<div class="col-auto text-muted pr-2">
<i class="fas fa-bars"></i>
</div>
<div class="col-auto">
<img class="img-fluid" style="max-height: 64px;"
src="{{ ss.getThumbnailURL() }}" alt="{{ ss.title }}" />
</div>
<span class="col">
{{ ss.title }}
</span>
2020-12-06 05:30:47 +01:00
<form action="{{ ss.getDeleteURL() }}" method="POST" class="col-auto text-right" role="form">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
2020-12-06 04:35:25 +01:00
<a class="btn btn-sm btn-primary" href="{{ ss.getEditURL() }}">
<i class="fas fa-edit"></i>
</a>
2020-12-06 05:30:47 +01:00
<button type="submit" class="btn btn-sm btn-danger ml-2">
<i class="fas fa-trash"></i>
</button>
</form>
2020-12-06 04:35:25 +01:00
</div>
</li>
{% endif %}
2020-12-06 05:07:51 +01:00
{% else %}
<li class="list-group-item">
<i>No screenshots.</i>
</li>
2020-12-06 04:35:25 +01:00
{% 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="" />
2020-12-06 05:07:51 +01:00
<input type="submit" value="{{ _("Save Order") }}" class="btn btn-primary">
2020-12-06 04:35:25 +01:00
</form>
<noscript>
<p class="alert alert-warning mt-5">
{{ _("Reordering requires JavaScript.") }}
</p>
</noscript>
{% endblock %}
{% block scriptextra %}
<script src="/static/jquery-ui.min.js"></script>
<script>
function update() {
const elements = Array.from(document.getElementsByClassName("sortable")[0].children);
const ids = elements.map(x => x.dataset.id).filter(x => x);
$("input[name='order']").val(ids.join(","))
}
update();
$(function() {
$(".sortable").sortable({
update: update
});
});
</script>
{% endblock %}