Mirrorlandia_minetest/contentdb
1
0
Fork 0
mirror of https://github.com/minetest/contentdb.git synced 2025-01-09 22:47:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adding in a carousel for packages (#475)

Browse Source 
Co-authored-by: recluse4615 <recluse4615@users.noreply.github.com>
This commit is contained in:
rec 2023-10-15 22:14:08 +01:00 committed by GitHub
parent fc559814d4
commit 40a59a4d31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/public/static/js/gallery_carousel.js Normal file
View File

@ -0,0 +1,13 @@
// @author recluse4615
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
"use strict";
const galleryCarousel = new bootstrap.Carousel(document.getElementById("galleryCarousel"));
document.querySelectorAll(".gallery-image").forEach(el => {
el.addEventListener("click", function(e) {
galleryCarousel.to(el.dataset.bsSlideTo);
e.preventDefault();
});
});

35
app/templates/packages/view.html
View File

@ -19,6 +19,7 @@
{% block scriptextra %} {% block scriptextra %}
<script src="/static/js/video_embed.js"></script> <script src="/static/js/video_embed.js"></script>
<script src="/static/js/gallery_carousel.js"></script>
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
<script src="/static/js/quick_review_voting.js"></script> <script src="/static/js/quick_review_voting.js"></script>
{% endif %} {% endif %}
@ -76,6 +77,7 @@
{% elif not package.media_license.is_foss %} {% elif not package.media_license.is_foss %}
{% set package_warning=_("Non-free media") %} {% set package_warning=_("Non-free media") %}
{% endif %} {% endif %}
<main> <main>
{% if not package.approved %} {% if not package.approved %}
<section class="my-4 pb-3" style=""> <section class="my-4 pb-3" style="">
@ -248,6 +250,37 @@
{% endif %} {% endif %}
{% if screenshots or package.check_perm(current_user, "ADD_SCREENSHOTS") or package.video_url %} {% if screenshots or package.check_perm(current_user, "ADD_SCREENSHOTS") or package.video_url %}
{% if screenshots %}
<div class="modal fade" id="galleryModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-body">
<div id="galleryCarousel" class="carousel slide">
<div class="carousel-inner">
{% for ss in screenshots %}
{% if ss.approved or package.check_perm(current_user, "ADD_SCREENSHOTS") %}
<div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
<a href="{{ ss.url }}" target="_blank">
<img class="img-size w-100" src="{{ ss.url }}" alt="{{ ss.title }}" title="{{ ss.title }}" />
</a>
</div>
{% endif %}
{% endfor %}
<button class="carousel-control-prev" data-bs-target="#galleryCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">{{ _("Previous") }}</span>
</button>
<button class="carousel-control-next" data-bs-target="#galleryCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">{{ _("Next") }}</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<ul class="gallery"> <ul class="gallery">
{% if package.video_url %} {% if package.video_url %}
<li> <li>
@ -264,7 +297,7 @@
{% for ss in screenshots %} {% for ss in screenshots %}
{% if ss.approved or package.check_perm(current_user, "ADD_SCREENSHOTS") %} {% if ss.approved or package.check_perm(current_user, "ADD_SCREENSHOTS") %}
<li> <li>
<a href="{{ ss.url }}" class="gallery-image"> <a href="{{ ss.url }}" data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="{{ loop.index - 1 }}" class="gallery-image">
<img src="{{ ss.get_thumb_url() }}" alt="{{ ss.title }}" title="{{ ss.title }}" /> <img src="{{ ss.get_thumb_url() }}" alt="{{ ss.title }}" title="{{ ss.title }}" />
{% if not ss.approved %} {% if not ss.approved %}
<span class="badge bg-dark badge-tr">{{ _("Awaiting review") }}</span> <span class="badge bg-dark badge-tr">{{ _("Awaiting review") }}</span>