[A11y] change customer-pages dl to list of article (#5112)

* [A11y] change customer-pages dl to list of article

* fix small font-size

* change customer memberships as well
This commit is contained in:
Richard Schreiber
2025-05-15 12:30:21 +02:00
committed by GitHub
parent 3007b89d9b
commit 0af94c3712
3 changed files with 134 additions and 139 deletions

View File

@@ -14,12 +14,11 @@
</div>
<div class="panel-body">
{% if memberships %}
<ul class="full-width-list alternating-rows">
<div class="event-list full-width-list alternating-rows">
{% for m in memberships %}
<li class="row">
<dl>
<article class="row">
<div class="col-xs-5">
<dt>
<h4>
{% if m.canceled %}<del>{% endif %}
<a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
{{ m.membership_type.name }}
@@ -30,15 +29,15 @@
{% icon "users" %}
</span>
{% endif %}
</dt>
</h4>
{% if m.attendee_name %}
<dd class="text-muted">
<p class="text-muted">
{% icon "id-badge" %}
<span class="sr-only">{% trans "Attendee name" %}:</span>
{{ m.attendee_name }}
</dd>
</p>
{% endif %}
<dd class="text-muted">
<p class="text-muted">
<small>
{% if m.canceled %}
{% textbubble "danger" icon="times" %}
@@ -64,19 +63,19 @@
</time>
{% endif %}
</small>
</dd>
</p>
{% if m.testmode %}
<dd>
<p>
<small>
{% textbubble "warning" %}
{% trans "TEST MODE" %}
{% endtextbubble %}
</small>
</dd>
</p>
{% endif %}
</div>
<div class="col-xs-5">
<dd>
<p>
<div class="quotabox full-width">
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-{{ m.percentage_used }}">
@@ -87,21 +86,19 @@
{{ m.membership_type.max_usages|default_if_none:"∞" }}
</div>
</div>
</dd>
</p>
</div>
<div class="col-xs-2">
<dt class="sr-only">{% trans "Actions" %}</dt>
<dd class="text-right">
<p class="text-right">
<a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
{% icon "list-ul" %}
{% trans "Details" %}
</a>
</dd>
</p>
</div>
</dl>
</li>
</article>
{% endfor %}
</ul>
</div>
{% else %}
<p class="text-center">{% trans "You dont have any memberships in your account yet." %}</p>
{% endif %}

View File

@@ -15,13 +15,11 @@
</div>
<div class="panel-body">
{% if orders %}
<ul class="full-width-list alternating-rows">
<div class="event-list full-width-list alternating-rows">
{% for o in orders %}
<li class="row">
<dl>
<article class="row">
<div class="col-md-4 col-sm-5 col-xs-8">
<dt class="sr-only">{% trans "Order" %}</dt>
<dd><strong>
<h4><strong>
<a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}" target="_blank">
{% icon "shopping-cart" %}
{{ o.code }}</a>
@@ -33,47 +31,44 @@
</span>
{% endif %}
<small>{% include "pretixpresale/event/fragment_order_status.html" with order=o event=o.event %}</small>
</dd>
<dd><time datetime="{{ o.datetime|date:"Y-m-d H:i" }}" class="text-muted small">{{ o.datetime|date:"SHORT_DATETIME_FORMAT" }}</time></dd>
</h4>
<p><time datetime="{{ o.datetime|date:"Y-m-d H:i" }}" class="text-muted small">{{ o.datetime|date:"SHORT_DATETIME_FORMAT" }}</time></p>
{% if o.testmode %}
<dd>
<p>
<small>
{% textbubble "warning" %}
{% trans "TEST MODE" %}
{% endtextbubble %}
</small>
</dd>
</p>
{% endif %}
</div>
<div class="col-md-2 col-sm-2 col-xs-4 text-right">
<dt class="sr-only">{% trans "Order total" %}</dt>
<dd>{{ o.total|money:o.event.currency }}</dd>
<dt class="sr-only">{% trans "Positions" %}</dt>
<dd class="text-muted"><small>{% blocktranslate count counter=o.count_positions|default_if_none:0 %}{{ counter }} item{% plural %}{{ counter }} items{% endblocktranslate %}</small>
</dd>
<p>
{{ o.total|money:o.event.currency }}
<br><span class="text-muted"><small>{% blocktranslate count counter=o.count_positions|default_if_none:0 %}{{ counter }} item{% plural %}{{ counter }} items{% endblocktranslate %}</small>
</span>
</p>
</div>
<div class="col-md-4 col-sm-3 col-xs-8">
<dt class="sr-only">{% trans "Event" %}</dt>
<dd>
<p>
{{ o.event }}
{% if not o.event.has_subevents and o.event.settings.show_dates_on_frontpage %}
<br><small class="text-muted">{{ o.event.get_date_range_display }}</small>
{% endif %}
</dd>
</p>
</div>
<div class="col-sm-2 col-xs-4">
<dt class="sr-only">{% trans "Actions" %}</dt>
<dd class="text-right">
<p class="text-right">
<a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}"
target="_blank">
{% icon "list-ul" %}
{% trans "Details" %}
</a></dd>
</a></p>
</div>
</dl>
</li>
</article>
{% endfor %}
</ul>
</div>
{% else %}
<p class="text-center">{% trans "You dont have any orders in your account yet." %}</p>
{% endif %}

View File

@@ -594,15 +594,18 @@ h2 .label {
}
.event-list.full-width-list {
h3, p {
h3, h4, p {
margin-top: 0;
margin-bottom: 0;
}
h3 {
h3, h4 {
font-size: 1em;
line-height: 1.25rem;
font-weight: bold;
}
h4 small {
font-size: 85%;
}
}
.quotabox {