forked from CGM_Public/pretix_original
[A11y] fix calendar nav dropdown (#5078)
* [A11y] fix calendar nav dropdown * update organizer calender * keep cal-nav on one line * simplify html * unify calendar layouts * fix rounding issue with .input-group select+button * add comment to explain complex css * fix calendar dropdown due to too broad css-selector * reduce spacing of top-nav * fix input-group-btn double line through rounding issue
This commit is contained in:
Richard Schreiber
committed by
GitHub
GitHub
parent
4f4903b00e
commit
d103d8782b
@@ -1,44 +1,55 @@
|
||||
{% load i18n %}
|
||||
{% load eventurl %}
|
||||
{% load icon %}
|
||||
{% load urlreplace %}
|
||||
<nav aria-label="{% trans "calendar navigation" %}">
|
||||
<ul class="row calendar-nav">
|
||||
<li class="col-sm-4 col-xs-2 text-left flip">
|
||||
<li class="text-left flip">
|
||||
{% if subevent_list.has_before %}
|
||||
<a href="?{% url_replace request "date" subevent_list.before|date:"Y-m" %}"
|
||||
class="btn btn-default" data-save-scrollpos aria-label="{% blocktrans with month=subevent_list.before|date:"F Y" %}Show previous month, {{ month }}{% endblocktrans %}">
|
||||
<span class="fa fa-arrow-left" aria-hidden="true"></span>
|
||||
{% icon "arrow-left" %}
|
||||
<span class="hidden-xs">{{ subevent_list.before|date:"F Y" }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
<li class="col-sm-4 col-xs-8 text-center">
|
||||
<li class="text-center">
|
||||
<form class="form-inline" method="get" id="monthselform" action="{% eventurl event "presale:event.index" cart_namespace=cart_namespace %}">
|
||||
{% for f, v in request.GET.items %}
|
||||
{% if f != "date" %}
|
||||
<input type="hidden" name="{{ f }}" value="{{ v }}">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<select name="date" class="form-control" aria-label="{% trans "Select month to show" %}">
|
||||
{% for y in subevent_list.years %}
|
||||
<optgroup label="{{ y }}">
|
||||
{% for m in subevent_list.months %}
|
||||
<option value="{{ y }}-{{ m|date:"m" }}" {% if m.month == subevent_list.date.month and y == subevent_list.date.year %}selected{% endif %}>{{ m|date:"F" }} {{ y }}</option>
|
||||
{% endfor %}
|
||||
</optgroup>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit" class="js-hidden btn btn-default">
|
||||
{% trans "Go" %}
|
||||
</button>
|
||||
<fieldset>
|
||||
<legend class="sr-only">{% trans "Select a month to display" %}</legend>
|
||||
<div>
|
||||
<label for="calendar-input-date">{% trans "Month" %}</label>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<select name="date" class="form-control" id="calendar-input-date">
|
||||
{% for y in subevent_list.years %}
|
||||
<optgroup label="{{ y }}">
|
||||
{% for m in subevent_list.months %}
|
||||
<option value="{{ y }}-{{ m|date:"m" }}" {% if m.month == subevent_list.date.month and y == subevent_list.date.year %}selected{% endif %}>{{ m|date:"F" }} {{ y }}</option>
|
||||
{% endfor %}
|
||||
</optgroup>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<span class="input-group-btn">
|
||||
<button type="submit" class="btn btn-default" aria-label="{% trans "Show month" %}">
|
||||
{% icon "chevron-right" %}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</li>
|
||||
<li class="col-sm-4 col-xs-2 text-right flip">
|
||||
<li class="text-right flip">
|
||||
{% if subevent_list.has_after %}
|
||||
<a href="?{% url_replace request "date" subevent_list.after|date:"Y-m" %}"
|
||||
class="btn btn-default" data-save-scrollpos aria-label="{% blocktrans with month=subevent_list.after|date:"F Y" %}Show next month, {{ month }}{% endblocktrans %}">
|
||||
<span class="hidden-xs">{{ subevent_list.after|date:"F Y" }}</span>
|
||||
<span class="fa fa-arrow-right" aria-hidden="true"></span>
|
||||
{% icon "arrow-right" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
@@ -1,63 +1,78 @@
|
||||
{% load i18n %}
|
||||
{% load eventurl %}
|
||||
{% load icon %}
|
||||
{% load urlreplace %}
|
||||
<nav aria-label="{% trans "calendar navigation" %}">
|
||||
<ul class="row calendar-nav">
|
||||
<li class="col-sm-4 col-xs-2 text-left flip">
|
||||
<li class="text-left flip">
|
||||
{% if subevent_list.has_before %}
|
||||
<a href="?{% url_replace request "date" subevent_list.before|date:"o-\WW" %}"
|
||||
class="btn btn-default" data-save-scrollpos aria-label="{% blocktrans with week=subevent_list.before|date:subevent_list.week_format %}Show previous week, {{ week }}{% endblocktrans %}">
|
||||
<span class="fa fa-arrow-left" aria-hidden="true"></span>
|
||||
{% icon "arrow-left" %}
|
||||
<span class="hidden-xs">{{ subevent_list.before|date:subevent_list.week_format }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
<li class="col-sm-4 col-xs-8 text-center">
|
||||
<li class="text-center">
|
||||
<form class="form-inline" method="get" id="monthselform" action="{% eventurl event "presale:event.index" cart_namespace=cart_namespace %}">
|
||||
{% for f, v in request.GET.items %}
|
||||
{% if f != "date" %}
|
||||
<input type="hidden" name="{{ f }}" value="{{ v }}">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<select name="date" class="form-control" aria-label="{% trans "Select week to show" %}">
|
||||
{% for weeks_per_year in subevent_list.weeks %}
|
||||
<optgroup label="{{ weeks_per_year.0.0.year }}">
|
||||
{% for w in weeks_per_year %}
|
||||
<option value="{{ w.0.isocalendar.0 }}-W{{ w.0.isocalendar.1 }}"
|
||||
{% if w.0.isocalendar.0 == subevent_list.date.isocalendar.0 and w.0.isocalendar.1 == subevent_list.date.isocalendar.1 %}selected{% endif %}>
|
||||
{{ w.0|date:subevent_list.week_format }}
|
||||
({{ w.0|date:subevent_list.short_month_day_format }} – {{ w.1|date:subevent_list.short_month_day_format }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</optgroup>
|
||||
{% for f, v in request.GET.items %}
|
||||
{% if f != "date" %}
|
||||
<input type="hidden" name="{{ f }}" value="{{ v }}">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit" class="js-hidden btn btn-default">
|
||||
{% trans "Go" %}
|
||||
</button>
|
||||
<fieldset>
|
||||
<legend class="sr-only">{% trans "Select a week to display" %}</legend>
|
||||
<div>
|
||||
<label for="calendar-input-date">{% trans "Week" %}</label>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<select name="date" class="form-control" aria-label="{% trans "Select week to show" %}">
|
||||
{% for weeks_per_year in subevent_list.weeks %}
|
||||
<optgroup label="{{ weeks_per_year.0.0.year }}">
|
||||
{% for w in weeks_per_year %}
|
||||
<option value="{{ w.0.isocalendar.0 }}-W{{ w.0.isocalendar.1 }}"
|
||||
{% if w.0.isocalendar.0 == subevent_list.date.isocalendar.0 and w.0.isocalendar.1 == subevent_list.date.isocalendar.1 %}selected{% endif %}>
|
||||
{{ w.0|date:subevent_list.week_format }}
|
||||
({{ w.0|date:subevent_list.short_month_day_format }} – {{ w.1|date:subevent_list.short_month_day_format }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</optgroup>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<span class="input-group-btn">
|
||||
<button type="submit" class="btn btn-default" aria-label="{% trans "Show week" %}">
|
||||
{% icon "chevron-right" %}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</li>
|
||||
<li class="col-sm-4 col-xs-2 text-right flip">
|
||||
<li class="text-right flip">
|
||||
{% if subevent_list.has_after %}
|
||||
<a href="?{% url_replace request "date" subevent_list.after|date:"o-\WW" %}"
|
||||
class="btn btn-default" data-save-scrollpos aria-label="{% blocktrans with week=subevent_list.after|date:subevent_list.week_format %}Show next week, {{ week }}{% endblocktrans %}">
|
||||
<span class="hidden-xs">{{ subevent_list.after|date:subevent_list.week_format }}</span>
|
||||
<span class="fa fa-arrow-right" aria-hidden="true"></span>
|
||||
{% icon "arrow-right" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% include "pretixpresale/fragment_week_calendar.html" with show_avail=event.settings.event_list_availability days=subevent_list.days show_names=subevent_list.show_names %}
|
||||
<div class="visible-xs text-center" aria-hidden="true">
|
||||
<a href="?{% url_replace request "date" subevent_list.before|date:"o-\WW" %}"
|
||||
class="btn btn-default" data-save-scrollpos aria-label="{% blocktrans with week=subevent_list.before|date:subevent_list.week_format %}Show previous week, {{ week }}{% endblocktrans %}">
|
||||
<span class="fa fa-arrow-left" aria-hidden="true"></span>
|
||||
{{ subevent_list.before|date:subevent_list.week_format }}
|
||||
</a>
|
||||
<a href="?{% url_replace request "date" subevent_list.after|date:"o-\WW" %}"
|
||||
class="btn btn-default" data-save-scrollpos aria-label="{% blocktrans with week=subevent_list.after|date:subevent_list.week_format %}Show next week, {{ week }}{% endblocktrans %}">
|
||||
{{ subevent_list.after|date:subevent_list.week_format }}
|
||||
<span class="fa fa-arrow-right" aria-hidden="true"></span>
|
||||
</a>
|
||||
<div class="row visible-xs">
|
||||
<div class="col-xs-6 text-left flip">
|
||||
<a href="?{% url_replace request "date" subevent_list.before|date:"o-\WW" %}"
|
||||
class="btn btn-default" data-save-scrollpos aria-label="{% blocktrans with week=subevent_list.before|date:subevent_list.week_format %}Show previous week, {{ week }}{% endblocktrans %}">
|
||||
<span class="fa fa-arrow-left" aria-hidden="true"></span>
|
||||
<span class="hidden-xs">{{ subevent_list.before|date:subevent_list.week_format }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xs-6 text-right flip">
|
||||
<a href="?{% url_replace request "date" subevent_list.after|date:"o-\WW" %}"
|
||||
class="btn btn-default" data-save-scrollpos aria-label="{% blocktrans with week=subevent_list.after|date:subevent_list.week_format %}Show next week, {{ week }}{% endblocktrans %}">
|
||||
<span class="hidden-xs">{{ subevent_list.after|date:subevent_list.week_format }}</span>
|
||||
<span class="fa fa-arrow-right" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user