mirror of
https://github.com/minetest/contentdb.git
synced 2025-01-03 03:37:28 +01:00
Redesign package page, add gallery
This commit is contained in:
rubenwardy
parent
2a82c08d8b
commit
2866589109
17
app/public/static/gallery.js
Normal file
17
app/public/static/gallery.js
Normal file
@ -0,0 +1,17 @@
|
||||
// @author rubenwardy
|
||||
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
|
||||
|
||||
window.addEventListener("load", event => {
|
||||
document.querySelectorAll(".gallery").forEach(gallery => {
|
||||
const primary = gallery.querySelector(".primary-image img");
|
||||
const images = gallery.querySelectorAll("a[data-image]");
|
||||
|
||||
images.forEach(image => {
|
||||
const imageFullUrl = image.getAttribute("data-image");
|
||||
image.removeAttribute("href");
|
||||
image.addEventListener("click", event => {
|
||||
primary.src = imageFullUrl;
|
||||
})
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,35 +1,21 @@
|
||||
.gallery {
|
||||
.gallery-thumbnails {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 2em;
|
||||
margin: 0;
|
||||
padding: 0.5rem 0;
|
||||
overflow: auto hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
li, li a {
|
||||
li {
|
||||
display: block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 5px;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
position: relative;
|
||||
|
||||
&:hover img {
|
||||
&:hover img, .active img {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,14 +11,15 @@
|
||||
<meta name="og:title" content="{{ package.title }}"/>
|
||||
<meta name="og:description" content="{{ package.short_desc }}"/>
|
||||
<meta name="description" content="{{ package.short_desc }}"/>
|
||||
<meta name="og:url" content="{{ package.getURL("packages.view", absolute=True) }}"/>
|
||||
<meta name="og:url" content="{{ package.getURL('packages.view', absolute=True) }}"/>
|
||||
{% if package.getMainScreenshotURL() %}
|
||||
<meta name="og:image" content="{{ package.getMainScreenshotURL(absolute=True) }}"/>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block scriptextra %}
|
||||
<script src="/static/video_embed.js"></script>
|
||||
<script async src="/static/video_embed.js"></script>
|
||||
<script async src="/static/gallery.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% macro render_license(license) %}
|
||||
@ -31,7 +32,7 @@
|
||||
|
||||
{% block download_btn %}
|
||||
{% if release %}
|
||||
<a class="btn btn-block btn-download" rel="nofollow" download="{{ release.getDownloadFileName() }}"
|
||||
<a class="btn btn-block btn-lg btn-download" rel="nofollow" download="{{ release.getDownloadFileName() }}"
|
||||
href="{{ package.getURL('packages.download') }}">
|
||||
<div>
|
||||
{{ _("Download") }}
|
||||
@ -60,7 +61,7 @@
|
||||
{{ 0 / 0 }}
|
||||
{% endif %}
|
||||
|
||||
<p class="text-center mt-1 mb-4">
|
||||
<p class="text-center mt-1 mb-0">
|
||||
<a href="{{ installing_url }}">
|
||||
<small>
|
||||
<i class="fas fa-question-circle mr-1"></i>
|
||||
@ -83,15 +84,131 @@
|
||||
{% elif not package.media_license.is_foss %}
|
||||
{% set package_warning=_("Non-free media") %}
|
||||
{% endif %}
|
||||
<main>
|
||||
{% set cover_image = package.cover_image.url or package.getMainScreenshotURL() %}
|
||||
<header class="jumbotron pb-3"
|
||||
style="background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)), url('{{ cover_image }}');
|
||||
<style>
|
||||
.bg-banner {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;">
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 65vh;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
{% set cover_image = package.cover_image.url or package.getMainScreenshotURL() %}
|
||||
{% if cover_image %}
|
||||
<div style="position:relative;">
|
||||
<div class="bg-banner" style="background: linear-gradient(rgba(34, 34, 34, 0.7), rgba(34, 34, 34, 1)), url('{{ cover_image }}');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<header class="container pt-3 mb-4">
|
||||
<div class="row align-items-center">
|
||||
<h1 class="col my-0 display-4">
|
||||
{{ package.title }}
|
||||
</h1>
|
||||
|
||||
<div class="col-md-3 text-right">
|
||||
{% if package.type == package.type.GAME %}
|
||||
<a href="{{ package.getURL('packages.game_hub') }}" class="btn btn-lg btn-block btn-primary">
|
||||
{{ _("View content for game") }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if not package.approved %}
|
||||
<section class="my-4 pb-3" style="border-bottom: 1px solid rgba(0,0,0,0.5);">
|
||||
<div class="container">
|
||||
<div class="btn-group float-right mb-4">
|
||||
{% from "macros/package_approval.html" import render_banners %}
|
||||
{{ render_banners(package, current_user, topic_error, topic_error_lvl, conflicting_modnames) }}
|
||||
|
||||
{% if review_thread and review_thread.checkPerm(current_user, "SEE_THREAD") %}
|
||||
<h2>{% if review_thread.private %}🔒{% endif %} {{ review_thread.title }}</h2>
|
||||
{% if review_thread.private %}
|
||||
<p><i>
|
||||
{{ _("This thread is only visible to its creator, package maintainers, users of Approver rank or above, and @mentioned users.") }}
|
||||
</i></p>
|
||||
{% endif %}
|
||||
|
||||
{% from "macros/threads.html" import render_thread %}
|
||||
{{ render_thread(review_thread, current_user) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<section class="container mb-4">
|
||||
<div class="row">
|
||||
{% set screenshots = package.screenshots.all() %}
|
||||
{% if screenshots or package.checkPerm(current_user, "ADD_SCREENSHOTS") or package.video_url %}
|
||||
<div id="packageGallery" class="col-md-9 carousel slide my-0" data-ride="carousel" data-interval="7500">
|
||||
<div class="carousel-inner">
|
||||
{% for ss in screenshots %}
|
||||
<div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
|
||||
<a href="{{ ss.url }}">
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<img class="embed-responsive-item" src="{{ ss.url }}"
|
||||
alt="{{ ss.title }}">
|
||||
</div>
|
||||
<div class="carousel-caption text-shadow">
|
||||
<h3 class="my-0">
|
||||
{{ ss.title }}
|
||||
</h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<a class="carousel-control-prev" href="#packageGallery" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">{{ _("Previous") }}</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#packageGallery" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">{{ _("Next") }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<ol class="gallery-thumbnails">
|
||||
{% if package.video_url %}
|
||||
<li>
|
||||
<a href="{{ package.video_url }}" class="video-embed">
|
||||
<i class="fas fa-play"></i>
|
||||
<div class="label">
|
||||
<i class="fas fa-external-link-square-alt"></i>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if screenshots or package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
|
||||
{% for ss in screenshots %}
|
||||
<li data-target="#packageGallery" data-slide-to="{{ loop.index - 1 }}" {% if loop.index == 1 %}class="active"{% endif %}>
|
||||
<img src="{{ ss.getThumbnailURL() }}" alt="{{ ss.title }}" />
|
||||
{% if not ss.approved %}
|
||||
<span class="badge bg-dark badge-tr">{{ _("Awaiting review") }}</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% else %}
|
||||
<li>
|
||||
<a href="{{ package.getURL('packages.create_screenshot') }}">
|
||||
<i class="fas fa-plus screenshot-add"></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ol>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
{% else %}
|
||||
<div class="col">
|
||||
{% endif %}
|
||||
<div class="btn-group btn-group-sm mb-3">
|
||||
{% if package.checkPerm(current_user, "EDIT_PACKAGE") %}
|
||||
<a class="btn btn-primary" href="{{ package.getURL('packages.create_edit') }}">
|
||||
<i class="fas fa-pen mr-1"></i>
|
||||
@ -111,15 +228,9 @@
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<h1 class="display-3">
|
||||
{{ package.title }}
|
||||
</h1>
|
||||
|
||||
<p class="lead">
|
||||
{{ package.short_desc }}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
{% if package.dev_state.name == "LOOKING_FOR_MAINTAINER" or package.dev_state.name == "DEPRECATED" %}
|
||||
<span class="badge badge-warning" title="{{ package.dev_state.get_desc() }}">
|
||||
@ -154,136 +265,13 @@
|
||||
</a>
|
||||
{% endfor %}
|
||||
</p>
|
||||
|
||||
<div class="info-row row" style="margin-top: 2rem;">
|
||||
<div class="btn-group-horizontal col">
|
||||
<a class="btn" href="{{ url_for('users.profile', username=package.author.username) }}" title="{{ _("Author") }}">
|
||||
<img src="{{ package.author.getProfilePicURL() }}" style="max-height: 1em; filter: none">
|
||||
<span class="count">
|
||||
{{ package.author.display_name }}
|
||||
</span>
|
||||
</a>
|
||||
{% if release %}
|
||||
<a class="btn" rel="nofollow" href="{{ package.getURL("packages.download") }}" title="{{ _("Downloads") }}"
|
||||
download="{{ release.getDownloadFileName() }}">
|
||||
<i class="fas fa-download"></i>
|
||||
<span class="count">{{ package.downloads }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
<a class="btn" href="{{ url_for('threads.list_all', pid=package.id) }}" title="{{ _("Threads") }}">
|
||||
<i class="fas fa-comment-alt"></i>
|
||||
<span class="count">{{ threads | length }}</span>
|
||||
</a>
|
||||
<a class="btn" href="#reviews" title="{{ _("Reviews") }}">
|
||||
<i class="fas fa-star-half-alt"></i>
|
||||
<span class="count">
|
||||
+{{ package.reviews | selectattr("recommends") | list | length }}
|
||||
/
|
||||
-{{ package.reviews | rejectattr("recommends") | list | length }}
|
||||
</span>
|
||||
</a>
|
||||
{% if package.website %}
|
||||
<a class="btn" href="{{ package.website }}">
|
||||
<i class="fas fa-globe-europe"></i>
|
||||
<span class="count">{{ _("Website") }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if package.repo %}
|
||||
<a class="btn" href="{{ package.repo }}">
|
||||
<i class="fas fa-code"></i>
|
||||
<span class="count">{{ _("Source") }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if package.forums %}
|
||||
<a class="btn" href="https://forum.minetest.net/viewtopic.php?t={{ package.forums }}">
|
||||
<i class="fas fa-comments"></i>
|
||||
<span class="count">{{ _("Forums") }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if package.issueTracker %}
|
||||
<a class="btn" href="{{ package.issueTracker }}">
|
||||
<i class="fas fa-bug"></i>
|
||||
<span class="count">{{ _("Issue Tracker") }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if not package.approved %}
|
||||
<section class="my-4 pb-3" style="border-bottom: 1px solid rgba(0,0,0,0.5);">
|
||||
<div class="container">
|
||||
{% from "macros/package_approval.html" import render_banners %}
|
||||
{{ render_banners(package, current_user, topic_error, topic_error_lvl, conflicting_modnames) }}
|
||||
|
||||
{% if review_thread and review_thread.checkPerm(current_user, "SEE_THREAD") %}
|
||||
<h2>{% if review_thread.private %}🔒{% endif %} {{ review_thread.title }}</h2>
|
||||
{% if review_thread.private %}
|
||||
<p><i>
|
||||
{{ _("This thread is only visible to its creator, package maintainers, users of Approver rank or above, and @mentioned users.") }}
|
||||
</i></p>
|
||||
{% endif %}
|
||||
|
||||
{% from "macros/threads.html" import render_thread %}
|
||||
{{ render_thread(review_thread, current_user) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<div class="container d-block d-md-none">
|
||||
{{ self.download_btn() }}
|
||||
</div>
|
||||
|
||||
<section class="container mt-4">
|
||||
<section class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-9" style="padding-right: 45px;">
|
||||
{% set screenshots = package.screenshots.all() %}
|
||||
|
||||
{% if package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
|
||||
<a href="{{ package.getURL('packages.screenshots') }}" class="btn btn-primary float-right">
|
||||
<i class="fas fa-images mr-1"></i>
|
||||
{{ _("Edit") }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if screenshots or package.checkPerm(current_user, "ADD_SCREENSHOTS") or package.video_url %}
|
||||
<ul class="gallery">
|
||||
{% if package.video_url %}
|
||||
<li>
|
||||
<a href="{{ package.video_url }}" class="video-embed">
|
||||
<i class="fas fa-play"></i>
|
||||
<div class="label">
|
||||
<i class="fas fa-external-link-square-alt"></i>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if screenshots or package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
|
||||
{% for ss in screenshots %}
|
||||
{% if ss.approved or package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
|
||||
<li>
|
||||
<a href="{{ ss.url }}" class="gallery-image">
|
||||
<img src="{{ ss.getThumbnailURL() }}" alt="{{ ss.title }}" />
|
||||
{% if not ss.approved %}
|
||||
<span class="badge bg-dark badge-tr">{{ _("Awaiting review") }}</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<li>
|
||||
<a href="{{ package.getURL('packages.create_screenshot') }}">
|
||||
<i class="fas fa-plus screenshot-add"></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{% if package.desc %}
|
||||
<article class="markdown panel mb-5">
|
||||
{{ package.desc | markdown }}
|
||||
@ -296,7 +284,7 @@
|
||||
{% if current_user.is_authenticated %}
|
||||
{% if has_review %}
|
||||
<p>
|
||||
<a class="btn btn-primary" href="{{ package.getURL("packages.review") }}">
|
||||
<a class="btn btn-primary" href="{{ package.getURL('packages.review') }}">
|
||||
{{ _("Edit Review") }}
|
||||
</a>
|
||||
</p>
|
||||
@ -332,7 +320,7 @@
|
||||
</div>
|
||||
|
||||
<aside class="col-md-3 info-sidebar">
|
||||
<div class="d-none d-md-block">
|
||||
<div class="mb-4">
|
||||
{{ self.download_btn() }}
|
||||
</div>
|
||||
|
||||
@ -378,12 +366,6 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if package.type == package.type.GAME %}
|
||||
<a href="{{ package.getURL('packages.game_hub') }}" class="btn btn-lg btn-block mb-4 btn-primary">
|
||||
{{ _("View content for game") }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if package.type != package.type.TXP %}
|
||||
<h3>{{ _("Dependencies") }}</h3>
|
||||
<dl>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user