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

View File

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

View File

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