From d103d8782bb7ce16d2b68616077b8de33860b759 Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Wed, 14 May 2025 10:01:16 +0200
Subject: [PATCH] [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
---
 .../event/fragment_subevent_calendar.html     |  45 +++---
 .../fragment_subevent_calendar_week.html      |  87 ++++++-----
 .../pretixpresale/fragment_calendar.html      |   2 +-
 .../fragment_event_list_filter.html           |   1 +
 .../pretixpresale/organizers/calendar.html    | 122 +++++++++------
 .../organizers/calendar_day.html              | 116 +++++++++-----
 .../organizers/calendar_week.html             | 141 +++++++++++-------
 .../pretixpresale/organizers/index.html       |  14 +-
 src/pretix/static/pretixpresale/js/ui/main.js |  13 +-
 .../static/pretixpresale/scss/_calendar.scss  |  43 +++++-
 .../static/pretixpresale/scss/_event.scss     |  18 ++-
 .../static/pretixpresale/scss/_forms.scss     |   4 +
 .../static/pretixpresale/scss/main.scss       |   2 +-
 13 files changed, 386 insertions(+), 222 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar.html b/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar.html
index fa7ed7e82..9d15cbb8d 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar.html
@@ -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>
diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar_week.html b/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar_week.html
index fa0d31c4c..6f331b060 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar_week.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar_week.html
@@ -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>
diff --git a/src/pretix/presale/templates/pretixpresale/fragment_calendar.html b/src/pretix/presale/templates/pretixpresale/fragment_calendar.html
index a843b09ae..b61189d68 100644
--- a/src/pretix/presale/templates/pretixpresale/fragment_calendar.html
+++ b/src/pretix/presale/templates/pretixpresale/fragment_calendar.html
@@ -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>
diff --git a/src/pretix/presale/templates/pretixpresale/fragment_event_list_filter.html b/src/pretix/presale/templates/pretixpresale/fragment_event_list_filter.html
index de30e1546..f763a54d8 100644
--- a/src/pretix/presale/templates/pretixpresale/fragment_event_list_filter.html
+++ b/src/pretix/presale/templates/pretixpresale/fragment_event_list_filter.html
@@ -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" %}
diff --git a/src/pretix/presale/templates/pretixpresale/organizers/calendar.html b/src/pretix/presale/templates/pretixpresale/organizers/calendar.html
index b0f78055f..2cb977dbe 100644
--- a/src/pretix/presale/templates/pretixpresale/organizers/calendar.html
+++ b/src/pretix/presale/templates/pretixpresale/organizers/calendar.html
@@ -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 %}
diff --git a/src/pretix/presale/templates/pretixpresale/organizers/calendar_day.html b/src/pretix/presale/templates/pretixpresale/organizers/calendar_day.html
index 5dd18af0e..b616cf833 100644
--- a/src/pretix/presale/templates/pretixpresale/organizers/calendar_day.html
+++ b/src/pretix/presale/templates/pretixpresale/organizers/calendar_day.html
@@ -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 %}
diff --git a/src/pretix/presale/templates/pretixpresale/organizers/calendar_week.html b/src/pretix/presale/templates/pretixpresale/organizers/calendar_week.html
index 689a96cd7..49bc9fe7c 100644
--- a/src/pretix/presale/templates/pretixpresale/organizers/calendar_week.html
+++ b/src/pretix/presale/templates/pretixpresale/organizers/calendar_week.html
@@ -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 %}
diff --git a/src/pretix/presale/templates/pretixpresale/organizers/index.html b/src/pretix/presale/templates/pretixpresale/organizers/index.html
index 4dbc65fe6..8ca115a70 100644
--- a/src/pretix/presale/templates/pretixpresale/organizers/index.html
+++ b/src/pretix/presale/templates/pretixpresale/organizers/index.html
@@ -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">
diff --git a/src/pretix/static/pretixpresale/js/ui/main.js b/src/pretix/static/pretixpresale/js/ui/main.js
index c678fc412..6f3b9ea51 100644
--- a/src/pretix/static/pretixpresale/js/ui/main.js
+++ b/src/pretix/static/pretixpresale/js/ui/main.js
@@ -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) {
diff --git a/src/pretix/static/pretixpresale/scss/_calendar.scss b/src/pretix/static/pretixpresale/scss/_calendar.scss
index e3e9ed1c2..5ff92a785 100644
--- a/src/pretix/static/pretixpresale/scss/_calendar.scss
+++ b/src/pretix/static/pretixpresale/scss/_calendar.scss
@@ -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;
diff --git a/src/pretix/static/pretixpresale/scss/_event.scss b/src/pretix/static/pretixpresale/scss/_event.scss
index 3b901caed..cf94f0de8 100644
--- a/src/pretix/static/pretixpresale/scss/_event.scss
+++ b/src/pretix/static/pretixpresale/scss/_event.scss
@@ -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;
diff --git a/src/pretix/static/pretixpresale/scss/_forms.scss b/src/pretix/static/pretixpresale/scss/_forms.scss
index 60455f8e4..44ed8f677 100644
--- a/src/pretix/static/pretixpresale/scss/_forms.scss
+++ b/src/pretix/static/pretixpresale/scss/_forms.scss
@@ -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;
 }
diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss
index c018fe16a..33f939e30 100644
--- a/src/pretix/static/pretixpresale/scss/main.scss
+++ b/src/pretix/static/pretixpresale/scss/main.scss
@@ -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;