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

This commit is contained in:
Richard Schreiber
2024-12-18 13:32:26 +01:00
committed by GitHub
parent b45d58b60e
commit 5b99788354
10 changed files with 203 additions and 246 deletions

View File

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

View File

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

View File

@@ -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">
<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 %}">
<div class="row">
<div class="col-md-6">
<strong>{{ subev.name }}</strong>
</div>
<div class="col-md-4">
<span class="fa fa-calendar" aria-hidden="true"></span>
{{ subev.get_date_range_display_as_html }}
{% if event.settings.show_times %}
<span data-time="{{ subev.date_from.isoformat }}" data-timezone="{{ event.timezone }}" data-time-short>
<span class="fa fa-clock-o" aria-hidden="true"></span>
<time datetime="{{ subev.date_from.isoformat }}">{{ subev.date_from|date:"TIME_FORMAT" }}</time>
</span>
{% endif %}
</div>
<div class="col-md-2 text-right flip">
{% if subev.presale_is_running and event.settings.event_list_availability %}
{% if subev.best_availability_state == 100 %}
{% if subev.best_availability_is_low %}
<span class="label label-success-warning">{% trans "Few tickets left" %}</span>
{% else %}
{% if subev.has_paid_item %}
<span class="label label-success">{% trans "Buy now" context "available_event_in_list" %}</span>
{% else %}
<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>
<div class="row">
<dt class="col-md-4 col-xs-12">
<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 %}">
{{ subev.name }}
</a>
</dt>
<dd class="col-md-3 col-xs-12">
{{ subev.get_date_range_display_as_html }}
{% if event.settings.show_times %}
<br>
<span data-time="{{ subev.date_from.isoformat }}" data-timezone="{{ event.timezone }}" data-time-short>
{% icon "clock-o" %}
<time datetime="{{ subev.date_from.isoformat }}">{{ subev.date_from|date:"TIME_FORMAT" }}</time>
</span>
{% endif %}
</dd>
<dd class="col-md-3 col-xs-6">
<small>
{% include "pretixpresale/fragment_event_list_status.html" with event=subev %}
</small>
</dd>
<dd class="col-md-2 col-xs-6 text-right flip">
<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 %}">
{% if subev.presale_is_running and subev.best_availability_state == 100 %}
{% icon "ticket" %} {% trans "Tickets" %}
{% else %}
<span class="label label-warning">{% trans "Not yet on sale" %}</span>
{% icon "info" %} {% trans "More info" %}
{% endif %}
</div>
</div>
</a>
</li>
</a>
</dd>
</div>
{% endfor %}
</ul>
</dl>

View File

@@ -70,32 +70,37 @@
{% endif %}
{% endif %}
{% if subevent and "date" not in request.GET and "filtered" not in request.GET %}
<p>
{% if show_cart %}
<button class="subevent-toggle btn btn-primary btn-block btn-lg" aria-expanded="false">
<span class="fa fa-reply" aria-hidden="true"></span>
{% trans "Add tickets for a different date" %}
</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">
{% if subevent_list_foldable %}
<details class="panel panel-{% if show_cart %}primary{% else %}default{% endif %}">
<summary class="panel-heading">
{% else %}
<div class="panel panel-default">
<div class="panel-heading">
{% if subevent %}
{% trans "Other dates" context "subevent" %}
{% endif %}
<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" %}
{% endif %}
{% trans "Choose date to book a ticket" %}
{% endif %}</b>
</h3>
{% if subevent_list_foldable %}
</summary>
<div>
{% else %}
</div>
<div class="panel-body">
<div>
{% endif %}
{% 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 %}

View File

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

View File

@@ -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="row hidden-xs hidden-sm">
<div class="col-md-5">
<strong>{% trans "Name" %}</strong>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">
<b>
{% if "old" in request.GET %}
{% trans "Past events" %}
{% else %}
{% trans "Upcoming events" %}
{% endif %}
</b>
</h2>
</div>
<div class="col-md-3">
<strong>{% trans "Date" %}</strong>
{% if filter_form.fields %}
<div class="panel-subhead">
{% include "pretixpresale/fragment_event_list_filter.html" with request=request %}
</div>
<div class="col-md-2">
<strong>{% trans "Status" %}</strong>
</div>
<div class="col-md-2">
{% endif %}
<div class="panel-body">
<dl class="full-width-list alternating-rows">
{% 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>

View File

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

View File

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

View File

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

View File

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