diff --git a/app/public/static/gallery.js b/app/public/static/gallery.js new file mode 100644 index 00000000..b19beda9 --- /dev/null +++ b/app/public/static/gallery.js @@ -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; + }) + }); + }); +}); diff --git a/app/scss/gallery.scss b/app/scss/gallery.scss index 66e00119..9c32c496 100644 --- a/app/scss/gallery.scss +++ b/app/scss/gallery.scss @@ -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); } } diff --git a/app/templates/packages/view.html b/app/templates/packages/view.html index 019a99a2..6551ed5e 100644 --- a/app/templates/packages/view.html +++ b/app/templates/packages/view.html @@ -11,14 +11,15 @@ - + {% if package.getMainScreenshotURL() %} {% endif %} {% endblock %} {% block scriptextra %} - + + {% endblock %} {% macro render_license(license) %} @@ -31,7 +32,7 @@ {% block download_btn %} {% if release %} -
{{ _("Download") }} @@ -60,7 +61,7 @@ {{ 0 / 0 }} {% endif %} -

+

@@ -83,130 +84,41 @@ {% elif not package.media_license.is_foss %} {% set package_warning=_("Non-free media") %} {% endif %} +

{% set cover_image = package.cover_image.url or package.getMainScreenshotURL() %} -
-
-
- {% if package.checkPerm(current_user, "EDIT_PACKAGE") %} - - - {{ _("Edit") }} - - {% endif %} - {% if package.checkPerm(current_user, "MAKE_RELEASE") %} - - - {{ _("Release") }} - - {% endif %} - {% if package.checkPerm(current_user, "DELETE_PACKAGE") or package.checkPerm(current_user, "UNAPPROVE_PACKAGE") %} - - - {{ _("Remove") }} - - {% endif %} -
- -

+ {% if cover_image %} +
+
+
+ {% endif %} +
+
+

{{ package.title }}

-

- {{ package.short_desc }} -

- -

- {% if package.dev_state.name == "LOOKING_FOR_MAINTAINER" or package.dev_state.name == "DEPRECATED" %} - - - {{ package.dev_state.value }} - - {% endif %} - {% if package_warning %} - - - {{ package_warning }} +

+ {% if package.type == package.type.GAME %} + + {{ _("View content for game") }} {% endif %} - {% for warning in package.content_warnings %} - - - {{ warning.title }} - - {% endfor %} - {% if package.dev_state.name == "WIP" %} - - - {{ _("Work in Progress") }} - - {% endif %} - {% for t in package.tags %} - - {{ t.title }} - - {% endfor %} -

- -
-
- - - - {{ package.author.display_name }} - - - {% if release %} - - - {{ package.downloads }} - - {% endif %} - - - {{ threads | length }} - - - - - +{{ package.reviews | selectattr("recommends") | list | length }} - / - -{{ package.reviews | rejectattr("recommends") | list | length }} - - - {% if package.website %} - - - {{ _("Website") }} - - {% endif %} - {% if package.repo %} - - - {{ _("Source") }} - - {% endif %} - {% if package.forums %} - - - {{ _("Forums") }} - - {% endif %} - {% if package.issueTracker %} - - - {{ _("Issue Tracker") }} - - {% endif %} -
@@ -232,24 +144,37 @@ {% endif %} -
- {{ self.download_btn() }} -
- -
+
-
- {% set screenshots = package.screenshots.all() %} - - {% if package.checkPerm(current_user, "ADD_SCREENSHOTS") %} - - - {{ _("Edit") }} - - {% endif %} - - {% if screenshots or package.checkPerm(current_user, "ADD_SCREENSHOTS") or package.video_url %} - - {% endif %} + +
+
+ {% else %} +
+ {% endif %} +
+ {% if package.checkPerm(current_user, "EDIT_PACKAGE") %} + + + {{ _("Edit") }} + + {% endif %} + {% if package.checkPerm(current_user, "MAKE_RELEASE") %} + + + {{ _("Release") }} + + {% endif %} + {% if package.checkPerm(current_user, "DELETE_PACKAGE") or package.checkPerm(current_user, "UNAPPROVE_PACKAGE") %} + + + {{ _("Remove") }} + + {% endif %} +
+

+ {{ package.short_desc }} +

+

+ {% if package.dev_state.name == "LOOKING_FOR_MAINTAINER" or package.dev_state.name == "DEPRECATED" %} + + + {{ package.dev_state.value }} + + {% endif %} + {% if package_warning %} + + + {{ package_warning }} + + {% endif %} + {% for warning in package.content_warnings %} + + + {{ warning.title }} + + {% endfor %} + {% if package.dev_state.name == "WIP" %} + + + {{ _("Work in Progress") }} + + {% endif %} + {% for t in package.tags %} + + {{ t.title }} + + {% endfor %} +

+
+
+
+
+
+
{% if package.desc %}
{{ package.desc | markdown }} @@ -296,7 +284,7 @@ {% if current_user.is_authenticated %} {% if has_review %}

- + {{ _("Edit Review") }}

@@ -332,7 +320,7 @@