Unify event list view on organizer and event-series (#4702)

src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar.html

@@ -1,7 +1,6 @@
 {% load i18n %}
 {% load eventurl %}
 {% load urlreplace %}
-{% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
 <nav aria-label="{% trans "calendar navigation" %}">
     <ul class="row calendar-nav">
         <li class="col-sm-4 col-xs-2 text-left flip">

src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar_week.html

@@ -1,7 +1,6 @@
 {% load i18n %}
 {% load eventurl %}
 {% load urlreplace %}
-{% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
 <nav aria-label="{% trans "calendar navigation" %}">
     <ul class="row calendar-nav">
         <li class="col-sm-4 col-xs-2 text-left flip">

src/pretix/presale/templates/pretixpresale/event/fragment_subevent_list.html

@@ -1,63 +1,39 @@
 {% load i18n %}
+{% load icon %}
 {% load eventurl %}
-{% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
+
-<ul class="list-unstyled">
+<dl class="full-width-list alternating-rows">
 {% for subev in subevent_list.subevent_list %}
-    <li class="subevent-row">
+    <div class="row">
-        <a href="{% if request.GET.voucher %}{% eventurl event "presale:event.redeem" cart_namespace=cart_namespace %}?voucher={{ request.GET.voucher|urlencode }}&subevent={{ subev.pk }}{% else %}{% eventurl event "presale:event.index" subevent=subev.id cart_namespace=cart_namespace %}{% endif %}">
+        <dt class="col-md-4 col-xs-12">
-        <div class="row">
+            <a href="{% if request.GET.voucher %}{% eventurl event "presale:event.redeem" cart_namespace=cart_namespace %}?voucher={{ request.GET.voucher|urlencode }}&amp;subevent={{ subev.pk }}{% else %}{% eventurl event "presale:event.index" subevent=subev.id cart_namespace=cart_namespace %}{% endif %}">
-            <div class="col-md-6">
+                {{ subev.name }}
-                <strong>{{ subev.name }}</strong>
+            </a>
-            </div>
+        </dt>
-            <div class="col-md-4">
+        <dd class="col-md-3 col-xs-12">
-                <span class="fa fa-calendar" aria-hidden="true"></span>
+            {{ subev.get_date_range_display_as_html }}
-                {{ subev.get_date_range_display_as_html }}
+            {% if event.settings.show_times %}
-                {% if event.settings.show_times %}
+                <br>
-                    <span data-time="{{ subev.date_from.isoformat }}" data-timezone="{{ event.timezone }}" data-time-short>
+                <span data-time="{{ subev.date_from.isoformat }}" data-timezone="{{ event.timezone }}" data-time-short>
-                        <span class="fa fa-clock-o" aria-hidden="true"></span>
+                    {% icon "clock-o" %}
-                        <time datetime="{{ subev.date_from.isoformat }}">{{ subev.date_from|date:"TIME_FORMAT" }}</time>
+                    <time datetime="{{ subev.date_from.isoformat }}">{{ subev.date_from|date:"TIME_FORMAT" }}</time>
-                    </span>
+                </span>
-                {% endif %}
+            {% endif %}
-            </div>
+        </dd>
-            <div class="col-md-2 text-right flip">
+        <dd class="col-md-3 col-xs-6">
-                {% if subev.presale_is_running and event.settings.event_list_availability %}
+            <small>
-                    {% if subev.best_availability_state == 100 %}
+                {% include "pretixpresale/fragment_event_list_status.html" with event=subev %}
-                        {% if subev.best_availability_is_low %}
+            </small>
-                            <span class="label label-success-warning">{% trans "Few tickets left" %}</span>
+        </dd>
-                        {% else %}
+        <dd class="col-md-2 col-xs-6 text-right flip">
-                            {% if subev.has_paid_item %}
+            <a class="btn btn-primary btn-block" href="{% if request.GET.voucher %}{% eventurl event "presale:event.redeem" cart_namespace=cart_namespace %}?voucher={{ request.GET.voucher|urlencode }}&amp;subevent={{ subev.pk }}{% else %}{% eventurl event "presale:event.index" subevent=subev.id cart_namespace=cart_namespace %}{% endif %}">
-                                <span class="label label-success">{% trans "Buy now" context "available_event_in_list" %}</span>
+                {% if subev.presale_is_running and subev.best_availability_state == 100 %}
-                            {% else %}
+                    {% icon "ticket" %} {% trans "Tickets" %}
-                                <span class="label label-success">{% trans "Book now" %}</span>
-                            {% endif %}
-                        {% endif %}
-                    {% elif subev.waiting_list_active and subev.best_availability_state >= 0 %}
-                        <span class="label label-warning">{% trans "Waiting list" %}</span>
-                    {% elif subev.best_availability_state == 20 %}
-                        <span class="label label-danger">{% trans "Reserved" %}</span>
-                    {% elif subev.best_availability_state < 20 %}
-                        {% if subev.has_paid_item %}
-                            <span class="label label-danger">{% trans "Sold out" %}</span>
-                        {% else %}
-                            <span class="label label-danger">{% trans "Fully booked" %}</span>
-                        {% endif %}
-                    {% endif %}
-                {% elif subev.presale_is_running %}
-                    <span class="label label-success">{% trans "Book now" %}</span>
-                {% elif subev.presale_has_ended %}
-                    <span class="label label-danger">{% trans "Sale over" %}</span>
-                {% elif event.settings.presale_start_show_date %}
-                    <span class="label label-warning">
-                                    {% blocktrans trimmed with date=subev.effective_presale_start|date:"SHORT_DATE_FORMAT" %}
-                                        Sale starts {{ date }}
-                                    {% endblocktrans %}
-                                </span>
                 {% else %}
-                    <span class="label label-warning">{% trans "Not yet on sale" %}</span>
+                    {% icon "info" %} {% trans "More info" %}
                 {% endif %}
-            </div>
+            </a>
-        </div>
+        </dd>
-        </a>
+    </div>
-    </li>
 {% endfor %}
-</ul>
+</dl>

src/pretix/presale/templates/pretixpresale/event/index.html

@@ -70,32 +70,37 @@
             {% endif %}
         {% endif %}
 
-        {% if subevent and "date" not in request.GET and "filtered" not in request.GET %}
+
-            <p>
+    {% if subevent_list_foldable %}
-            {% if show_cart %}
+        <details class="panel panel-{% if show_cart %}primary{% else %}default{% endif %}">
-                <button class="subevent-toggle btn btn-primary btn-block btn-lg" aria-expanded="false">
+            <summary class="panel-heading">
-                    <span class="fa fa-reply" aria-hidden="true"></span>
+    {% else %}
-                    {% trans "Add tickets for a different date" %}
+        <div class="panel panel-default">
-                </button>
-            {% else %}
-                <button class="subevent-toggle btn btn-default btn-block" aria-expanded="false">
-                    {% trans "View other date" %}
-                </button>
-            {% endif %}
-            </p>
-        {% else %}
-            <h3>{% trans "Choose date to book a ticket" %}</h3>
-        {% endif %}
-        <div class="panel panel-default subevent-list" id="subevent-list">
             <div class="panel-heading">
-                {% if subevent %}
+    {% endif %}
-                    {% trans "Other dates" context "subevent" %}
+                <h3 class="panel-title"><b>
+                {% if subevent_list_foldable %}
+                    {% if show_cart %}
+                        {% trans "Add tickets for a different date" %}
+                    {% else %}
+                        {% trans "View other date" %}
+                    {% endif %}
                 {% else %}
-                    {% trans "Dates" context "subevent" %}
+                    {% trans "Choose date to book a ticket" %}
-                {% endif %}
+                {% endif %}</b>
+                </h3>
+    {% if subevent_list_foldable %}
+            </summary>
+            <div>
+    {% else %}
             </div>
-            <div class="panel-body">
+    {% endif %}
-                <div>
+            {% if filter_form.fields %}
+                <div class="panel-subhead">
+                    {% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
+                </div>
+            {% endif %}
+                <div class="panel-body">
                     {% cache_large 15 subevent_list subevent_list_cache_key %}
                         {% if subevent_list.list_type == "calendar" %}
                             {% include "pretixpresale/event/fragment_subevent_calendar.html" %}
@@ -106,8 +111,13 @@
                         {% endif %}
                     {% endcache_large %}
                 </div>
+    {% if subevent_list_foldable %}
             </div>
+        </details>
+    {% else %}
         </div>
+    {% endif %}
+
         {% if subevent %}
             <h2 class="subevent-head">{{ subevent.name }}</h2>
             {% if frontpage_text %}

src/pretix/presale/templates/pretixpresale/fragment_event_list_status.html

@@ -0,0 +1,62 @@
+{% load i18n %}
+{% load icon %}
+{% load textbubble %}
+
+{% if event.has_subevents %}
+    {% textbubble "info" icon="bars" %}
+        {% trans "Event series" %}
+    {% endtextbubble %}
+{% elif event.presale_is_running and request.organizer.settings.event_list_availability %}
+    {% if event.best_availability_state == 100 %}
+        {% if event.best_availability_is_low %}
+            {% textbubble "success-warning" icon="exclamation-triangle" %}
+                {% trans "Few tickets left" %}
+            {% endtextbubble %}
+        {% else %}
+            {% textbubble "success" icon="check" %}
+                {% if event.has_paid_item %}
+                    {% trans "Buy now" context "available_event_in_list" %}
+                {% else %}
+                    {% trans "Book now" %}
+                {% endif %}
+            {% endtextbubble %}
+        {% endif %}
+    {% elif event.waiting_list_active and event.best_availability_state >= 0 %}
+        {% textbubble "warning" icon="ellipsis-h" %}
+            {% trans "Waiting list" %}
+        {% endtextbubble %}
+    {% elif event.best_availability_state == 20 %}
+        {% textbubble "danger" icon="minus" %}
+            {% trans "Reserved" %}
+        {% endtextbubble %}
+    {% elif event.best_availability_state < 20 %}
+        {% textbubble "danger" icon="times" %}
+            {% if event.has_paid_item %}
+                {% trans "Sold out" %}
+            {% else %}
+                {% trans "Fully booked" %}
+            {% endif %}
+        {% endtextbubble %}
+    {% endif %}
+{% elif event.presale_is_running %}
+    {% textbubble "success" icon="check" %}
+        {% trans "Book now" %}
+    {% endtextbubble %}
+{% elif event.presale_has_ended %}
+    {% textbubble "danger" icon="times" %}
+        {% trans "Sale over" %}
+    {% endtextbubble %}
+{% else %}
+    {% textbubble "warning" icon="clock-o" %}
+        {% trans "Not yet on sale" %}
+    {% endtextbubble %}
+    {% if event.settings.presale_start_show_date %}
+        <br><span class="text-muted">
+        {% with date_iso=event.effective_presale_start.isoformat date_human=event.effective_presale_start|date:"SHORT_DATE_FORMAT" %}
+            {% blocktrans trimmed with date='<time datetime="'|add:date_iso|add:'">'|add:date_human|add:"</time>"|safe %}
+                Sale starts {{ date }}
+            {% endblocktrans %}
+        {% endwith %}
+        </span>
+    {% endif %}
+{% endif %}

src/pretix/presale/templates/pretixpresale/organizers/index.html

@@ -23,11 +23,6 @@
             {{ organizer_homepage_text | rich_text }}
         {% endif %}
     </div>
-    {% if "old" in request.GET %}
-        <h3>{% trans "Past events" %}</h3>
-    {% else %}
-        <h3>{% trans "Upcoming events" %}</h3>
-    {% endif %}
     <div id="monthselform">
         <div class="row">
             <div class="col-md-12">
@@ -35,133 +30,76 @@
             </div>
         </div>
     </div>
-    {% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
     {% if events %}
-    <div class="event-list">
+        <div class="panel panel-default">
-        <div class="row hidden-xs hidden-sm">
+            <div class="panel-heading">
-            <div class="col-md-5">
+                <h2 class="panel-title">
-                <strong>{% trans "Name" %}</strong>
+                    <b>
+                    {% if "old" in request.GET %}
+                        {% trans "Past events" %}
+                    {% else %}
+                        {% trans "Upcoming events" %}
+                    {% endif %}
+                    </b>
+                </h2>
             </div>
-            <div class="col-md-3">
+        {% if filter_form.fields %}
-                <strong>{% trans "Date" %}</strong>
+            <div class="panel-subhead">
+                {% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
             </div>
-            <div class="col-md-2">
+        {% endif %}
-                <strong>{% trans "Status" %}</strong>
+            <div class="panel-body">
-            </div>
+                <dl class="full-width-list alternating-rows">
-            <div class="col-md-2">
+                {% for e in events %}{% eventurl e "presale:event.index" as url %}
+                    <div class="row">
+                        <dt class="col-md-4 col-xs-12"><a href="{{ url }}">{{ e.name }}</a></dt>
+                        <dd class="col-md-3 col-xs-12">
+                        {% if e.settings.show_dates_on_frontpage %}
+                            {% if e.has_subevents %}
+                                {% icon "calendar" %} {% trans "Multiple dates" context "subevent" %}
+                                <br>
+                                <span class="text-muted">
+                                   {{ e.daterange|default:e.get_date_range_display_as_html }}
+                                </span>
+                            {% else %}
+                                {{ e.daterange|default:e.get_date_range_display_as_html }}
+                                {% if e.settings.show_times %}
+                                    {% timezone e.tzname %}
+                                        <br>
+                                        <span class="text-muted" data-time="{{ e.date_from.isoformat }}" data-timezone="{{ e.tzname }}">
+                                            {% icon "clock-o" %}
+                                            {{ e.date_from|date:"TIME_FORMAT" }}
+                                            {% if e.settings.show_date_to and e.date_to and e.date_to.date == e.date_from.date %}
+                                                – {{ e.date_to|date:"TIME_FORMAT" }}
+                                            {% endif %}
+                                        </span>
+                                    {% endtimezone %}
+                                {% endif %}
+                            {% endif %}
+                        {% else %}
+                            &nbsp;
+                        {% endif %}
+                        </dd>
+                        <dd class="col-md-3 col-xs-6">
+                            <small>
+                                {% include "pretixpresale/fragment_event_list_status.html" with event=e %}
+                            </small>
+                        </dd>
+                        <dd class="col-md-2 col-xs-6 text-right flip">
+                            <a class="btn btn-primary btn-block" href="{{ url }}{% if e.has_subevents and e.match_by_subevents %}{{ filterquery }}{% endif %}">
+                                {% if e.has_subevents %}{% icon "ticket" %} {% trans "Tickets" %}
+                                {% elif e.presale_is_running and e.best_availability_state == 100 %}
+                                    {% icon "ticket" %} {% trans "Tickets" %}
+                                {% else %}
+                                    {% icon "info" %} {% trans "More info" %}
+                                {% endif %}
+                            </a>
+                        </dd>
+                    </div>
+                {% endfor %}
+                </dl>
             </div>
         </div>
-        {% for e in events %}{% eventurl e "presale:event.index" as url %}
-            <div class="row">
-                <div class="col-md-4 col-xs-12">
-                    <a href="{{ url }}">
-                        <strong>
-                            {{ e.name }}
-                        </strong>
-                    </a>
-                </div>
-                <div class="col-md-3 col-xs-12">
-
-                    {% if e.settings.show_dates_on_frontpage %}
-                        {% if e.has_subevents %}
-                            <span class="fa fa-calendar"></span> {% trans "Multiple dates" context "subevent" %}
-                            <br>
-                            <span class="text-muted">
-                               {{ e.daterange|default:e.get_date_range_display_as_html }}
-                            </span>
-                        {% else %}
-                            {{ e.daterange|default:e.get_date_range_display_as_html }}
-                            {% if e.settings.show_times %}
-                                {% timezone e.tzname %}
-                                    <br><small class="text-muted" data-time="{{ e.date_from.isoformat }}" data-timezone="{{ e.tzname }}">
-                                    {{ e.date_from|date:"TIME_FORMAT" }}
-                                    {% if e.settings.show_date_to and e.date_to and e.date_to.date == e.date_from.date %}
-                                        – {{ e.date_to|date:"TIME_FORMAT" }}
-                                    {% endif %}
-                                </small>
-                                {% endtimezone %}
-                            {% endif %}
-                        {% endif %}
-                    {% else %}
-                        &nbsp;
-                    {% endif %}
-                    <td>
-                </div>
-                <div class="col-md-3 col-xs-6">
-                    <small>
-                    {% if e.has_subevents %}
-                        {% textbubble "info" icon="bars" %}
-                            {% trans "Event series" %}
-                        {% endtextbubble %}
-                    {% elif e.presale_is_running and request.organizer.settings.event_list_availability %}
-                        {% if e.best_availability_state == 100 %}
-                            {% if e.best_availability_is_low %}
-                                {% textbubble "success-warning" icon="exclamation-triangle" %}
-                                    {% trans "Few tickets left" %}
-                                {% endtextbubble %}
-                            {% else %}
-                                {% textbubble "success" icon="check" %}
-                                    {% if e.has_paid_item %}
-                                        {% trans "Buy now" context "available_event_in_list" %}
-                                    {% else %}
-                                        {% trans "Book now" %}
-                                    {% endif %}
-                                {% endtextbubble %}
-                            {% endif %}
-                        {% elif e.waiting_list_active and e.best_availability_state >= 0 %}
-                            {% textbubble "warning" icon="ellipsis-h" %}
-                                {% trans "Waiting list" %}
-                            {% endtextbubble %}
-                        {% elif e.best_availability_state == 20 %}
-                            {% textbubble "danger" icon="minus" %}
-                                {% trans "Reserved" %}
-                            {% endtextbubble %}
-                        {% elif e.best_availability_state < 20 %}
-                            {% textbubble "danger" icon="times" %}
-                                {% if e.has_paid_item %}
-                                    {% trans "Sold out" %}
-                                {% else %}
-                                    {% trans "Fully booked" %}
-                                {% endif %}
-                            {% endtextbubble %}
-                        {% endif %}
-                    {% elif e.presale_is_running %}
-                        {% textbubble "success" icon="check" %}
-                            {% trans "Book now" %}
-                        {% endtextbubble %}
-                    {% elif e.presale_has_ended %}
-                        {% textbubble "danger" icon="times" %}
-                            {% trans "Sale over" %}
-                        {% endtextbubble %}
-                    {% else %}
-                        {% textbubble "warning" icon="clock-o" %}
-                            {% trans "Not yet on sale" %}
-                        {% endtextbubble %}
-                        {% if e.settings.presale_start_show_date %}
-                            <br><span class="text-muted">
-                            {% with date_iso=e.effective_presale_start.isoformat date_human=e.effective_presale_start|date:"SHORT_DATE_FORMAT" %}
-                                {% blocktrans trimmed with date='<time datetime="'|add:date_iso|add:'">'|add:date_human|add:"</time>"|safe %}
-                                    Sale starts {{ date }}
-                                {% endblocktrans %}
-                            {% endwith %}
-                            </span>
-                        {% endif %}
-                    {% endif %}
-                    </small>
-                </div>
-                <div class="col-md-2 col-xs-6 text-right flip">
-                    <a class="btn btn-primary btn-block" href="{{ url }}{% if e.has_subevents and e.match_by_subevents %}{{ filterquery }}{% endif %}">
-                        {% if e.has_subevents %}{% icon "ticket" %} {% trans "Tickets" %}
-                        {% elif e.presale_is_running and e.best_availability_state == 100 %}
-                            {% icon "ticket" %} {% trans "Tickets" %}
-                        {% else %}
-                            {% icon "info" %} {% trans "More info" %}
-                        {% endif %}
-                    </a>
-                </div>
-            </div>
-        {% endfor %}
-    </div>
     {% endif %}
     {% if "old" in request.GET %}
         <p><em>{% if not events %}{% trans "No archived events found." %} {% endif %}<a href="?{% url_replace request "old" "" %}">{% trans "Show upcoming" %}</a></em></p>

src/pretix/presale/views/event.py

@@ -555,6 +555,7 @@ class EventIndex(EventViewMixin, EventListMixin, CartMixin, TemplateView):
 
         context['ev'] = self.subevent or self.request.event
         context['subevent'] = self.subevent
+        context['subevent_list_foldable'] = self.subevent and "date" not in self.request.GET and "filtered" not in self.request.GET
 
         # Show voucher option if an event is selected and vouchers exist
         vouchers_exist = self.request.event.cache.get('vouchers_exist')

src/pretix/static/pretixpresale/js/ui/main.js

@@ -412,14 +412,6 @@ $(function () {
     });
     questions_init_profiles($("body"));
 
-    // Subevent choice
-    if ($(".subevent-toggle").length) {
-        $(".subevent-list").hide();
-        $(".subevent-toggle").show().click(function () {
-            $(".subevent-list").slideToggle(300);
-            $(this).slideToggle(300).attr("aria-expanded", true);
-        });
-    }
     if (sessionStorage) {
         $("[data-save-scrollpos]").on("click submit", function () {
             sessionStorage.setItem('scrollpos', window.scrollY);

src/pretix/static/pretixpresale/scss/_event.scss

@@ -235,33 +235,6 @@ div.front-page {
     }
 }
 
-.subevent-list {
-    background-color: white;
-
-    .row {
-        margin: 0;
-    }
-    .label {
-        text-decoration: none;
-    }
-    .subevent-row a {
-        display: block;
-        color: $text-color;
-        padding: 3px 0;
-    }
-    .subevent-row:nth-child(2n) a {
-        background-color: $gray-lighter;
-    }
-    .subevent-row:hover a {
-        background-color: darken($gray-lighter, 10%);
-    }
-    .subevent-row .row > div {
-        padding: 5px;
-        min-height: 35px; /* label height */
-        vertical-align: middle;
-    }
-}
-
 .calendar-nav, .calendar-nav li {
     list-style: none;
     margin: 0;

src/pretix/static/pretixpresale/scss/main.scss

@@ -412,6 +412,13 @@ details.details-open .panel-title::before {
     margin-right: .25em;
 }
 
+.panel-subhead {
+    margin-bottom: 15px;
+    padding: 15px;
+    background: $table-bg-accent;
+    border-bottom: 1px solid $table-border-color;
+}
+
 details {
     list-style: none;
 }
@@ -588,10 +595,10 @@ h2 .label {
   margin: 0;
   padding: 0;
 
-  li {
+  & > li, & > .row {
     padding: 15px 0;
   }
-  li+li {
+  & > li+li, & > .row + .row {
     border-top: 1px solid $table-border-color;
   }
 }