CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

[A11y] fix calendar nav dropdown (#5078)

Browse Source 
* [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
2025-05-14 10:01:16 +02:00
committed by GitHub
parent 4f4903b00e
commit d103d8782b
13 changed files with 386 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar.html
View File

@@ -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>

87
src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar_week.html
View File

@@ -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>

2
src/pretix/presale/templates/pretixpresale/fragment_calendar.html
View File

@@ -7,7 +7,7 @@
<thead>
<tr>
{% for d in weeks|iter_weekdays %}
<th><span aria-hidden="true">{{ d|date_fast:"D" }}</span><span class="sr-only">{{ d|date_fast:"l" }}</span></th>
<th><span aria-hidden="true" class="text-muted">{{ d|date_fast:"D" }}</span><span class="sr-only">{{ d|date_fast:"l" }}</span></th>
{% endfor %}
</tr>
</thead>

1
src/pretix/presale/templates/pretixpresale/fragment_event_list_filter.html
View File

@@ -16,6 +16,7 @@
{% for f in filter_form.fields %}
{% bootstrap_field filter_form|getitem:f %}
{% endfor %}
<div class="visible-xs">&nbsp;</div>
<button type="submit" class="btn btn-primary">
<span class="fa fa-filter" aria-hidden="true"></span>
{% trans "Filter" %}

122
src/pretix/presale/templates/pretixpresale/organizers/calendar.html
View File

@@ -1,61 +1,91 @@
{% extends "pretixpresale/organizers/base.html" %}
{% load i18n %}
{% load icon %}
{% load rich_text %}
{% load eventurl %}
{% load urlreplace %}
{% block title %}{% trans "Event overview" %}{% endblock %}
{% block content %}
{% if organizer_homepage_text %}
<div>
<div class="blank-after">
{{ organizer_homepage_text | rich_text }}
</div>
{% endif %}
<h3>{{ date|date:"F Y" }}</h3>
<form class="form-inline" method="get" id="monthselform" action="{% eventurl request.organizer "presale:organizer.index" %}">
{% for f, v in request.GET.items %}
{% if f != "date" %}
<input type="hidden" name="{{ f }}" value="{{ v }}">
{% endif %}
{% endfor %}
<div class="row">
<div class="col-md-5 col-sm-6 col-xs-12 text-left flip">
{% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="calendar" %}
</div>
<div class="col-md-2 col-sm-4 col-xs-8 text-center" role="group" aria-label="{% trans "Select month to show" %}">
<select name="date" class="form-control" aria-label="{% trans "Month" %}">
{% for y in years %}
<optgroup label="{{ y }}">
{% for m in months %}
<option value="{{ y }}-{{ m|date:"m" }}" {% if m.month == date.month and y == 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>
</div>
<div class="col-md-5 col-sm-2 col-xs-4 text-right flip">
{% if has_before %}
<a href="?{% url_replace request "date" before|date:"Y-m" %}"
class="btn btn-default" data-save-scrollpos aria-label="{{ before|date:"F Y" }}">
<span class="fa fa-arrow-left" aria-hidden="true"></span>
<span class="hidden-sm hidden-xs">{{ before|date:"F Y" }}</span>
</a>
{% endif %}
{% if has_after %}
<a href="?{% url_replace request "date" after|date:"Y-m" %}"
class="btn btn-default" data-save-scrollpos aria-label="{{ after|date:"F Y" }}">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
<span class="hidden-sm hidden-xs">{{ after|date:"F Y" }}</span>
</a>
{% endif %}
</div>
<div class="blank-after text-left flip">
{% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="calendar" %}
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">
<strong>
{% blocktrans trimmed with month=date|date:"F Y" %}
Events in {{ month }}
{% endblocktrans %}
</strong>
</h2>
</div>
</form>
{% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
{% include "pretixpresale/fragment_calendar.html" with show_avail=request.organizer.settings.event_list_availability %}
{% if filter_form.fields %}
<div class="panel-subhead">
{% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
</div>
{% endif %}
<div class="panel-body">
<nav aria-label="{% trans "calendar navigation" %}">
<ul class="row calendar-nav">
<li class="text-left flip">
{% if has_before %}
<a href="?{% url_replace request "date" before|date:"Y-m" %}"
class="btn btn-default" data-save-scrollpos aria-label="{{ before|date:"F Y" }}">
{% icon "arrow-left" %}
<span class="hidden-xs">{{ before|date:"F Y" }}</span>
</a>
{% endif %}
</li>
<li class="text-center">
<form class="form-inline" method="get" id="monthselform" action="{% eventurl request.organizer "presale:organizer.index" %}">
{% for f, v in request.GET.items %}
{% if f != "date" %}
<input type="hidden" name="{{ f }}" value="{{ v }}">
{% endif %}
{% endfor %}
<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 years %}
<optgroup label="{{ y }}">
{% for m in months %}
<option value="{{ y }}-{{ m|date:"m" }}" {% if m.month == date.month and y == 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="text-right flip">
{% if has_after %}
<a href="?{% url_replace request "date" after|date:"Y-m" %}"
class="btn btn-default" data-save-scrollpos aria-label="{{ after|date:"F Y" }}">
<span class="hidden-xs">{{ after|date:"F Y" }}</span>
{% icon "arrow-right" %}
</a>
{% endif %}
</li>
</ul>
</nav>
{% include "pretixpresale/fragment_calendar.html" with show_avail=request.organizer.settings.event_list_availability %}
</div>
</div>
{% if multiple_timezones %}
<div class="alert alert-info">
{% blocktrans trimmed %}

116
src/pretix/presale/templates/pretixpresale/organizers/calendar_day.html
View File

@@ -1,68 +1,102 @@
{% extends "pretixpresale/organizers/base.html" %}
{% load i18n %}
{% load icon %}
{% load rich_text %}
{% load eventurl %}
{% load urlreplace %}
{% block title %}{% trans "Event overview" %}{% endblock %}
{% block content %}
{% if organizer_homepage_text %}
<div>
<div class="blank-after">
{{ organizer_homepage_text | rich_text }}
</div>
{% endif %}
<h3>{{ date|date:"DATE_FORMAT" }}</h3>
<form class="form-inline" method="get" id="monthselform"
action="{% eventurl request.organizer "presale:organizer.index" %}">
{% for f, v in request.GET.items %}
{% if f != "date" %}
<input type="hidden" name="{{ f }}" value="{{ v }}">
{% endif %}
{% endfor %}
<div class="row">
<div class="col-md-5 col-sm-6 col-xs-12 text-left flip">
{% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="day" %}
<div class="blank-after text-left flip">
{% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="day" %}
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">
<strong>
{% blocktrans trimmed with day=date|date:"DATE_FORMAT" %}
Events on {{ day }}
{% endblocktrans %}
</strong>
</h2>
</div>
{% if filter_form.fields %}
<div class="panel-subhead">
{% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
</div>
<div class="col-md-2 col-sm-4 col-xs-8 text-center">
<input class="datepickerfield form-control" value="{{ date|date:"SHORT_DATE_FORMAT" }}" name="date">
<button type="submit" class="js-hidden btn btn-default">
{% trans "Go" %}
</button>
</div>
<div class="col-md-5 col-sm-2 col-xs-4 text-right flip">
{% endif %}
<div class="panel-body">
<nav aria-label="{% trans "calendar navigation" %}">
<ul class="row calendar-nav">
<li class="text-left flip">
{% if has_before %}
<a href="?{% url_replace request "date" before.date.isoformat %}"
class="btn btn-default" data-save-scrollpos aria-label="{{ before|date:"SHORT_DATE_FORMAT" }}">
{% icon "arrow-left" %}
<span class="hidden-xs">{{ before|date:"SHORT_DATE_FORMAT" }}</span>
</a>
{% endif %}
</li>
<li class="text-center">
<form class="form-inline" method="get" id="monthselform" action="{% eventurl request.organizer "presale:organizer.index" %}">
{% for f, v in request.GET.items %}
{% if f != "date" %}
<input type="hidden" name="{{ f }}" value="{{ v }}">
{% endif %}
{% endfor %}
<fieldset>
<legend class="sr-only">{% trans "Select a date to display" %}</legend>
<div>
<label for="calendar-input-date">{% trans "Date" %}</label>
</div>
<div class="input-group">
<input class="datepickerfield form-control" id="calendar-input-date" value="{{ date|date:"SHORT_DATE_FORMAT" }}" name="date">
<span class="input-group-btn">
<button type="submit" class="btn btn-default" aria-label="{% trans "Show date" %}">
{% icon "chevron-right" %}
</button>
</span>
</div>
</fieldset>
</form>
</li>
<li class="text-right flip">
{% if has_after %}
<a href="?{% url_replace request "date" after.date.isoformat %}"
class="btn btn-default" data-save-scrollpos aria-label="{{ after|date:"SHORT_DATE_FORMAT" }}">
<span class="hidden-xs">{{ after|date:"SHORT_DATE_FORMAT" }}</span>
{% icon "arrow-right" %}
</a>
{% endif %}
</li>
</ul>
</nav>
{% include "pretixpresale/fragment_day_calendar.html" with show_avail=request.organizer.settings.event_list_availability %}
<div class="row visible-xs">
{% if has_before %}
<div class="col-xs-6 text-left flip">
<a href="?{% url_replace request "date" before.date.isoformat %}"
class="btn btn-default" data-save-scrollpos aria-label="{{ before|date:"SHORT_DATE_FORMAT" }}">
class="btn btn-default">
<span class="fa fa-arrow-left" aria-hidden="true"></span>
<span class="hidden-sm hidden-xs">{{ before|date:"SHORT_DATE_FORMAT" }}</span>
<span class="hidden-xs">{{ before|date:"SHORT_DATE_FORMAT" }}</span>
</a>
</div>
{% endif %}
{% if has_after %}
<div class="col-xs-6 text-right flip{% if not has_before %} col-xs-offset-6{% endif %}">
<a href="?{% url_replace request "date" after.date.isoformat %}"
class="btn btn-default" data-save-scrollpos aria-label="{{ after|date:"SHORT_DATE_FORMAT" }}">
<span class="hidden-sm hidden-xs">{{ after|date:"SHORT_DATE_FORMAT" }}</span>
class="btn btn-default">
<span class="hidden-xs">{{ after|date:"SHORT_DATE_FORMAT" }}</span>
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</a>
</div>
{% endif %}
</div>
</div>
</form>
{% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
{% include "pretixpresale/fragment_day_calendar.html" with show_avail=request.organizer.settings.event_list_availability %}
<div class="col-sm-4 visible-xs text-center">
{% if has_before %}
<a href="?{% url_replace request "date" before.date.isoformat %}"
class="btn btn-default">
<span class="fa fa-arrow-left" aria-hidden="true"></span>
{{ before|date:"SHORT_DATE_FORMAT" }}
</a>
{% endif %}
{% if has_after %}
<a href="?{% url_replace request "date" after.date.isoformat %}"
class="btn btn-default">
{{ after|date:"SHORT_DATE_FORMAT" }}
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</a>
{% endif %}
</div>
{% if multiple_timezones %}

141
src/pretix/presale/templates/pretixpresale/organizers/calendar_week.html
View File

@@ -1,82 +1,117 @@
{% extends "pretixpresale/organizers/base.html" %}
{% load i18n %}
{% load icon %}
{% load rich_text %}
{% load eventurl %}
{% load urlreplace %}
{% block title %}{% trans "Event overview" %}{% endblock %}
{% block content %}
{% if organizer_homepage_text %}
<div>
<div class="blank-after">
{{ organizer_homepage_text | rich_text }}
</div>
{% endif %}
<h3>{{ date|date:"F Y" }}</h3>
<form class="form-inline" method="get" id="monthselform"
action="{% eventurl request.organizer "presale:organizer.index" %}">
{% for f, v in request.GET.items %}
{% if f != "date" %}
<input type="hidden" name="{{ f }}" value="{{ v }}">
{% endif %}
{% endfor %}
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 text-left flip">
{% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="week" %}
<div class="blank-after text-left flip">
{% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="week" %}
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">
<strong>
{% blocktrans trimmed with week=date|date:week_format week_day_from=date|date:short_month_day_format week_day_to=date|date:short_month_day_format %}
Events in {{ week }} ({{ week_day_from }} – {{ week_day_to }})
{% endblocktrans %}
</strong>
</h2>
</div>
{% if filter_form.fields %}
<div class="panel-subhead">
{% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
</div>
<div class="col-md-4 col-sm-4 col-xs-8 text-center">
<select name="date" class="form-control" aria-label="{% trans "Select week to show" %}">
{% for weeks_per_year in 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 == date.isocalendar.0 and w.0.isocalendar.1 == date.isocalendar.1 %}selected{% endif %}>
{{ w.0|date:week_format }}
({{ w.0|date:short_month_day_format }} – {{ w.1|date:short_month_day_format }})
</option>
{% endfor %}
</optgroup>
{% endfor %}
</select>
<button type="submit" class="js-hidden btn btn-default">
{% trans "Go" %}
</button>
</div>
<div class="col-md-4 col-sm-2 col-xs-4 text-right flip">
{% endif %}
<div class="panel-body">
<nav aria-label="{% trans "calendar navigation" %}">
<ul class="row calendar-nav">
<li class="text-left flip">
{% if has_before %}
<a href="?{% url_replace request "date" before|date:"o-\WW" %}"
class="btn btn-default" data-save-scrollpos aria-label="{{ before|date:week_format }}">
{% icon "arrow-left" %}
<span class="hidden-xs">{{ before|date:week_format }}</span>
</a>
{% endif %}
</li>
<li class="text-center">
<form class="form-inline" method="get" id="monthselform" action="{% eventurl request.organizer "presale:organizer.index" %}">
{% for f, v in request.GET.items %}
{% if f != "date" %}
<input type="hidden" name="{{ f }}" value="{{ v }}">
{% endif %}
{% endfor %}
<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" id="calendar-input-date">
{% for weeks_per_year in 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 == date.isocalendar.0 and w.0.isocalendar.1 == date.isocalendar.1 %}selected{% endif %}>
{{ w.0|date:week_format }}
({{ w.0|date:short_month_day_format }} – {{ w.1|date: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="text-right flip">
{% if has_after %}
<a href="?{% url_replace request "date" after|date:"o-\WW" %}"
class="btn btn-default" data-save-scrollpos aria-label="{{ after|date:week_format }}">
<span class="hidden-xs">{{ after|date:week_format }}</span>
{% icon "arrow-right" %}
</a>
{% endif %}
</li>
</ul>
</nav>
{% include "pretixpresale/fragment_week_calendar.html" with show_avail=request.organizer.settings.event_list_availability %}
<div class="row visible-sm visible-xs">
{% if has_before %}
<div class="col-xs-6 text-left flip">
<a href="?{% url_replace request "date" before|date:"o-\WW" %}"
class="btn btn-default" data-save-scrollpos aria-label="{{ before|date:week_format }}">
class="btn btn-default">
<span class="fa fa-arrow-left" aria-hidden="true"></span>
<span class="hidden-sm hidden-xs">{{ before|date:week_format }}</span>
{{ before|date:week_format }}
</a>
</div>
{% endif %}
{% if has_after %}
<div class="col-xs-6 text-right flip">
<a href="?{% url_replace request "date" after|date:"o-\WW" %}"
class="btn btn-default" data-save-scrollpos aria-label="{{ after|date:week_format }}">
<span class="hidden-sm hidden-xs">{{ after|date:week_format }}</span>
class="btn btn-default">
{{ after|date:week_format }}
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</a>
</div>
{% endif %}
</div>
</div>
</form>
{% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
{% include "pretixpresale/fragment_week_calendar.html" with show_avail=request.organizer.settings.event_list_availability %}
<div class="col-sm-12 visible-sm visible-xs text-center">
{% if has_before %}
<a href="?{% url_replace request "date" before|date:"o-\WW" %}"
class="btn btn-default">
<span class="fa fa-arrow-left" aria-hidden="true"></span>
{{ before|date:week_format }}
</a>
{% endif %}
{% if has_after %}
<a href="?{% url_replace request "date" after|date:"o-\WW" %}"
class="btn btn-default">
{{ after|date:week_format }}
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</a>
{% endif %}
</div>
{% if multiple_timezones %}
<div class="alert alert-info">
{% blocktrans trimmed %}

14
src/pretix/presale/templates/pretixpresale/organizers/index.html
View File

@@ -19,17 +19,13 @@
<meta property="og:url" content="{% abseventurl organizer "presale:organizer.index" %}"/>
{% endblock %}
{% block content %}
<div>
{% if organizer_homepage_text %}
{% if organizer_homepage_text %}
<div class="blank-after">
{{ organizer_homepage_text | rich_text }}
{% endif %}
</div>
<div id="monthselform">
<div class="row">
<div class="col-md-12">
{% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="list" %}
</div>
</div>
{% endif %}
<div class="blank-after text-left flip">
{% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="list" %}
</div>
<div class="panel panel-default">
<div class="panel-heading">

13
src/pretix/static/pretixpresale/js/ui/main.js
View File

@@ -476,17 +476,10 @@ $(function () {
$("[data-save-scrollpos]").on("click submit", function () {
sessionStorage.setItem('scrollpos', window.scrollY);
});
$("#monthselform").on("submit", function () {
sessionStorage.setItem('scrollpos', window.scrollY);
});
}
$("#monthselform select").change(function () {
if (sessionStorage) sessionStorage.setItem('scrollpos', window.scrollY);
this.form.submit();
});
$("#monthselform input").on("dp.change", function () {
if ($(this).data("DateTimePicker")) { // prevent submit after dp init
if (sessionStorage) sessionStorage.setItem('scrollpos', window.scrollY);
this.form.submit();
}
});
var update_cart_form = function () {
var is_enabled = $(".product-row input[type=checkbox]:checked, .variations input[type=checkbox]:checked, .product-row input[type=radio]:checked, .variations input[type=radio]:checked").length;
if (!is_enabled) {

43
src/pretix/static/pretixpresale/scss/_calendar.scss
View File

@@ -3,7 +3,9 @@
width: 14.29%;
}
h3 {
font-size: 16px;
font-size: 0.875rem;
color: $text-muted;
border-bottom: 2px solid $table-border-color;
}
p {
margin-bottom: 3px;
@@ -11,6 +13,7 @@
.events {
list-style: none;
padding: 0;
margin-bottom: 0;
}
a.event {
--status-bg-color: var(--pretix-brand-primary-tint-90);
@@ -97,9 +100,13 @@
margin-bottom: 15px;
}
h3 {
margin-top: 0;
padding-top: 10px;
padding-bottom: 8px;
margin-bottom: 8px;
font-weight: bold;
cursor: pointer;
background-color: #fff;
}
h3 .fa::before {
content: $fa-var-caret-right;
@@ -112,6 +119,10 @@
}
}
.table-calendar .day:nth-child(even) {
background-color: $table-bg-accent;
}
.event-list-filter-form {
.event-list-filter-form-row {
display: flex;
@@ -244,7 +255,7 @@
}
.day-calendar a.event {
margin: 1px;
margin: 0;
}
.day-calendar a.event .event-time {
display: inline;
@@ -373,9 +384,20 @@ if concurrency is higher than 9, JavaScript (currently in pretixpresale/js/ui/ma
grid-template-rows: repeat(var(--concurrency, 1), auto);
}
.day-timeline {
--total-concurrency: var(--concurrency);
}
.day-timeline > li {
grid-column: calc(1 + var(--offset-hour, 0)*60/var(--raster-size, 5) + var(--offset-minute, 0)/var(--raster-size, 5)) / span calc(var(--duration-hour, 0)*60/var(--raster-size, 5) + var(--duration-minute, 0)/var(--raster-size, 5));
grid-row: var(--concurrency, 1) / span 1;
padding: 3px 8px 0;
/* add 11px of padding-bottom to the events with --concurrency being the same as --total-concurrency, otherwise 0px */
padding-bottom: #{'round(down, calc(11px * var(--concurrency)/var(--total-concurrency)), 11px)'};
}
.day-timeline > li[data-concurrency="1"] {
padding-top: 8px;
}
.day-timeline > li:focus-within {
z-index: 2; /* move to front so focus-outline overlays other elements */
@@ -385,12 +407,14 @@ if concurrency is higher than 9, JavaScript (currently in pretixpresale/js/ui/ma
grid-row: 1 / span var(--concurrency, 1) !important;
}
.ticks li {
padding: 8px 3px 5px;
padding: 11px 8px 8px;
line-height: 1;
border-top-left-radius: $border-radius-base;
border-top-right-radius: $border-radius-base;
border-bottom: 2px solid $table-border-color;
font-weight: bold;
}
.ticks li:nth-of-type(odd), .tick {
.tick {
background-color: $table-bg-accent;
}
.day-timeline:nth-last-of-type(1) li {
@@ -422,7 +446,16 @@ if concurrency is higher than 9, JavaScript (currently in pretixpresale/js/ui/ma
.weekday {
flex: 1;
margin: 0 5px;
padding: 0 8px 8px;
}
.weekday:nth-child(even) {
background-color: $table-bg-accent;
}
.weekday h3 {
margin-left: -8px;
margin-right: -8px;
padding-left: 8px;
padding-right: 8px;
}
.weekday:first-child {
margin-left: 0;

18
src/pretix/static/pretixpresale/scss/_event.scss
View File

@@ -240,14 +240,26 @@ div.front-page {
}
}
.calendar-nav, .calendar-nav li {
.calendar-nav, .calendar-nav > li {
list-style: none;
margin: 0;
padding: 0
}
.calendar-nav li {
padding: 10px 0;
.calendar-nav > li {
padding: 0 0 10px;
}
.calendar-nav {
display: flex;
align-items: end;
}
.calendar-nav > li {
width: 60%;
}
.calendar-nav > li:first-child,
.calendar-nav > li:last-child {
width: 20%;
}
.subevent-toggle {
display: none;

4
src/pretix/static/pretixpresale/scss/_forms.scss
View File

@@ -23,6 +23,10 @@ a.btn, button.btn {
}
}
.input-group:has(.input-group-btn:last-child) *:not(last-child) {
border-right: 0;
}
.panel-title .radio {
margin-left: 20px;
}

2
src/pretix/static/pretixpresale/scss/main.scss
View File

@@ -14,7 +14,7 @@ $font-size-h4: ($font-size-base * 1.25) !default;
$font-size-h5: $font-size-base !default;
$font-size-h6: ($font-size-base * .85) !default;
$line-height-base: 1.428571429 !default;
$line-height-base: 1.43 !default;
$line-height-computed: ($font-size-base * $line-height-base) !default;
$line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
$line-height-small: 1.5 !default;