Added stylish mountable effect

config.json

@@ -10,6 +10,7 @@
 		"reset",
 		"base",
 		"typography",
+		"mountable",
 		"layout",
 		"navigation",
 		"headers",

mixins/Navigation.pixy

@@ -6,11 +6,11 @@ component Navigation(user *arn.User)
 
 component LoggedOutMenu
 	nav#navigation
-		NavigationButton("Dash", "/", "inbox")
+		NavigationButton("About", "/", "question-circle")
 		NavigationButton("Anime", "/anime", "television")
 		NavigationButton("Forum", "/forum", "comment")
 		NavigationButton("Users", "/users", "globe")
-		NavigationButton("Airing", "/airing", "rss")
+		NavigationButton("Airing", "/airing", "th")
 
 component LoggedInMenu(user *arn.User)
 	nav#navigation
@@ -22,7 +22,7 @@ component LoggedInMenu(user *arn.User)
 
 		.extra-navigation
 			ExtraNavigationButton("Users", "/users", "globe")
-			ExtraNavigationButton("Airing", "/airing", "rss")
+			ExtraNavigationButton("Airing", "/airing", "th")
 			
 			if user.Role == "admin"
 				ExtraNavigationButton("Admin", "/admin", "wrench")

mixins/Postable.pixy

@@ -1,5 +1,5 @@
 component Postable(post arn.Postable, viewUser *arn.User, highlightAuthorID string)
-	.post(data-highlight=post.Author().ID == highlightAuthorID)
+	.post.mountable(data-highlight=post.Author().ID == highlightAuthorID)
 		.post-author
 			Avatar(post.Author())
 			

mixins/ThreadLink.pixy

@@ -1,5 +1,5 @@
 component ThreadLink(thread *arn.Thread)
-	.thread-link(data-sticky=thread.Sticky)
+	.thread-link.mountable(data-sticky=thread.Sticky)
 		.post-author.thread-author
 			Avatar(thread.Author())
 		.thread-content-container

pages/anime/anime.pixy

@@ -146,19 +146,18 @@ component Anime(anime *arn.Anime, user *arn.User)
 		//- 		a.light-button(href=link.URL, target="_blank")
 		//- 			Icon("external-link")
 		//- 			span= link.Title
-		
 		a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener")
 			Icon("external-link")
 			span Kitsu
 
-		//- if providers.HummingBird
+			//- if providers.HummingBird
-		//- 	a.light-button(href="https://hummingbird.me/anime/" + providers.HummingBird.providerId, target="_blank") HummingBird
+			//- 	a.light-button(href="https://hummingbird.me/anime/" + providers.HummingBird.providerId, target="_blank") HummingBird
 
-		//- if providers.MyAnimeList
+			//- if providers.MyAnimeList
-		//- 	a.light-button(href="http://myanimelist.net/anime/" + providers.MyAnimeList.providerId, target="_blank") MyAnimeList
+			//- 	a.light-button(href="http://myanimelist.net/anime/" + providers.MyAnimeList.providerId, target="_blank") MyAnimeList
 
-		//- if providers.AnimePlanet
+			//- if providers.AnimePlanet
-		//- 	a.light-button(href="http://www.anime-planet.com/anime/" + providers.AnimePlanet.providerId, target="_blank") AnimePlanet
+			//- 	a.light-button(href="http://www.anime-planet.com/anime/" + providers.AnimePlanet.providerId, target="_blank") AnimePlanet
 
 	.sources
 		p Powered by Kitsu.

pages/anime/anime.scarlet

@@ -79,6 +79,10 @@
 	font-size 1.3rem
 	color link-color
 
+.anime-widget
+	margin-top 0.6rem
+	margin-bottom 0.4rem
+
 < 800px
 	.anime-rating-categories
 		vertical

pages/animelist/animelist.pixy

@@ -2,13 +2,13 @@ component AnimeList(animeList *arn.AnimeList)
 	table.anime-list
 		thead
 			tr
-				th Anime
+				th.anime-list-item-name Anime
-				th Progress
+				th.anime-list-item-episodes Progress
-				th Rating
+				th.anime-list-item-rating Rating
 		tbody
 			each item in animeList.Items
-				tr.anime-list-item
+				tr.anime-list-item.mountable
-					td
+					td.anime-list-item-name
 						a.ajax(href=item.Anime().Link())= item.Anime().Title.Canonical
-					td= toString(item.Episodes) + " / " + item.Anime().EpisodeCountString()
+					td.anime-list-item-episodes= toString(item.Episodes) + " / " + item.Anime().EpisodeCountString()
-					td= item.FinalRating()
+					td.anime-list-item-rating= item.FinalRating()

pages/animelist/animelist.scarlet

@@ -1,2 +1,17 @@
 .anime-list
-	//
+	vertical
+	width 100%
+
+	tr
+		horizontal
+
+.anime-list-item-name
+	flex 0.8
+
+.anime-list-item-episodes
+	flex 0.1
+	text-align center
+
+.anime-list-item-rating
+	flex 0.1
+	text-align center

pages/animelistitem/animelistitem.pixy

@@ -1,5 +1,5 @@
 component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn.Anime)
-	.widgets
+	.widgets.mountable
 		.widget.anime-list-item-view
 			h2= anime.Title.Canonical
 
@@ -10,7 +10,7 @@ component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn.
 			
 			InputTextArea("notes", item.Notes, "Notes", "Notes")
 
-			.buttons
+			.buttons.mountable
 				a.ajax.button(href="/+" + viewUser.Nick + "/animelist")
 					Icon("list")
 					span View collection

pages/dashboard/dashboard.pixy

@@ -2,7 +2,7 @@ component Dashboard(posts []*arn.Post)
 	h2.page-title Dash
 	
 	.widgets
-		.widget
+		.widget.mountable
 			h3.widget-title Schedule
 
 			for i := 1; i <= 5; i++
@@ -11,7 +11,7 @@ component Dashboard(posts []*arn.Post)
 						Icon("calendar-o")
 						span ...
 		
-		.widget
+		.widget.mountable
 			h3.widget-title Forums
 
 			each post in posts
@@ -20,7 +20,7 @@ component Dashboard(posts []*arn.Post)
 						Icon(arn.GetForumIcon(post.Thread().Tags[0]))
 						span= post.Thread().Title
 		
-		.widget
+		.widget.mountable
 			h3.widget-title Groups
 
 			for i := 1; i <= 5; i++
@@ -29,7 +29,7 @@ component Dashboard(posts []*arn.Post)
 						Icon("group")
 						span ...
 
-		.widget
+		.widget.mountable
 			h3.widget-title Messages
 
 			for i := 1; i <= 5; i++
@@ -38,7 +38,7 @@ component Dashboard(posts []*arn.Post)
 						Icon("comment")
 						span ...
 		
-		.widget
+		.widget.mountable
 			h3.widget-title Contacts
 
 			for i := 1; i <= 5; i++
@@ -47,7 +47,7 @@ component Dashboard(posts []*arn.Post)
 						Icon("address-card")
 						span ...
 		
-		.widget
+		.widget.mountable
 			h3.widget-title Follow
 
 			a.widget-element(href="https://discord.gg/0kimAmMCeXGXuzNF", target="_blank", rel="noopener")

pages/profile/profile.pixy

@@ -47,7 +47,7 @@ component ProfileHeader(viewUser *arn.User, user *arn.User)
 component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList, threads []*arn.Thread)
 	ProfileHeader(viewUser, user)
 	
-	.profile-category
+	.profile-category.mountable
 		h3
 			a.ajax(href="/+" + viewUser.Nick + "/animelist", title="View all anime") Anime
 
@@ -59,7 +59,7 @@ component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList,
 					a.profile-watching-list-item.ajax(href=item.Anime().Link(), title=item.Anime().Title.Canonical + " (" + toString(item.Episodes) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")")
 						img.anime-cover-image.profile-watching-list-item-image(src=item.Anime().Image.Tiny, alt=item.Anime().Title.Canonical)
 
-	.profile-category
+	.profile-category.mountable
 		h3
 			a.ajax(href="/+" + viewUser.Nick + "/threads", title="View all threads") Threads
 		

pages/settings/settings.pixy

@@ -1,7 +1,7 @@
 component Settings(user *arn.User)
 	h2.page-title Settings
 	.widgets
-		.widget
+		.widget.mountable
 			h3.widget-title
 				Icon("user")
 				span Personal
@@ -10,7 +10,7 @@ component Settings(user *arn.User)
 			InputText("tagline", user.Tagline, "Tagline", "Text that appears below your username")
 			InputText("website", user.Website, "Website", "Your homepage")
 
-		.widget
+		.widget.mountable
 			h3.widget-title
 				Icon("cubes")
 				span Accounts

scripts/AnimeNotifier.ts

@@ -32,6 +32,7 @@ export class AnimeNotifier {
 	}
 
 	onContentLoaded() {
+		this.updateMountables()
 		this.updateAvatars()
 
 		for(let element of findAll(".action")) {
@@ -73,6 +74,25 @@ export class AnimeNotifier {
 		}
 	}
 
+	updateMountables() {
+		const delay = 20
+		const maxDelay = 1000
+		
+		let time = 0
+
+		for(let element of findAll(".mountable")) {
+			setTimeout(() => {
+				window.requestAnimationFrame(() => element.classList.add("mounted"))
+			}, time)
+
+			time += delay
+
+			if(time > maxDelay) {
+				time = maxDelay
+			}
+		}
+	}
+
 	// onResize(e: UIEvent) {
 	// 	let hasScrollbar = this.app.content.clientHeight === this.app.content.scrollHeight
 

styles/mountable.scarlet

@@ -0,0 +1,10 @@
+mountable-transition-speed = 400ms
+
+.mountable
+	opacity 0
+	transform translateY(0.85rem)
+	transition opacity mountable-transition-speed ease, transform mountable-transition-speed ease
+
+.mounted
+	opacity 1 !important
+	transform translateY(0)