Heavily improved forum readability

.gitignore

@@ -31,6 +31,9 @@ vendor/
 node_modules/
 tmp/
 
+# NPM
+/package-lock.json
+
 # debugger
 debug
 

pages/anime/anime.pixy

@@ -20,13 +20,15 @@ component Anime(anime *arn.Anime, user *arn.User)
 			p.anime-summary= anime.Summary
 	
 	if user != nil
-		.anime-actions
+		.buttons.anime-actions
 			if user.AnimeList().Contains(anime.ID)
 				a.button.ajax(href="/+" + user.Nick + "/animelist/" + anime.ID)
 					Icon("pencil")
 					span Edit in collection
 			else
-				button.action(data-action="addAnimeToCollection", data-anime-id=anime.ID, data-user-id=user.ID, data-user-nick=user.Nick) Add to collection
+				button.action(data-action="addAnimeToCollection", data-anime-id=anime.ID, data-user-id=user.ID, data-user-nick=user.Nick)
+					Icon("plus")
+					span Add to collection
 
 	h3.anime-section-name Ratings
 	.anime-rating-categories

pages/anime/anime.scarlet

@@ -45,7 +45,9 @@
 .anime-actions
 	horizontal
 	justify-content center
-	margin content-padding 0
+
+	// Action button margin
+	margin calc(content-padding - 0.5rem) -0.5rem
 
 	// Setting z-index requires setting a background as well
 	z-index 10

pages/forum/forum.pixy

@@ -1,7 +1,8 @@
 component Forum(tag string, threads []*arn.Thread)
 	h2.page-title Forum
 	ForumTags
-	ThreadList(threads)
+	.forum
+		ThreadList(threads)
 	
 	.buttons
 		button

pages/forum/forum.scarlet

@@ -1,6 +1,17 @@
+.forum
+	vertical
+	align-items center
+	
+	.thread-link
+		width 100%
+		max-width forum-width
+
 .forum-tag
+	color text-color !important
+	:hover
+		color white !important
 	&.active
-		color white
+		color white !important
 		background-color link-hover-color
 
 #load-more-threads

pages/threads/threads.scarlet

@@ -5,7 +5,7 @@
 .posts
 	vertical
 	width 100%
-	max-width 830px
+	max-width forum-width
 
 .post
 	vertical

scripts/AnimeNotifier.ts

@@ -45,9 +45,13 @@ export class AnimeNotifier {
 
 	onPopState(e: PopStateEvent) {
 		if(e.state) {
-			this.app.load(e.state, false)
+			this.app.load(e.state, {
+				addToHistory: false
+			})
 		} else if(this.app.currentPath !== this.app.originalPath) {
-			this.app.load(this.app.originalPath, false)
+			this.app.load(this.app.originalPath, {
+				addToHistory: false
+			})
 		}
 	}
 

scripts/Application.ts

@@ -1,3 +1,8 @@
+class LoadOptions {
+	addToHistory?: boolean
+	forceReload?: boolean
+}
+
 export class Application {
 	ajaxClass: string
 	fadeOutClass: string
@@ -46,12 +51,20 @@ export class Application {
 		})
 	}
 
-	load(url: string, addToHistory: boolean) {
+	load(url: string, options?: LoadOptions) {
 		if(this.lastRequest) {
 			this.lastRequest.abort()
 			this.lastRequest = null
 		}
 
+		if(!options) {
+			options = new LoadOptions()
+		}
+
+		if(options.addToHistory === undefined) {
+			options.addToHistory = true
+		}
+	
 		this.currentPath = url
 
 		// Start sending a network request
@@ -70,7 +83,7 @@ export class Application {
 			// Wait for the network request to end.
 			request.then(html => {
 				// Add to browser history
-				if(addToHistory)
+				if(options.addToHistory)
 					history.pushState(url, null, url)
 				
 				// Set content
@@ -144,7 +157,7 @@ export class Application {
 					return
 				
 				// Load requested page
-				self.load(url, true)
+				self.load(url)
 			}
 		}
 	}

scripts/Diff.ts

@@ -0,0 +1,5 @@
+export class Diff {
+	static update(element: HTMLElement, html: string) {
+		element.innerHTML = html
+	}
+}

scripts/actions.ts

@@ -1,5 +1,6 @@
 import { Application } from "./Application"
 import { AnimeNotifier } from "./AnimeNotifier"
+import { Diff } from "./Diff"
 
 // Add anime to collection
 export function addAnimeToCollection(arn: AnimeNotifier, button: HTMLElement) {
@@ -19,7 +20,11 @@ export function addAnimeToCollection(arn: AnimeNotifier, button: HTMLElement) {
 			throw body
 		}
 		
-		return arn.app.load("/+" + userNick + "/animelist/" + animeId, true)
+		return fetch("/_" + arn.app.currentPath, {
+			credentials: "same-origin"
+		})
+		.then(response => response.text())
+		.then(html => Diff.update(arn.app.content, html))
 	})
 	.catch(console.error)
 	.then(() => arn.loading(false))
@@ -43,7 +48,7 @@ export function removeAnimeFromCollection(arn: AnimeNotifier, button: HTMLElemen
 			throw body
 		}
 		
-		return arn.app.load("/+" + userNick + "/animelist", true)
+		return arn.app.load("/+" + userNick + "/animelist")
 	})
 	.catch(console.error)
 	.then(() => arn.loading(false))

styles/forum.scarlet

@@ -54,7 +54,7 @@
 	color text-color
 
 .forum-tags
-	justify-content flex-start !important
+	// justify-content flex-start !important
 	margin-bottom 1rem
 
 .post-author

styles/include/config.scarlet

@@ -14,6 +14,9 @@ ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0,
 ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
 ui-disabled-color = rgb(224, 224, 224)
 
+// Forum
+forum-width = 830px
+
 // Avatar
 avatar-size = 50px