Improved episode overview for long series

pages/anime/anime.go

@@ -9,6 +9,9 @@ import (
 	"github.com/animenotifier/notify.moe/utils"
 )
 
+const maxEpisodes = 26
+const maxEpisodesLongSeries = 5
+
 // Get anime page.
 func Get(ctx *aero.Context) string {
 	id := ctx.Get("id")
@@ -25,5 +28,16 @@ func Get(ctx *aero.Context) string {
 		return ctx.Error(http.StatusNotFound, "Error fetching soundtracks", err)
 	}
 
-	return ctx.HTML(components.Anime(anime, tracks, user))
+	episodesReversed := false
+
+	if len(anime.Episodes) > maxEpisodes {
+		episodesReversed = true
+		anime.Episodes = anime.Episodes[len(anime.Episodes)-maxEpisodesLongSeries-1:]
+
+		for i, j := 0, len(anime.Episodes)-1; i < j; i, j = i+1, j-1 {
+			anime.Episodes[i], anime.Episodes[j] = anime.Episodes[j], anime.Episodes[i]
+		}
+	}
+
+	return ctx.HTML(components.Anime(anime, tracks, user, episodesReversed))
 }

pages/anime/anime.pixy

@@ -1,4 +1,4 @@
-component Anime(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User)
+component Anime(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User, episodesReversed bool)
 	.anime-header(data-id=anime.ID)
 		if anime.Image.Small != ""
 			.anime-image-container
@@ -145,6 +145,9 @@ component Anime(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User)
 				SoundTrack(track)
 	
 	if len(anime.Episodes) > 0
+		if episodesReversed
+			h3.anime-section-name Latest episodes
+		else
 			h3.anime-section-name Episodes
 		table
 			tbody.episodes
@@ -155,7 +158,7 @@ component Anime(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User)
 						td.episode-actions
 							a(href="https://translate.google.com/#ja/en/" + episode.Title.Japanese, target="_blank", rel="noopener")
 								RawIcon("google")
-						td.episode-airing-date-start= episode.AiringDate.StartDateHuman()
+						td.episode-airing-date-start(title=episode.AiringDate.StartTimeHuman())= episode.AiringDate.StartDateHuman()
 
 	//- h3.anime-section-name Reviews
 	//- p Coming soon.

pages/anime/episode.scarlet

@@ -12,7 +12,7 @@
 	flex 1
 
 .episode-airing-date-start
-	flex-basis 280px
+	flex-basis 180px
 	text-align right
 
 < 800px