diff --git a/src/pretix/presale/templates/pretixpresale/fragment_js.html b/src/pretix/presale/templates/pretixpresale/fragment_js.html index 304452adc2..75a8478726 100644 --- a/src/pretix/presale/templates/pretixpresale/fragment_js.html +++ b/src/pretix/presale/templates/pretixpresale/fragment_js.html @@ -18,7 +18,6 @@ - {% endcompress %} diff --git a/src/pretix/presale/templates/pretixpresale/fragment_modals.html b/src/pretix/presale/templates/pretixpresale/fragment_modals.html index b62906d3eb..de6590c5ce 100644 --- a/src/pretix/presale/templates/pretixpresale/fragment_modals.html +++ b/src/pretix/presale/templates/pretixpresale/fragment_modals.html @@ -46,6 +46,19 @@ + + + + + {% if request.organizer and request.organizer.settings.cookie_consent %} {% if cookie_consent_from_widget %} diff --git a/src/pretix/static/pretixbase/scss/_theme.scss b/src/pretix/static/pretixbase/scss/_theme.scss index 2fecbd9d63..d64e8a7446 100644 --- a/src/pretix/static/pretixbase/scss/_theme.scss +++ b/src/pretix/static/pretixbase/scss/_theme.scss @@ -354,3 +354,26 @@ dialog[open], dialog[open]::backdrop { 80% { transform: skewX(5deg); } 100% { transform: skewX(0deg); } } + +#lightbox-dialog { + width: fit-content; + max-width: 80%; + min-width: 24em; + .modal-card-content { + padding: 2.5em; + } + + img { + max-width: 100%; + } + + button { + position: absolute; + top: 1em; + right: 1em; + } + figcaption { + margin-top: 1em; + } +} + diff --git a/src/pretix/static/pretixpresale/js/ui/main.js b/src/pretix/static/pretixpresale/js/ui/main.js index 5290d20f9c..5476d94f8c 100644 --- a/src/pretix/static/pretixpresale/js/ui/main.js +++ b/src/pretix/static/pretixpresale/js/ui/main.js @@ -696,7 +696,27 @@ $(function () { }); // Lightbox - lightbox.init(); + (function() { + var dialog = document.getElementById("lightbox-dialog"); + var img = dialog.querySelector("img"); + var caption = dialog.querySelector("figcaption"); + $(dialog).on("mousedown", function (e) { + if (e.target == this) { + // dialog has no padding, so click triggers only on backdrop + this.close(); + } + }); + $("a[data-lightbox]").on("click", function (e) { + e.preventDefault(); + var label = this.querySelector("img").alt; + img.src = this.href; + img.alt = label; + caption.textContent = label; + dialog.showModal(); + }); + })(); + + // free-range price input auto-check checkbox/set count-input to 1 if 0 $("[data-checked-onchange]").each(function() {