UI: Improve panel collapse visibility (Z#23132549) (#3709)

* Move collapse indicator in panels before label

* only hide collapse indicator in panel titles

* remove unneeded collapse-indicators in pretix-control

* remove unneeded collapse-indicators in presale

* move collapse-indicator to left in variants-toggle-button

* remove chevron and use default collapse-indicator in control-variants
This commit is contained in:
Richard Schreiber
2023-11-13 14:23:28 +01:00
committed by GitHub
parent c2ababb9d6
commit 69c2a1b3c2
13 changed files with 75 additions and 43 deletions

View File

@@ -21,7 +21,6 @@
<strong>{{ form.item.name }}{% if form.variation %}
{{ form.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</h3>
</summary>
<div id="cp{{ form.pos.pk }}">

View File

@@ -28,7 +28,6 @@
{% trans "Cart expired" %}
{% endif %}
</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</span>
</h2>
</summary>

View File

@@ -13,7 +13,6 @@
<strong>{{ form.position.item.name }}{% if form.position.variation %}
{{ form.position.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</h4>
</summary>
<div>

View File

@@ -21,7 +21,6 @@
<summary class="panel-heading">
<h3 class="panel-title">
<strong>{% trans "Contact information" %}</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</h3>
</summary>
<div id="contact">
@@ -40,8 +39,6 @@
<strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %}
{% trans "(optional)" %}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</h3>
</summary>
{% if addresses_data %}
@@ -88,10 +85,7 @@
<button type="button" data-id="{{ forloop.counter0 }}" name="copy"
class="js-copy-answers btn btn-default btn-xs">{% trans "Copy answers from above" %}</button>
{% endif %}
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</span>
{% else %}
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
{% endif %}
</h3>
</summary>

View File

@@ -97,8 +97,8 @@
data-label-alt="{% trans "Hide variants" %}"
aria-expanded="false"
aria-label="{% blocktrans trimmed with item=item.name count=item.available_variations|length %}Show {{count}} variants of {{item}}{% endblocktrans %}">
<span>{% trans "Show variants" %}</span>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
<span>{% trans "Show variants" %}</span>
</button>
{% endif %}
</div>

View File

@@ -10,16 +10,13 @@
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<strong>{% trans "Your cart" %}</strong>
</span>
<span aria-hidden="true">
<strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}" aria-hidden="true">
{% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
{{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
{% else %}
{% trans "Cart expired" %}
{% endif %}
</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</span>
<strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}" aria-hidden="true">
{% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
{{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
{% else %}
{% trans "Cart expired" %}
{% endif %}
</strong>
</h2>
</summary>
<div>

View File

@@ -89,8 +89,8 @@
data-label-alt="{% trans "Hide variants" %}"
aria-expanded="false"
aria-label="{% blocktrans trimmed with item=item.name count=item.available_variations|length %}Show {{count}} variants of {{ item }}{% endblocktrans %}">
<span>{% trans "Show variants" %}</span>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
<span>{% trans "Show variants" %}</span>
</button>
{% endif %}
</div>

View File

@@ -33,7 +33,6 @@
{% trans "Contact information" %}
{% endif %}
</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</h4>
</summary>
<div id="invoice" class="panel-collapse">
@@ -55,7 +54,6 @@
<strong>{{ pos.item.name }}{% if pos.variation %}
{{ pos.variation }}
{% endif %}</strong>
<i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
</h4>
</summary>
<div id="cp{{ pos.id }}">