Few minor updates

pages/animelist/animelist.go

@@ -28,5 +28,5 @@ func Get(ctx *aero.Context) string {
 	animeList.PrefetchAnime()
 	animeList.Sort()
 
-	return ctx.HTML(components.AnimeLists(animeList.SplitByStatus(), animeList.User(), user))
+	return ctx.HTML(components.AnimeLists(animeList.SplitByStatus(), animeList.User(), user, ctx.URI()))
 }

pages/animelist/animelist.pixy

@@ -1,5 +1,5 @@
-component AnimeLists(animeLists map[string]*arn.AnimeList, viewUser *arn.User, user *arn.User)
+component AnimeLists(animeLists map[string]*arn.AnimeList, viewUser *arn.User, user *arn.User, uri string)
-	ProfileHeader(viewUser, user)
+	ProfileHeader(viewUser, user, uri)
 
 	h2.page-title.anime-list-owner= viewUser.Nick + "'s collection"
 
@@ -49,8 +49,8 @@ component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User
 				if user != nil
 					th.anime-list-item-actions Actions
 		tbody
-			for i, item := range animeList.Items
+			each item in animeList.Items
-				tr(class=utils.ItemCSSClass(animeList, i), title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/update/" + item.AnimeID)
+				tr.anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/update/" + item.AnimeID)
 					td.anime-list-item-name
 						a.ajax(href=item.Link(animeList.User().Nick))= item.Anime().Title.Canonical
 					td.anime-list-item-airing-date

pages/animelist/animelist.scarlet

@@ -72,3 +72,6 @@
 < 1100px
 	.anime-list-item-rating
 		display none
+
+.fill-screen
+	min-height calc(100vh - nav-height - content-padding * 2 - 1rem - 43px - 23px)

pages/animelist/status.go

@@ -19,7 +19,7 @@ func FilterByStatus(status string) aero.Handle {
 			return response
 		}
 
-		return ctx.HTML(components.AnimeListFilteredByStatus(list, list.User(), user))
+		return ctx.HTML(components.AnimeListFilteredByStatus(list, list.User(), user, status, ctx.URI()))
 	}
 }
 

pages/animelist/status.pixy

@@ -1,8 +1,9 @@
-component AnimeListFilteredByStatus(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User)
+component AnimeListFilteredByStatus(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User, status string, uri string)
-	ProfileHeader(viewUser, user)
+	ProfileHeader(viewUser, user, uri)
 
 	if len(animeList.Items) == 0
 		p.no-data.mountable= viewUser.Nick + " hasn't added any anime to this list yet."
 	else
-		.anime-list-container
+		.anime-list-container.fill-screen
+			h3.status-name= arn.ListItemStatusName(status)
 			AnimeList(animeList, viewUser, user)

pages/profile/posts.go

@@ -35,6 +35,6 @@ func GetPostsByUser(ctx *aero.Context) string {
 		postables[i] = arn.ToPostable(post)
 	}
 
-	return ctx.HTML(components.LatestPosts(postables, viewUser, utils.GetUser(ctx)))
+	return ctx.HTML(components.LatestPosts(postables, viewUser, utils.GetUser(ctx), ctx.URI()))
 
 }

pages/profile/posts.pixy

@@ -1,5 +1,5 @@
-component LatestPosts(postables []arn.Postable, viewUser *arn.User, user *arn.User)
+component LatestPosts(postables []arn.Postable, viewUser *arn.User, user *arn.User, uri string)
-	ProfileHeader(viewUser, user)
+	ProfileHeader(viewUser, user, uri)
 	
 	if len(postables) > 0
 		h2.page-title= len(postables), " latest posts by ", postables[0].Author().Nick

pages/profile/profile.go

@@ -1,6 +1,8 @@
 package profile
 
 import (
+	"sort"
+
 	"github.com/aerogo/aero"
 	"github.com/aerogo/flow"
 	"github.com/animenotifier/arn"
@@ -36,7 +38,12 @@ func Profile(ctx *aero.Context, viewUser *arn.User) string {
 	}, func() {
 		animeList = viewUser.AnimeList()
 		animeList.PrefetchAnime()
+
+		// Sort by rating
+		sort.Slice(animeList.Items, func(i, j int) bool {
+			return animeList.Items[i].Rating.Overall > animeList.Items[j].Rating.Overall
+		})
 	})
 
-	return ctx.HTML(components.Profile(viewUser, user, animeList, threads, posts, tracks))
+	return ctx.HTML(components.Profile(viewUser, user, animeList, threads, posts, tracks, ctx.URI()))
 }

pages/profile/profile.pixy

@@ -1,4 +1,4 @@
-component ProfileHeader(viewUser *arn.User, user *arn.User)
+component ProfileHeader(viewUser *arn.User, user *arn.User, uri string)
 	.profile
 		img.profile-cover(src=viewUser.CoverImageURL(), alt="Cover image")
 
@@ -44,9 +44,9 @@ component ProfileHeader(viewUser *arn.User, user *arn.User)
 					Icon("rocket")
 					span= arn.Capitalize(viewUser.Role)
 	
-	ProfileNavigation(viewUser)
+	ProfileNavigation(viewUser, uri)
 
-component ProfileNavigation(viewUser *arn.User)
+component ProfileNavigation(viewUser *arn.User, uri string)
 	.buttons.tabs
 		a.button.tab.action(href="/+" + viewUser.Nick, data-action="diff", data-trigger="click")
 			Icon("th")
@@ -68,32 +68,33 @@ component ProfileNavigation(viewUser *arn.User)
 			Icon("music")
 			span.tab-text Tracks
 	
-	//- StatusTabs("/+" + viewUser.Nick + "/animelist")
+	//- if strings.Contains(uri, "/animelist")
+	//- 	StatusTabs("/+" + viewUser.Nick + "/animelist")
 	
 component StatusTabs(urlPrefix string)
-	.buttons.tabs
+	.buttons.tabs.status-tabs
-		a.button.tab.action(href=urlPrefix + "/watching", data-action="diff", data-trigger="click")
+		a.button.status-tab.action(href=urlPrefix + "/watching", data-action="diff", data-trigger="click")
 			Icon("play")
 			span.tab-text Watching
 		
-		a.button.tab.action(href=urlPrefix + "/completed", data-action="diff", data-trigger="click")
+		a.button.status-tab.action(href=urlPrefix + "/completed", data-action="diff", data-trigger="click")
 			Icon("check")
 			span.tab-text Completed
 
-		a.button.tab.action(href=urlPrefix + "/planned", data-action="diff", data-trigger="click")
+		a.button.status-tab.action(href=urlPrefix + "/planned", data-action="diff", data-trigger="click")
 			Icon("forward")
 			span.tab-text Planned
 
-		a.button.tab.action(href=urlPrefix + "/hold", data-action="diff", data-trigger="click")
+		a.button.status-tab.action(href=urlPrefix + "/hold", data-action="diff", data-trigger="click")
 			Icon("pause")
 			span.tab-text On Hold
 
-		a.button.tab.action(href=urlPrefix + "/dropped", data-action="diff", data-trigger="click")
+		a.button.status-tab.action(href=urlPrefix + "/dropped", data-action="diff", data-trigger="click")
 			Icon("stop")
 			span.tab-text Dropped
 
-component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList, threads []*arn.Thread, posts []*arn.Post, tracks []*arn.SoundTrack)
+component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList, threads []*arn.Thread, posts []*arn.Post, tracks []*arn.SoundTrack, uri string)
-	ProfileHeader(viewUser, user)
+	ProfileHeader(viewUser, user, uri)
 
 	if len(animeList.Items) == 0
 		p.no-data.mountable= viewUser.Nick + " hasn't added any anime yet."

pages/profile/threads.go

@@ -27,5 +27,5 @@ func GetThreadsByUser(ctx *aero.Context) string {
 		threads = threads[:maxThreads]
 	}
 
-	return ctx.HTML(components.ProfileThreads(threads, viewUser, utils.GetUser(ctx)))
+	return ctx.HTML(components.ProfileThreads(threads, viewUser, utils.GetUser(ctx), ctx.URI()))
 }

pages/profile/threads.pixy

@@ -1,5 +1,5 @@
-component ProfileThreads(threads []*arn.Thread, viewUser *arn.User, user *arn.User)
+component ProfileThreads(threads []*arn.Thread, viewUser *arn.User, user *arn.User, uri string)
-	ProfileHeader(viewUser, user)
+	ProfileHeader(viewUser, user, uri)
 
 	if len(threads) == 0
 		p.no-data.mountable= viewUser.Nick + " hasn't written any threads yet."

pages/profile/tracks.go

@@ -27,6 +27,6 @@ func GetSoundTracksByUser(ctx *aero.Context) string {
 
 	arn.SortSoundTracksLatestFirst(tracks)
 
-	return ctx.HTML(components.TrackList(tracks, viewUser, user))
+	return ctx.HTML(components.TrackList(tracks, viewUser, user, ctx.URI()))
 
 }

pages/profile/tracks.pixy

@@ -1,5 +1,5 @@
-component TrackList(tracks []*arn.SoundTrack, viewUser *arn.User, user *arn.User)
+component TrackList(tracks []*arn.SoundTrack, viewUser *arn.User, user *arn.User, uri string)
-	ProfileHeader(viewUser, user)
+	ProfileHeader(viewUser, user, uri)
 
 	h2.page-title= "Tracks added by " + viewUser.Nick
 	

pages/profile/watching.scarlet

@@ -10,6 +10,15 @@
 	height 78px !important
 	border-radius 2px
 
+// .status-tabs
+// 	position fixed
+// 	top 4.6rem
+// 	right 1.6rem
+// 	flex-direction column
+
+// .status-tab
+// 	font-size 0.9rem
+
 // < 380px
 // 	.profile-watching-list
 // 		justify-content center

scripts/Actions.ts

@@ -83,7 +83,7 @@ export function diff(arn: AnimeNotifier, element: HTMLElement) {
 	let url = element.dataset.url || (element as HTMLAnchorElement).getAttribute("href")
 	
 	arn.diff(url).then(() => {
-		const duration = 300.0
+		const duration = 250.0
 		const steps = 60
 		const interval = duration / steps
 		const fullSin = Math.PI / 2

scripts/AnimeNotifier.ts

@@ -225,9 +225,11 @@ export class AnimeNotifier {
 
 	modifyDelayed(className: string, func: (element: HTMLElement) => void) {
 		const delay = 20
+		const maxDelay = 1000
 		
 		let time = 0
 		let start = Date.now()
+		let maxTime = start + maxDelay
 		let collection = document.getElementsByClassName(className)
 		let mutations = []
 
@@ -245,6 +247,10 @@ export class AnimeNotifier {
 				time = mountableTypes[type] = start
 			}
 
+			if(time > maxTime) {
+				time = maxTime
+			}
+
 			mutations.push({
 				element,
 				time
@@ -276,7 +282,7 @@ export class AnimeNotifier {
 
 	diff(url: string) {
 		if(url == this.app.currentPath) {
-			return
+			return Promise.reject(null)
 		}
 
 		let request = fetch("/_" + url, {
@@ -292,7 +298,7 @@ export class AnimeNotifier {
 
 		// Delay by transition-speed
 		return delay(300).then(() => {
-			request
+			return request
 			.then(html => this.app.setContent(html, true))
 			.then(() => this.app.markActiveLinks())
 			.then(() => this.app.emit("DOMContentLoaded"))

styles/base.scarlet

@@ -29,12 +29,6 @@ a
 	// &.active
 	// 	color link-active-color
 
-strong
-	font-weight bold
-
-em
-	font-style italic
-
 img
 	backface-visibility hidden
 

styles/include/config.scarlet

@@ -65,3 +65,4 @@ nav-height = 3.11rem
 // Timings
 fade-speed = 200ms
 transition-speed = 250ms
+mountable-transition-speed = 400ms

styles/mountable.scarlet

@@ -1,5 +1,3 @@
-mountable-transition-speed = 400ms
-
 .mountable
 	opacity 0
 	transform translateY(0.85rem)

styles/typography.scarlet

@@ -11,6 +11,18 @@ h2
 	margin-top content-padding
 	margin-bottom content-padding
 
+strong
+	font-weight bold
+
+em
+	font-style italic
+
+hr
+	border none
+	border-bottom 1px solid text-color
+	opacity 0.1
+	margin-bottom content-padding
+
 p > img
 	max-width 100%
 	border-radius 3px