forked from CGM_Public/pretix_original
[A11y] switch modal dialogs to <dialog> tag (#5128)
* add templatetag {% dialog %} using <dialog> tag
* new dialog style
* show dialog when empty add-to-cart instead of disabling the button
* update cookieconsent-modal to use new template tag
This commit is contained in:
Richard Schreiber
committed by
GitHub
GitHub
parent
bf47da521c
commit
7c59ec51ca
@@ -7,6 +7,8 @@
|
||||
{% load thumb %}
|
||||
{% load eventsignal %}
|
||||
{% load rich_text %}
|
||||
{% load icon %}
|
||||
{% load dialog %}
|
||||
|
||||
{% block title %}
|
||||
{% if "year" in request.GET %}
|
||||
@@ -240,6 +242,13 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
{% if ev.presale_is_running and display_add_to_cart %}
|
||||
{% trans "You didn’t select any ticket." as label_nothing_to_add %}
|
||||
{% trans "Please tick a checkbox or enter a quantity for one of the ticket types to add to the cart." as description_nothing_to_add %}
|
||||
{% dialog "dialog-nothing-to-add" label_nothing_to_add description_nothing_to_add icon="exclamation-circle" %}
|
||||
<p class="modal-card-confirm"><button class="btn btn-primary">{% trans "OK" %}</button></p>
|
||||
{% enddialog %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</main>
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
{% load rich_text %}
|
||||
{% load safelink %}
|
||||
{% load escapejson %}
|
||||
{% load icon %}
|
||||
{% load dialog %}
|
||||
<div id="ajaxerr">
|
||||
</div>
|
||||
<div id="popupmodal" hidden aria-live="polite">
|
||||
@@ -50,93 +52,74 @@
|
||||
{{ cookie_consent_from_widget|json_script:"cookie-consent-from-widget" }}
|
||||
{% endif %}
|
||||
{% if cookie_providers %}
|
||||
<div id="cookie-consent-modal" aria-live="polite">
|
||||
<div class="modal-card">
|
||||
<div class="modal-card-content">
|
||||
<h3 id="cookie-consent-modal-label"></h3>
|
||||
<div id="cookie-consent-modal-description">
|
||||
<form class="form-horizontal">
|
||||
{% with request.event|default:request.organizer as sh %}
|
||||
<h3>{{ sh.settings.cookie_consent_dialog_title }}</h3>
|
||||
{{ sh.settings.cookie_consent_dialog_text|rich_text }}
|
||||
{% if sh.settings.cookie_consent_dialog_text_secondary %}
|
||||
<div class="text-muted">
|
||||
{{ sh.settings.cookie_consent_dialog_text_secondary|rich_text }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<details id="cookie-consent-details">
|
||||
<summary>
|
||||
<span class="fa fa-fw chevron"></span>
|
||||
{% trans "Adjust settings in detail" %}
|
||||
</summary>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" disabled checked="" aira-describedby="cookie-consent-checkbox-required-description">
|
||||
{% trans "Required cookies" %}
|
||||
</label>
|
||||
</div>
|
||||
<div class="help-block" id="cookie-consent-checkbox-required-description">
|
||||
<p>{% trans "Functional cookies (e.g. shopping cart, login, payment, language preference) and technical cookies (e.g. security purposes)" %}</p>
|
||||
</div>
|
||||
{% for cp in cookie_providers %}
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="{{ cp.identifier }}" aira-describedby="cookie-consent-checkbox-{{ cp.identifier }}-description">
|
||||
{{ cp.provider_name }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="help-block" id="cookie-consent-checkbox-{{ cp.identifier }}-description">
|
||||
<p>
|
||||
{% for c in cp.usage_classes %}
|
||||
{% if forloop.counter0 > 0 %}· {% endif %}
|
||||
{% if c.value == 1 %}
|
||||
{% trans "Functionality" context "cookie_usage" %}
|
||||
{% elif c.value == 2 %}
|
||||
{% trans "Analytics" context "cookie_usage" %}
|
||||
{% elif c.value == 3 %}
|
||||
{% trans "Marketing" context "cookie_usage" %}
|
||||
{% elif c.value == 4 %}
|
||||
{% trans "Social features" context "cookie_usage" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if cp.privacy_url %}
|
||||
·
|
||||
<a href="{% safelink cp.privacy_url %}" target="_blank">
|
||||
{% trans "Privacy policy" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</details>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<p>
|
||||
<button type="button" class="btn btn-lg btn-block btn-primary" id="cookie-consent-button-no"
|
||||
data-summary-text="{{ sh.settings.cookie_consent_dialog_button_no }}"
|
||||
data-detail-text="{% trans "Save selection" %}">
|
||||
{{ sh.settings.cookie_consent_dialog_button_no }}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<p>
|
||||
<button type="button" class="btn btn-lg btn-block btn-primary" id="cookie-consent-button-yes">
|
||||
{{ sh.settings.cookie_consent_dialog_button_yes }}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% if sh.settings.privacy_url %}
|
||||
<p class="text-center">
|
||||
<a href="{% safelink sh.settings.privacy_url %}" target="_blank" rel="noopener">{% trans "Privacy policy" %}</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
<form>
|
||||
{% with request.event|default:request.organizer as sh %}
|
||||
{% dialog "cookie-consent-modal" sh.settings.cookie_consent_dialog_title sh.settings.cookie_consent_dialog_text|rich_text icon="shield" %}
|
||||
{% if sh.settings.cookie_consent_dialog_text_secondary %}
|
||||
<div class="text-muted">
|
||||
{{ sh.settings.cookie_consent_dialog_text_secondary|rich_text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<details id="cookie-consent-details">
|
||||
<summary>
|
||||
<span class="fa fa-fw chevron"></span>
|
||||
{% trans "Adjust settings in detail" %}
|
||||
</summary>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" disabled checked="" aira-describedby="cookie-consent-checkbox-required-description">
|
||||
{% trans "Required cookies" %}
|
||||
</label>
|
||||
</div>
|
||||
<div class="help-block" id="cookie-consent-checkbox-required-description">
|
||||
<p>{% trans "Functional cookies (e.g. shopping cart, login, payment, language preference) and technical cookies (e.g. security purposes)" %}</p>
|
||||
</div>
|
||||
{% for cp in cookie_providers %}
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="{{ cp.identifier }}" aira-describedby="cookie-consent-checkbox-{{ cp.identifier }}-description">
|
||||
{{ cp.provider_name }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="help-block" id="cookie-consent-checkbox-{{ cp.identifier }}-description">
|
||||
<p>
|
||||
{% for c in cp.usage_classes %}
|
||||
{% if forloop.counter0 > 0 %}· {% endif %}
|
||||
{% if c.value == 1 %}
|
||||
{% trans "Functionality" context "cookie_usage" %}
|
||||
{% elif c.value == 2 %}
|
||||
{% trans "Analytics" context "cookie_usage" %}
|
||||
{% elif c.value == 3 %}
|
||||
{% trans "Marketing" context "cookie_usage" %}
|
||||
{% elif c.value == 4 %}
|
||||
{% trans "Social features" context "cookie_usage" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if cp.privacy_url %}
|
||||
·
|
||||
<a href="{% safelink cp.privacy_url %}" target="_blank">
|
||||
{% trans "Privacy policy" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</details>
|
||||
<p class="modal-card-confirm modal-card-confirm-spread">
|
||||
<button class="btn btn-lg btn-default" id="cookie-consent-button-no" value="no" autofocus="true"
|
||||
data-summary-text="{{ sh.settings.cookie_consent_dialog_button_no }}"
|
||||
data-detail-text="{% trans "Save selection" %}">
|
||||
{{ sh.settings.cookie_consent_dialog_button_no }}
|
||||
</button>
|
||||
<button class="btn btn-lg btn-primary" id="cookie-consent-button-yes" value="yes">
|
||||
{{ sh.settings.cookie_consent_dialog_button_yes }}
|
||||
</button>
|
||||
</p>
|
||||
{% if sh.settings.privacy_url %}
|
||||
<p class="text-center">
|
||||
<small><a href="{% safelink sh.settings.privacy_url %}" target="_blank" rel="noopener">{% trans "Privacy policy" %}</a></small>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% enddialog %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user