CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-06 15:24:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Widget: remove limit of 50 events in list-view by adding a load-more-button (#2144)

Browse Source
This commit is contained in:
Richard Schreiber
2021-07-10 21:37:27 +02:00
committed by GitHub
parent 965aac6ad5
commit bdd9751f0e
5 changed files with 55 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pretix/static/pretixpresale/js/widget/widget.js
View File

@@ -53,6 +53,7 @@ var strings = {
'next_week': django.pgettext('widget', 'Next week'),
'previous_week': django.pgettext('widget', 'Previous week'),
'show_seating': django.pgettext('widget', 'Open seat selection'),
'load_more': django.pgettext('widget', 'Load more'),
'days': {
'MO': django.gettext('Mo'),
'TU': django.gettext('Tu'),
@@ -854,6 +855,8 @@ Vue.component('pretix-widget-event-form', {
this.$root.target_url = this.$root.parent_stack.pop();
this.$root.error = null;
this.$root.subevent = null;
this.$root.offset = 0;
this.$root.append_events = false;
this.$root.trigger_load_callback();
if (this.$root.events !== undefined && this.$root.events !== null) {
this.$root.view = "events";
@@ -938,9 +941,12 @@ Vue.component('pretix-widget-event-list', {
+ '</div>'
+ '<div class="pretix-widget-event-description" v-if="$root.parent_stack.length > 0 && $root.frontpage_text" v-html="$root.frontpage_text"></div>'
+ '<pretix-widget-event-list-entry v-for="event in $root.events" :event="event" :key="event.url"></pretix-widget-event-list-entry>'
+ '<p class="pretix-widget-event-list-load-more" v-if="$root.has_more_events"><button @click.prevent="load_more">'+strings.load_more+'</button></p>'
+ '</div>'),
methods: {
back_to_calendar: function () {
this.$root.offset = 0;
this.$root.append_events = false;
if (this.$root.weeks) {
this.$root.events = undefined;
this.$root.view = "weeks";
@@ -953,6 +959,12 @@ Vue.component('pretix-widget-event-list', {
this.$root.reload();
}
},
load_more: function () {
this.$root.append_events = true;
this.$root.offset += 50;
this.$root.loading++;
this.$root.reload();
}
}
});
@@ -1353,6 +1365,9 @@ var shared_root_methods = {
} else {
url = this.$root.target_url + 'widget/product_list?lang=' + lang;
}
if (this.$root.offset) {
url += '&offset=' + this.$root.offset;
}
if (this.$root.filter) {
url += '&' + this.$root.filter;
}
@@ -1408,11 +1423,13 @@ var shared_root_methods = {
root.name = data.name;
root.frontpage_text = data.frontpage_text;
} else if (data.events !== undefined) {
root.events = data.events;
root.events = root.append_events && root.events ? root.events.concat(data.events) : data.events;
root.append_events = false;
root.weeks = undefined;
root.view = "events";
root.name = data.name;
root.frontpage_text = data.frontpage_text;
root.has_more_events = data.has_more_events;
} else {
root.view = "event";
root.name = data.name;
@@ -1647,6 +1664,9 @@ var create_widget = function (element) {
currency: null,
name: null,
date_range: null,
offset: 0,
has_more_events: false,
append_events: false,
frontpage_text: null,
filter: filter,
item_filter: items,

13
src/pretix/static/pretixpresale/scss/widget.scss
View File

@@ -172,6 +172,15 @@
.pretix-widget-loading svg {
margin: 40px;
/*Fallback*/
position: absolute;
top: 50%;
margin-top: -64px;
/*Sticky*/
position: -webkit-sticky;
position: sticky;
top: Min(50vh, 50%);/* use uppercase M to use CSS-min and not SASS-min*/
-webkit-animation: pretix-widget-spin 6s linear infinite;
-moz-animation: pretix-widget-spin 6s linear infinite;
animation: pretix-widget-spin 6s linear infinite;
@@ -699,6 +708,10 @@
fill: $brand-primary;
}
.pretix-widget-event-list-load-more {
text-align: center;
}
.pretix-widget.pretix-widget-mobile {
.pretix-widget-event-week-table {
display: block;