diff --git a/src/pretix/presale/templates/pretixpresale/base.html b/src/pretix/presale/templates/pretixpresale/base.html index a967247be2..41d662f037 100644 --- a/src/pretix/presale/templates/pretixpresale/base.html +++ b/src/pretix/presale/templates/pretixpresale/base.html @@ -1,6 +1,7 @@ {% load compress %} {% load static %} {% load i18n %} +{% load icon %} {% load safelink %} {% load statici18n %} {% load thumb %} @@ -47,6 +48,31 @@ + + + + + +
+ +
+
{% if ie_deprecation_warning %}
diff --git a/src/pretix/static/pretixpresale/js/ui/main.js b/src/pretix/static/pretixpresale/js/ui/main.js index c678fc4122..f8af647c77 100644 --- a/src/pretix/static/pretixpresale/js/ui/main.js +++ b/src/pretix/static/pretixpresale/js/ui/main.js @@ -386,6 +386,33 @@ $(function () { $("body").removeClass("nojs"); moment.locale($("body").attr("data-datetimelocale")); + $(document).on("pretix:alert pretix:info", function (e, detail) { + var dialog = document.getElementById("dialog-" + e.type.substring(7)); + $("#" + dialog.getAttribute("aria-labelledby")).text(detail.label); + $("#" + dialog.getAttribute("aria-describedby")).text(detail.description); + $(".modal-card-icon .fa", dialog).attr('class', 'fa fa-' + (detail.icon || "exclamation-triangle")); + dialog.showModal(); + }); + + $("form:has(#btn-add-to-cart)").on("submit", function(e) { + if ( + (this.classList.contains("has-seating") && this.querySelector("pretix-seating-checkout-button button")) || + this.querySelector("input[type=checkbox]:checked") || + [...this.querySelectorAll(".input-item-count[type=text]")].some(input => input.value && input.value !== "0") // TODO: seating hat noch einen seating-dummy-item-count, das ist Mist! + ) { + // okay, let the submit-event bubble to async-task + return; + } + + e.preventDefault(); + e.stopPropagation(); + $(document).trigger("pretix:alert", { + label: gettext("You have not selected any ticket"), + description: gettext("Please tick a checkbox or enter a quantity for one of the ticket types to add to the cart."), + icon: 'exclamation', + }); + }); + var scrollpos = sessionStorage ? sessionStorage.getItem('scrollpos') : 0; if (scrollpos) { window.scrollTo(0, scrollpos); @@ -487,33 +514,6 @@ $(function () { this.form.submit(); } }); - var update_cart_form = function () { - var is_enabled = $(".product-row input[type=checkbox]:checked, .variations input[type=checkbox]:checked, .product-row input[type=radio]:checked, .variations input[type=radio]:checked").length; - if (!is_enabled) { - $(".input-item-count").each(function () { - if ($(this).val() && $(this).val() !== "0") { - is_enabled = true; - } - }); - $(".input-seat-selection option").each(function() { - if ($(this).val() && $(this).val() !== "" && $(this).prop('selected')) { - is_enabled = true; - } - }); - } - if (!is_enabled && (!$(".has-seating").length || $("#seating-dummy-item-count").length)) { - $("#btn-add-to-cart").prop("disabled", !is_enabled).popover({ - 'content': function () { return gettext("Please enter a quantity for one of the ticket types.") }, - 'placement': 'top', - 'trigger': 'hover focus' - }); - } else { - $("#btn-add-to-cart").prop("disabled", false).popover("destroy") - } - }; - update_cart_form(); - $(".product-row input[type=checkbox], .variations input[type=checkbox], .product-row input[type=radio], .variations input[type=radio], .input-item-count, .input-seat-selection") - .on("change mouseup keyup", update_cart_form); $(".table-calendar td.has-events").click(function () { var $grid = $(this).closest("[role='grid']"); diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss index c018fe16ae..37e5945c2b 100644 --- a/src/pretix/static/pretixpresale/scss/main.scss +++ b/src/pretix/static/pretixpresale/scss/main.scss @@ -374,6 +374,47 @@ body.loading .container { -webkit-transition: opacity .5s ease-in-out; } + +#dialog-info, #dialog-alert { + border: none; + background: white; + border-radius: $border-radius-large; + box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07); + padding: 20px; + + + max-width: 32em; + max-height: calc(100vh - 100px); + overflow-y: auto; + + + &::backdrop { + background: rgba(255, 255, 255, .7); + } + + .modal-card { + display: flex; + align-items: center; + + .modal-card-icon { + width: 150px; + text-align: center; + color: $brand-primary; + font-size: 120px; + } + .modal-card-content { + text-align: left; + h2 { + margin-top: 0; + font-size: 1.25em; + font-weight: bold; + color: $brand-primary; + } + } + } +} + + .typo-alert span[data-typosuggest] { text-decoration: underline; cursor: pointer;