X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fepisodes%2FFilter.js;h=06dcf13f65501839f08090b58754c69d35fafa1f;hb=9f54b6e8fde827556cf858818090a1dfc829624c;hp=b411f82193574c9036b3ff8d22bbe6d4b99a940e;hpb=c8bcea2a3093707b14fd655f3b284b2d245b483f;p=alttp.git

diff --git a/resources/js/components/episodes/Filter.js b/resources/js/components/episodes/Filter.js
index b411f82..06dcf13 100644
--- a/resources/js/components/episodes/Filter.js
+++ b/resources/js/components/episodes/Filter.js
@@ -16,7 +16,9 @@ const Filter = ({ filter, setFilter }) => {
 				before: moment().startOf('day').add(8, 'days').toISOString(),
 			},
 		}).then(response => {
-			const newEvents = response.data || [];
+			const newEvents = (response.data || []).sort(
+				(a, b) => (a.short || a.title).localeCompare(b.short || b.title)
+			);
 			setEvents(newEvents);
 		}).catch(e => {
 			if (!axios.isCancel(e)) {
@@ -50,15 +52,16 @@ const Filter = ({ filter, setFilter }) => {
 
 	if (!events || !events.length) return null;
 
-	return <div className="episode-filter">
+	return <div className="episode-filter button-bar text-end">
 		{events.map(event =>
 			<Button
 				active={isEventSelected(event)}
 				key={event.id}
 				onClick={() => toggleEvent(event)}
+				title={event.short ? event.title : null}
 				variant="outline-secondary"
 			>
-				{event.title}
+				{event.short || event.title}
 			</Button>
 		)}
 	</div>;