CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-08 15:44:02 +00:00
Code Issues Packages Projects Releases Wiki 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 i18n %}
{% load eventurl %} {% load eventurl %}
{% load icon %}
{% load urlreplace %} {% load urlreplace %}
<nav aria-label="{% trans "calendar navigation" %}"> <nav aria-label="{% trans "calendar navigation" %}">
<ul class="row calendar-nav"> <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 %} {% if subevent_list.has_before %}
<a href="?{% url_replace request "date" subevent_list.before|date:"Y-m" %}" <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 %}"> 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> <span class="hidden-xs">{{ subevent_list.before|date:"F Y" }}</span>
</a> </a>
{% endif %} {% endif %}
</li> </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 %}"> <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 %} {% for f, v in request.GET.items %}
{% if f != "date" %} {% if f != "date" %}
<input type="hidden" name="{{ f }}" value="{{ v }}"> <input type="hidden" name="{{ f }}" value="{{ v }}">
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<select name="date" class="form-control" aria-label="{% trans "Select month to show" %}"> <fieldset>
{% for y in subevent_list.years %} <legend class="sr-only">{% trans "Select a month to display" %}</legend>
<optgroup label="{{ y }}"> <div>
{% for m in subevent_list.months %} <label for="calendar-input-date">{% trans "Month" %}</label>
<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> </div>
{% endfor %} <div class="input-group">
</optgroup> <select name="date" class="form-control" id="calendar-input-date">
{% endfor %} {% for y in subevent_list.years %}
</select> <optgroup label="{{ y }}">
<button type="submit" class="js-hidden btn btn-default"> {% for m in subevent_list.months %}
{% trans "Go" %} <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>
</button> {% 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> </form>
</li> </li>
<li class="col-sm-4 col-xs-2 text-right flip"> <li class="text-right flip">
{% if subevent_list.has_after %} {% if subevent_list.has_after %}
<a href="?{% url_replace request "date" subevent_list.after|date:"Y-m" %}" <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 %}"> 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="hidden-xs">{{ subevent_list.after|date:"F Y" }}</span>
<span class="fa fa-arrow-right" aria-hidden="true"></span> {% icon "arrow-right" %}
</a> </a>
{% endif %} {% endif %}
</li> </li>

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

@@ -1,63 +1,78 @@
{% load i18n %} {% load i18n %}
{% load eventurl %} {% load eventurl %}
{% load icon %}
{% load urlreplace %} {% load urlreplace %}
<nav aria-label="{% trans "calendar navigation" %}"> <nav aria-label="{% trans "calendar navigation" %}">
<ul class="row calendar-nav"> <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 %} {% if subevent_list.has_before %}
<a href="?{% url_replace request "date" subevent_list.before|date:"o-\WW" %}" <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 %}"> 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> <span class="hidden-xs">{{ subevent_list.before|date:subevent_list.week_format }}</span>
</a> </a>
{% endif %} {% endif %}
</li> </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 %}"> <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 %} {% for f, v in request.GET.items %}
{% if f != "date" %} {% if f != "date" %}
<input type="hidden" name="{{ f }}" value="{{ v }}"> <input type="hidden" name="{{ f }}" value="{{ v }}">
{% endif %} {% 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>
{% endfor %} {% endfor %}
</select> <fieldset>
<button type="submit" class="js-hidden btn btn-default"> <legend class="sr-only">{% trans "Select a week to display" %}</legend>
{% trans "Go" %} <div>
</button> <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> </form>
</li> </li>
<li class="col-sm-4 col-xs-2 text-right flip"> <li class="text-right flip">
{% if subevent_list.has_after %} {% if subevent_list.has_after %}
<a href="?{% url_replace request "date" subevent_list.after|date:"o-\WW" %}" <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 %}"> 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="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> </a>
{% endif %} {% endif %}
</li> </li>
</ul> </ul>
</nav> </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 %} {% 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"> <div class="row visible-xs">
<a href="?{% url_replace request "date" subevent_list.before|date:"o-\WW" %}" <div class="col-xs-6 text-left flip">
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 %}"> <a href="?{% url_replace request "date" subevent_list.before|date:"o-\WW" %}"
<span class="fa fa-arrow-left" aria-hidden="true"></span> 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 %}">
{{ subevent_list.before|date:subevent_list.week_format }} <span class="fa fa-arrow-left" aria-hidden="true"></span>
</a> <span class="hidden-xs">{{ subevent_list.before|date:subevent_list.week_format }}</span>
<a href="?{% url_replace request "date" subevent_list.after|date:"o-\WW" %}" </a>
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 %}"> </div>
{{ subevent_list.after|date:subevent_list.week_format }} <div class="col-xs-6 text-right flip">
<span class="fa fa-arrow-right" aria-hidden="true"></span> <a href="?{% url_replace request "date" subevent_list.after|date:"o-\WW" %}"
</a> 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> </div>

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

@@ -7,7 +7,7 @@
<thead> <thead>
<tr> <tr>
{% for d in weeks|iter_weekdays %} {% 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 %} {% endfor %}
</tr> </tr>
</thead> </thead>

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

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

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

@@ -1,61 +1,91 @@
{% extends "pretixpresale/organizers/base.html" %} {% extends "pretixpresale/organizers/base.html" %}
{% load i18n %} {% load i18n %}
{% load icon %}
{% load rich_text %} {% load rich_text %}
{% load eventurl %} {% load eventurl %}
{% load urlreplace %} {% load urlreplace %}
{% block title %}{% trans "Event overview" %}{% endblock %} {% block title %}{% trans "Event overview" %}{% endblock %}
{% block content %} {% block content %}
{% if organizer_homepage_text %} {% if organizer_homepage_text %}
<div> <div class="blank-after">
{{ organizer_homepage_text | rich_text }} {{ organizer_homepage_text | rich_text }}
</div> </div>
{% endif %} {% endif %}
<h3>{{ date|date:"F Y" }}</h3> <div class="blank-after text-left flip">
<form class="form-inline" method="get" id="monthselform" action="{% eventurl request.organizer "presale:organizer.index" %}"> {% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="calendar" %}
{% for f, v in request.GET.items %} </div>
{% if f != "date" %} <div class="panel panel-default">
<input type="hidden" name="{{ f }}" value="{{ v }}"> <div class="panel-heading">
{% endif %} <h2 class="panel-title">
{% endfor %} <strong>
<div class="row"> {% blocktrans trimmed with month=date|date:"F Y" %}
<div class="col-md-5 col-sm-6 col-xs-12 text-left flip"> Events in {{ month }}
{% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="calendar" %} {% endblocktrans %}
</div> </strong>
<div class="col-md-2 col-sm-4 col-xs-8 text-center" role="group" aria-label="{% trans "Select month to show" %}"> </h2>
<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> </div>
</form> {% if filter_form.fields %}
{% include "pretixpresale/fragment_event_list_filter.html" with request=request %} <div class="panel-subhead">
{% include "pretixpresale/fragment_calendar.html" with show_avail=request.organizer.settings.event_list_availability %} {% 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 %} {% if multiple_timezones %}
<div class="alert alert-info"> <div class="alert alert-info">
{% blocktrans trimmed %} {% blocktrans trimmed %}

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

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

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

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

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

@@ -3,7 +3,9 @@
width: 14.29%; width: 14.29%;
} }
h3 { h3 {
font-size: 16px; font-size: 0.875rem;
color: $text-muted;
border-bottom: 2px solid $table-border-color;
} }
p { p {
margin-bottom: 3px; margin-bottom: 3px;
@@ -11,6 +13,7 @@
.events { .events {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin-bottom: 0;
} }
a.event { a.event {
--status-bg-color: var(--pretix-brand-primary-tint-90); --status-bg-color: var(--pretix-brand-primary-tint-90);
@@ -97,9 +100,13 @@
margin-bottom: 15px; margin-bottom: 15px;
} }
h3 { h3 {
margin-top: 0;
padding-top: 10px;
padding-bottom: 8px;
margin-bottom: 8px; margin-bottom: 8px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
background-color: #fff;
} }
h3 .fa::before { h3 .fa::before {
content: $fa-var-caret-right; 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 {
.event-list-filter-form-row { .event-list-filter-form-row {
display: flex; display: flex;
@@ -244,7 +255,7 @@
} }
.day-calendar a.event { .day-calendar a.event {
margin: 1px; margin: 0;
} }
.day-calendar a.event .event-time { .day-calendar a.event .event-time {
display: inline; 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); grid-template-rows: repeat(var(--concurrency, 1), auto);
} }
.day-timeline {
--total-concurrency: var(--concurrency);
}
.day-timeline > li { .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-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; 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 { .day-timeline > li:focus-within {
z-index: 2; /* move to front so focus-outline overlays other elements */ 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; grid-row: 1 / span var(--concurrency, 1) !important;
} }
.ticks li { .ticks li {
padding: 8px 3px 5px; padding: 11px 8px 8px;
line-height: 1; line-height: 1;
border-top-left-radius: $border-radius-base; border-top-left-radius: $border-radius-base;
border-top-right-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; background-color: $table-bg-accent;
} }
.day-timeline:nth-last-of-type(1) li { .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 { .weekday {
flex: 1; 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 { .weekday:first-child {
margin-left: 0; 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; list-style: none;
margin: 0; margin: 0;
padding: 0 padding: 0
} }
.calendar-nav li { .calendar-nav > li {
padding: 10px 0; 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 { .subevent-toggle {
display: none; 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 { .panel-title .radio {
margin-left: 20px; 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-h5: $font-size-base !default;
$font-size-h6: ($font-size-base * .85) !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-computed: ($font-size-base * $line-height-base) !default;
$line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome $line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
$line-height-small: 1.5 !default; $line-height-small: 1.5 !default;