mirror of
https://github.com/pretix/pretix.git
synced 2026-05-03 14:54:04 +00:00
[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
committed by
GitHub
GitHub
parent
3007b89d9b
commit
0af94c3712
@@ -14,94 +14,91 @@
|
||||
</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>
|
||||
<div class="col-xs-5">
|
||||
<dt>
|
||||
{% if m.canceled %}<del>{% endif %}
|
||||
<a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
|
||||
{{ m.membership_type.name }}
|
||||
</a>
|
||||
{% if m.canceled %}</del>{% endif %}
|
||||
{% if m.membership_type.transferable %}
|
||||
<span class="text-muted" data-toggle="tooltip" title="{% trans "Membership is transferable" %}">
|
||||
{% icon "users" %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</dt>
|
||||
{% if m.attendee_name %}
|
||||
<dd class="text-muted">
|
||||
{% icon "id-badge" %}
|
||||
<span class="sr-only">{% trans "Attendee name" %}:</span>
|
||||
{{ m.attendee_name }}
|
||||
</dd>
|
||||
<article class="row">
|
||||
<div class="col-xs-5">
|
||||
<h4>
|
||||
{% if m.canceled %}<del>{% endif %}
|
||||
<a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
|
||||
{{ m.membership_type.name }}
|
||||
</a>
|
||||
{% if m.canceled %}</del>{% endif %}
|
||||
{% if m.membership_type.transferable %}
|
||||
<span class="text-muted" data-toggle="tooltip" title="{% trans "Membership is transferable" %}">
|
||||
{% icon "users" %}
|
||||
</span>
|
||||
{% endif %}
|
||||
<dd class="text-muted">
|
||||
<small>
|
||||
{% if m.canceled %}
|
||||
{% textbubble "danger" icon="times" %}
|
||||
{% trans "Canceled" %}
|
||||
{% endtextbubble %}
|
||||
{% elif m.expired %}
|
||||
{% icon "minus-square-o" %}
|
||||
{% trans "Expired since" %}
|
||||
<time datetime="{{ m.date_end|date:"Y-m-d H:i" }}">
|
||||
{{ m.date_end|date:"SHORT_DATETIME_FORMAT" }}
|
||||
</time>
|
||||
{% elif m.not_yet_valid %}
|
||||
{% icon "clock-o" %}
|
||||
{% trans "Valid from" %}
|
||||
<time datetime="{{ m.date_start|date:"Y-m-d H:i" }}">
|
||||
{{ m.date_start|date:"SHORT_DATETIME_FORMAT" }}
|
||||
</time>
|
||||
{% else %}
|
||||
{% icon "check" %}
|
||||
{% trans "Valid until" %}
|
||||
<time datetime="{{ m.date_end|date:"Y-m-d H:i" }}">
|
||||
{{ m.date_end|date:"SHORT_DATETIME_FORMAT" }}
|
||||
</time>
|
||||
{% endif %}
|
||||
</small>
|
||||
</dd>
|
||||
{% if m.testmode %}
|
||||
<dd>
|
||||
<small>
|
||||
{% textbubble "warning" %}
|
||||
{% trans "TEST MODE" %}
|
||||
</h4>
|
||||
{% if m.attendee_name %}
|
||||
<p class="text-muted">
|
||||
{% icon "id-badge" %}
|
||||
<span class="sr-only">{% trans "Attendee name" %}:</span>
|
||||
{{ m.attendee_name }}
|
||||
</p>
|
||||
{% endif %}
|
||||
<p class="text-muted">
|
||||
<small>
|
||||
{% if m.canceled %}
|
||||
{% textbubble "danger" icon="times" %}
|
||||
{% trans "Canceled" %}
|
||||
{% endtextbubble %}
|
||||
</small>
|
||||
</dd>
|
||||
{% elif m.expired %}
|
||||
{% icon "minus-square-o" %}
|
||||
{% trans "Expired since" %}
|
||||
<time datetime="{{ m.date_end|date:"Y-m-d H:i" }}">
|
||||
{{ m.date_end|date:"SHORT_DATETIME_FORMAT" }}
|
||||
</time>
|
||||
{% elif m.not_yet_valid %}
|
||||
{% icon "clock-o" %}
|
||||
{% trans "Valid from" %}
|
||||
<time datetime="{{ m.date_start|date:"Y-m-d H:i" }}">
|
||||
{{ m.date_start|date:"SHORT_DATETIME_FORMAT" }}
|
||||
</time>
|
||||
{% else %}
|
||||
{% icon "check" %}
|
||||
{% trans "Valid until" %}
|
||||
<time datetime="{{ m.date_end|date:"Y-m-d H:i" }}">
|
||||
{{ m.date_end|date:"SHORT_DATETIME_FORMAT" }}
|
||||
</time>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<dd>
|
||||
<div class="quotabox full-width">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success progress-bar-{{ m.percentage_used }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="numbers">
|
||||
{{ m.usages }} /
|
||||
{{ m.membership_type.max_usages|default_if_none:"∞" }}
|
||||
</small>
|
||||
</p>
|
||||
{% if m.testmode %}
|
||||
<p>
|
||||
<small>
|
||||
{% textbubble "warning" %}
|
||||
{% trans "TEST MODE" %}
|
||||
{% endtextbubble %}
|
||||
</small>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<p>
|
||||
<div class="quotabox full-width">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success progress-bar-{{ m.percentage_used }}">
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="col-xs-2">
|
||||
<dt class="sr-only">{% trans "Actions" %}</dt>
|
||||
<dd class="text-right">
|
||||
<a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
|
||||
{% icon "list-ul" %}
|
||||
{% trans "Details" %}
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</li>
|
||||
<div class="numbers">
|
||||
{{ m.usages }} /
|
||||
{{ m.membership_type.max_usages|default_if_none:"∞" }}
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-2">
|
||||
<p class="text-right">
|
||||
<a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
|
||||
{% icon "list-ul" %}
|
||||
{% trans "Details" %}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-center">{% trans "You don’t have any memberships in your account yet." %}</p>
|
||||
{% endif %}
|
||||
|
||||
@@ -15,65 +15,60 @@
|
||||
</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>
|
||||
<div class="col-md-4 col-sm-5 col-xs-8">
|
||||
<dt class="sr-only">{% trans "Order" %}</dt>
|
||||
<dd><strong>
|
||||
<a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}" target="_blank">
|
||||
{% icon "shopping-cart" %}
|
||||
{{ o.code }}</a>
|
||||
</strong>
|
||||
{% if o.customer_id != customer.pk %}
|
||||
<span class="text-muted" data-toggle="tooltip"
|
||||
title="{% trans "Matched to the account based on the email address." %}">
|
||||
{% icon "compress" %}
|
||||
</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>
|
||||
{% if o.testmode %}
|
||||
<dd>
|
||||
<small>
|
||||
{% textbubble "warning" %}
|
||||
{% trans "TEST MODE" %}
|
||||
{% endtextbubble %}
|
||||
</small>
|
||||
</dd>
|
||||
<article class="row">
|
||||
<div class="col-md-4 col-sm-5 col-xs-8">
|
||||
<h4><strong>
|
||||
<a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}" target="_blank">
|
||||
{% icon "shopping-cart" %}
|
||||
{{ o.code }}</a>
|
||||
</strong>
|
||||
{% if o.customer_id != customer.pk %}
|
||||
<span class="text-muted" data-toggle="tooltip"
|
||||
title="{% trans "Matched to the account based on the email address." %}">
|
||||
{% icon "compress" %}
|
||||
</span>
|
||||
{% 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>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-3 col-xs-8">
|
||||
<dt class="sr-only">{% trans "Event" %}</dt>
|
||||
<dd>
|
||||
{{ 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>
|
||||
</div>
|
||||
<div class="col-sm-2 col-xs-4">
|
||||
<dt class="sr-only">{% trans "Actions" %}</dt>
|
||||
<dd 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>
|
||||
</div>
|
||||
</dl>
|
||||
</li>
|
||||
<small>{% include "pretixpresale/event/fragment_order_status.html" with order=o event=o.event %}</small>
|
||||
</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 %}
|
||||
<p>
|
||||
<small>
|
||||
{% textbubble "warning" %}
|
||||
{% trans "TEST MODE" %}
|
||||
{% endtextbubble %}
|
||||
</small>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-2 col-xs-4 text-right">
|
||||
<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">
|
||||
<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 %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-2 col-xs-4">
|
||||
<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></p>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-center">{% trans "You don’t have any orders in your account yet." %}</p>
|
||||
{% endif %}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user