forked from CGM_Public/pretix_original
[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>
|
||||||
<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">
|
<h4>
|
||||||
<dt>
|
{% 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 }}
|
</a>
|
||||||
</a>
|
{% if m.canceled %}</del>{% endif %}
|
||||||
{% if m.canceled %}</del>{% endif %}
|
{% if m.membership_type.transferable %}
|
||||||
{% if m.membership_type.transferable %}
|
<span class="text-muted" data-toggle="tooltip" title="{% trans "Membership is transferable" %}">
|
||||||
<span class="text-muted" data-toggle="tooltip" title="{% trans "Membership is transferable" %}">
|
{% icon "users" %}
|
||||||
{% icon "users" %}
|
</span>
|
||||||
</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>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<dd class="text-muted">
|
</h4>
|
||||||
<small>
|
{% if m.attendee_name %}
|
||||||
{% if m.canceled %}
|
<p class="text-muted">
|
||||||
{% textbubble "danger" icon="times" %}
|
{% icon "id-badge" %}
|
||||||
{% trans "Canceled" %}
|
<span class="sr-only">{% trans "Attendee name" %}:</span>
|
||||||
{% endtextbubble %}
|
{{ m.attendee_name }}
|
||||||
{% elif m.expired %}
|
</p>
|
||||||
{% icon "minus-square-o" %}
|
{% endif %}
|
||||||
{% trans "Expired since" %}
|
<p class="text-muted">
|
||||||
<time datetime="{{ m.date_end|date:"Y-m-d H:i" }}">
|
<small>
|
||||||
{{ m.date_end|date:"SHORT_DATETIME_FORMAT" }}
|
{% if m.canceled %}
|
||||||
</time>
|
{% textbubble "danger" icon="times" %}
|
||||||
{% elif m.not_yet_valid %}
|
{% trans "Canceled" %}
|
||||||
{% 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" %}
|
|
||||||
{% endtextbubble %}
|
{% endtextbubble %}
|
||||||
</small>
|
{% elif m.expired %}
|
||||||
</dd>
|
{% 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 %}
|
{% endif %}
|
||||||
</div>
|
</small>
|
||||||
<div class="col-xs-5">
|
</p>
|
||||||
<dd>
|
{% if m.testmode %}
|
||||||
<div class="quotabox full-width">
|
<p>
|
||||||
<div class="progress">
|
<small>
|
||||||
<div class="progress-bar progress-bar-success progress-bar-{{ m.percentage_used }}">
|
{% textbubble "warning" %}
|
||||||
</div>
|
{% trans "TEST MODE" %}
|
||||||
</div>
|
{% endtextbubble %}
|
||||||
<div class="numbers">
|
</small>
|
||||||
{{ m.usages }} /
|
</p>
|
||||||
{{ m.membership_type.max_usages|default_if_none:"∞" }}
|
{% 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>
|
||||||
</div>
|
</div>
|
||||||
</dd>
|
<div class="numbers">
|
||||||
</div>
|
{{ m.usages }} /
|
||||||
<div class="col-xs-2">
|
{{ m.membership_type.max_usages|default_if_none:"∞" }}
|
||||||
<dt class="sr-only">{% trans "Actions" %}</dt>
|
</div>
|
||||||
<dd class="text-right">
|
</div>
|
||||||
<a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
|
</p>
|
||||||
{% icon "list-ul" %}
|
</div>
|
||||||
{% trans "Details" %}
|
<div class="col-xs-2">
|
||||||
</a>
|
<p class="text-right">
|
||||||
</dd>
|
<a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
|
||||||
</div>
|
{% icon "list-ul" %}
|
||||||
</dl>
|
{% trans "Details" %}
|
||||||
</li>
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="text-center">{% trans "You don’t have any memberships in your account yet." %}</p>
|
<p class="text-center">{% trans "You don’t have any memberships in your account yet." %}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
@@ -15,65 +15,60 @@
|
|||||||
</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">
|
<h4><strong>
|
||||||
<dt class="sr-only">{% trans "Order" %}</dt>
|
<a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}" target="_blank">
|
||||||
<dd><strong>
|
{% icon "shopping-cart" %}
|
||||||
<a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}" target="_blank">
|
{{ o.code }}</a>
|
||||||
{% icon "shopping-cart" %}
|
</strong>
|
||||||
{{ o.code }}</a>
|
{% if o.customer_id != customer.pk %}
|
||||||
</strong>
|
<span class="text-muted" data-toggle="tooltip"
|
||||||
{% if o.customer_id != customer.pk %}
|
title="{% trans "Matched to the account based on the email address." %}">
|
||||||
<span class="text-muted" data-toggle="tooltip"
|
{% icon "compress" %}
|
||||||
title="{% trans "Matched to the account based on the email address." %}">
|
</span>
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
<small>{% include "pretixpresale/event/fragment_order_status.html" with order=o event=o.event %}</small>
|
||||||
<div class="col-md-2 col-sm-2 col-xs-4 text-right">
|
</h4>
|
||||||
<dt class="sr-only">{% trans "Order total" %}</dt>
|
<p><time datetime="{{ o.datetime|date:"Y-m-d H:i" }}" class="text-muted small">{{ o.datetime|date:"SHORT_DATETIME_FORMAT" }}</time></p>
|
||||||
<dd>{{ o.total|money:o.event.currency }}</dd>
|
{% if o.testmode %}
|
||||||
<dt class="sr-only">{% trans "Positions" %}</dt>
|
<p>
|
||||||
<dd class="text-muted"><small>{% blocktranslate count counter=o.count_positions|default_if_none:0 %}{{ counter }} item{% plural %}{{ counter }} items{% endblocktranslate %}</small>
|
<small>
|
||||||
</dd>
|
{% textbubble "warning" %}
|
||||||
</div>
|
{% trans "TEST MODE" %}
|
||||||
<div class="col-md-4 col-sm-3 col-xs-8">
|
{% endtextbubble %}
|
||||||
<dt class="sr-only">{% trans "Event" %}</dt>
|
</small>
|
||||||
<dd>
|
</p>
|
||||||
{{ o.event }}
|
{% endif %}
|
||||||
{% if not o.event.has_subevents and o.event.settings.show_dates_on_frontpage %}
|
</div>
|
||||||
<br><small class="text-muted">{{ o.event.get_date_range_display }}</small>
|
<div class="col-md-2 col-sm-2 col-xs-4 text-right">
|
||||||
{% endif %}
|
<p>
|
||||||
</dd>
|
{{ o.total|money:o.event.currency }}
|
||||||
</div>
|
<br><span class="text-muted"><small>{% blocktranslate count counter=o.count_positions|default_if_none:0 %}{{ counter }} item{% plural %}{{ counter }} items{% endblocktranslate %}</small>
|
||||||
<div class="col-sm-2 col-xs-4">
|
</span>
|
||||||
<dt class="sr-only">{% trans "Actions" %}</dt>
|
</p>
|
||||||
<dd class="text-right">
|
</div>
|
||||||
<a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}"
|
<div class="col-md-4 col-sm-3 col-xs-8">
|
||||||
target="_blank">
|
<p>
|
||||||
{% icon "list-ul" %}
|
{{ o.event }}
|
||||||
{% trans "Details" %}
|
{% if not o.event.has_subevents and o.event.settings.show_dates_on_frontpage %}
|
||||||
</a></dd>
|
<br><small class="text-muted">{{ o.event.get_date_range_display }}</small>
|
||||||
</div>
|
{% endif %}
|
||||||
</dl>
|
</p>
|
||||||
</li>
|
</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 %}
|
{% endfor %}
|
||||||
</ul>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="text-center">{% trans "You don’t have any orders in your account yet." %}</p>
|
<p class="text-center">{% trans "You don’t have any orders in your account yet." %}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user