Added search UI

mixins/Navigation.pixy

@@ -5,7 +5,7 @@ component Navigation(user *arn.User)
 		LoggedInMenu(user)
 
 component LoggedOutMenu
-	nav#navigation
+	nav#navigation.logged-out
 		NavigationButton("About", "/", "question-circle")
 		NavigationButton("Anime", "/anime", "television")
 		NavigationButton("Forum", "/forum", "comment")
@@ -13,22 +13,27 @@ component LoggedOutMenu
 		NavigationButton("Airing", "/airing", "th")
 
 component LoggedInMenu(user *arn.User)
-	nav#navigation
+	nav#navigation.logged-in
-		NavigationButton("Dash", "/", "inbox")
+		ExtraNavigationButton("Dash", "/", "inbox")
-		NavigationButton("Anime", "/anime", "television")
+		ExtraNavigationButton("Anime", "/anime", "television")
-		NavigationButton("Profile", "/+", "user")
+		ExtraNavigationButton("Profile", "/+", "user")
-		NavigationButton("Forum", "/forum", "comment")
+		ExtraNavigationButton("Forum", "/forum", "comment")
-		NavigationButton("Settings", "/settings", "cog")
+
+		FuzzySearch
 
 		.extra-navigation
+			//- if user.Role == "admin"
+			//- 	ExtraNavigationButton("Admin", "/admin", "wrench")
+			
 			ExtraNavigationButton("Users", "/users", "globe")
 			ExtraNavigationButton("Airing", "/airing", "th")
-			
+			ExtraNavigationButton("Settings", "/settings", "cog")
-			if user.Role == "admin"
-				ExtraNavigationButton("Admin", "/admin", "wrench")
 			
 			NavigationButtonNoAJAX("Logout", "/logout", "sign-out")
 
+component FuzzySearch
+	input#search(type="text", placeholder="Search...", title="Shortcut: Ctrl + Q")
+
 component NavigationButton(name string, target string, icon string)
 	a.navigation-link.ajax(href=target, aria-label=name)
 		.navigation-button

pages/search/search.scarlet

@@ -1,7 +1,7 @@
-#search-container
+// #search-container
-	horizontal
+// 	horizontal
-	justify-content center
+// 	justify-content center
 
-#search
+// #search
-	width 100%
+// 	width 100%
-	max-width 560px
+// 	max-width 560px

scripts/AnimeNotifier.ts

@@ -56,6 +56,19 @@ export class AnimeNotifier {
 		}
 	}
 
+	onKeyDown(e: KeyboardEvent) {
+		// Ctrl + Q = Search
+		if(e.ctrlKey && e.keyCode == 81) {
+			let search = this.app.find("search") as HTMLInputElement
+
+			search.focus()
+			search.select()
+
+			e.preventDefault()
+			e.stopPropagation()
+		}
+	}
+
 	updateAvatars() {
 		for(let element of findAll(".user-image")) {
 			let img = element as HTMLImageElement

scripts/main.ts

@@ -6,6 +6,7 @@ let arn = new AnimeNotifier(app)
 
 document.addEventListener("DOMContentLoaded", arn.onContentLoaded.bind(arn))
 document.addEventListener("readystatechange", arn.onReadyStateChange.bind(arn))
+document.addEventListener("keydown", arn.onKeyDown.bind(arn), false)
 
 window.addEventListener("popstate", arn.onPopState.bind(arn))
 // window.addEventListener("resize", arn.onResize.bind(arn))

styles/forms.scarlet

@@ -1,6 +1,6 @@
 input, textarea, button, select
 	font-family inherit
-	font-size 1rem
+	font-size 1em
 	padding 0.4em 0.8em
 	border-radius 3px
 	color text-color

styles/navigation.scarlet

@@ -42,6 +42,17 @@
 .navigation-text
 	display none
 
+#search
+	display none
+	border-radius 0
+	background text-color
+	border none
+	color white
+
+	:focus
+		border none !important
+		box-shadow none
+
 .extra-navigation
 	display none
 
@@ -59,20 +70,25 @@
 > 930px
 	.navigation-button
 		font-size 1.1em
-
-		.icon
-			margin-right 0.5em
 	
 	#navigation
 		justify-content flex-start
 	
-	.navigation-text
+	.logged-out
-		display inline-block
+		.navigation-text
+			display inline-block
+		
+		.navigation-button
+			.icon
+				margin-right 0.5em
+
+	#search
+		display block
+		flex 1
 	
 	.extra-navigation
 		horizontal
 		justify-content flex-end
-		flex 1
 
 < 400px height
 	#navigation
@@ -84,4 +100,7 @@
 		horizontal
 
 	.extra-navigation
+		display none
+
+	#search
 		display none